🌊

Next.js12でリリースされたmiddlewareを使ってみる

2021/10/27に公開

Next.js

middleware

tech

about

/pages/_middleware.js(ts)ファイルが作成されている場合、/pagesディレクトリ以下全てのページ(route)で実行される。

_middleware.jsファイルが複数のディレクトリに配置されている場合は、階層が浅い方から順に実行されていく。
例：　/pages/about/_middleware.jsと、/pages/about/team/_middleware.jsがある場合、about配下の_middleware.jsが最初に実行され、その次にabout/team配下の方が実行される。

- package.json
- /pages
    index.tsx
    - /about
      _middleware.ts # 最初に実行
      about.tsx
      - /teams
        _middleware.ts # 2番目に実行
        teams.tsx

docs

https://nextjs.org/docs/middleware

use

Next.js12のプロジェクトを作成

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

or
既存のプロジェクトに最新のnextをインストール
npm install next@latest

pages以下にmiddlewareファイルを作成
touch pages/_middleware.ts
_middleware.tsに以下を記述

import type { NextFetchEvent, NextRequest } from 'next/server'

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  return new Response('Hello, world!')
}

ミドルウェアはmiddleware関数によって作成される。

http://localhost:3000/　にアクセスすると、Hello, world!と表示される

middleware examples

クエリパタメータをチェックして、許可されていない場合はリダイレクトする

import { NextRequest, NextResponse } from 'next/server'

const allowedParams = ['hoge']

export function middleware(req: NextRequest) {
  const url = req.nextUrl
  let changed = false

  url.searchParams.forEach((_, key) => {

    if (!allowedParams.includes(key)) {
      url.searchParams.delete(key)
      changed = true
    }
  })

  if (changed) {
    return NextResponse.redirect(url)
  }
}