NextJS 12のミドルウェア‐それらは何であり,どのようにそれらを開始するか

19702 ワード

昨日、我々はNextJS Confと我々は多くの新しいものを得た.NextJS 12リリースされており、それは新しいエキサイティングな機能のトンを持っている.これらの機能の1つはmiddleware in NextJSですので、どのように動作するかを見てみましょう.

NextJSミドルウェアは何ですか?
ミドルウェアはコードの単純な部分であり、それが完了する前にさえ要求に対する応答を変更することができます.我々は、再書き込みすることができますリダイレクト、ヘッダーやストリームのHTMLを追加するには、ユーザーの要求に基づいて.

This definition is from the NextJS Middleware Docs

nextjs 12から始める
私は、この例のためにReplitですべてをするつもりです.また、このチュートリアルで私と一緒に従うことができます.
REPL - https://replit.com/@AnishDe12020/NextJS-12-Middlewarecreate-next-appでNextJSプロジェクトを作成することで、NextJS 11が設定されたプロジェクト(2021年10月27日現在)を提供します.
NPMで-

npm install next@latest

糸で-

yarn add next@latest

単純なミドルウェア
今、ミドルウェアを追加するには、私たちのページディレクトリに_middleware.jsファイルを作成する必要があります.また、ページディレクトリのサブディレクトリにミドルウェアファイルを追加することでトップレベルのミドルウェアファイルを実行することもできます.詳細はNextJS Middleware Execution Order Documentationを参照してください.
簡単なミドルウェア機能を書きましょう.

const middleware = (req, ev) => {
  return new Response(req.ua.os.name);
};

export default middleware;

これにより、ページ上のユーザーのオペレーティングシステムが表示されます.我々は、ユーザーにHTMLをストリーミングしていたが、今どのように我々はフードの下にルートを書き換えることができます参照してください.

フードの下のルートを書き換えるミドルウェア
まず、[os].jsと呼ばれる新しいファイルを作成し、そこにindex.jsコードをコピーします.[os].js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Vercel
            and Replit
        </a>
      </footer>
    </div>
  )
}

さあ、私たちの_middleware.jsファイルに戻りましょう.最初に我々はNextResponseをインポートします

import {NextResponse} from "next/server"

では、ユーザのオペレーティングシステムを変数

const os = req.ua.os.name

今、我々は作成した新しいルートにURLを書き換えることができます.

return NextResponse.rewrite(`/${os}`) // This return is necessary

これは、NextResponseファイルがどのように見えるかです.

import {NextResponse} from "next/server"

const middleware =  (req, ev) => {
  const os = req.ua.os.name

  return NextResponse.rewrite(`/${os}`)
};

export default middleware;

次のルータを新しいルートでインポートしましょう

import {useRouter} from "next/router"

これが反応フックであるので、返される関数の中でNextJSルータの新しいインスタンスを作成する必要があります.

const router = useRouter()

ミドルウェアで以前に書き換えたURLパラメータからユーザのオペレーティングシステムを得ることができます

const os = router.query.os

最後に、どのようなオペレーティングシステムを使用しているユーザーを表示しよう

<h1 className={styles.title}>
      You are using the {os} operating system
</h1>

最後に、これは_middleware.jsのように見えます-

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import {useRouter} from "next/router"

export default function Os() {
  const router = useRouter()

  const os = router.query.os
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          You are using the {os} operating system
        </h1>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Vercel
            and Replit
        </a>
      </footer>
    </div>
  )
}

私たちがホームページを訪問するならば、我々はこれを見るべきです(私がNextJS Boilerplateコードのいくらかを削除した点に注意してください).

ブラウザのデバッグツールを使ってブラウザユーザーエージェントをエミュレートできます.

なお、URLは[os].jsではなくhttps://nextjs-12-middleware.anishde12020.repl.co/やhttps://nextjs-12-middleware.anishde12020.repl.co/Linuxであることに注意してください.これは、ミドルウェアでのリクエストを再書き込みしているため、クライアント側に変更はありません.

どのように、NextJSミドルウェアはフードの下で働きますか?
Nextjsミドルウェアは、Vercel's Edge Functionsで動くV8 Engineを利用します.V 8エンジンは、C +で書かれたJavaScriptエンジンであり、Googleによって維持されます.これは、仮想マシンやコンテナ上でnodejsを実行するよりも高速です.

エッジ関数の制限
いくつかのnodejs APIは、ファイルシステムAPIなどのミドルウェア(エッジ関数として)で使用できません.また、いくつかのNodeJSモジュールはモジュールを実装しているモジュールとして動作しません任意のネイティブのnodejs APIを使用しないでください.詳細については、hereを参照してください

ラッピング
これまでのところ、我々はミドルウェアの力を見てきたし、これが開発者にとって大きな特徴である.地域のサイトを提供するようなものは、地域ベースの割引、認証、ボットの検出を提供し、はるかに迅速かつ容易にミドルウェアを使用して行うことができます.
Vercelのチームもミドルウェアを使用して多くの例をまとめました.それらをチェックアウトhere
それは、このポストのために、以下のコメントを残して自由に感じて、あなたも私に手を差し伸べることができます

Reference

この問題について(NextJS 12のミドルウェア‐それらは何であり,どのようにそれらを開始するか), 我々は、より多くの情報をここで見つけました https://dev.to/anishde12020/middleware-in-nextjs-12-what-are-they-and-how-to-get-started-with-them-3n9o

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

androidスライドロック解除

Excelの数式テーブルのインデックスから列名を取得する!