Next.js middleware でBasic 認証を試す

TL;DR

• Next.js 12 でリリースされたmiddleware を試す
• middleware でBasic 認証をかけてみる

About

Next.js 12でリリースされたmiddleware でBaisc 認証を試した備忘録。
コードは 公式のexample にのっているものを使用。
何もつまづきなくBasic 認証をかけれた。よかった。

Version

• Next.js
  • 12.0.1
• node
  • v17.0.1
  • 現時点の "node:alpine" docker イメージ

試す

Next.js プロジェクトの作成

$ npx create-next-app --ts basicauth

$ tree -I node_modules
.
|-- README.md
|-- next-env.d.ts
|-- next.config.js
|-- package-lock.json
|-- package.json
|-- pages
|   |-- _app.tsx
|   |-- api
|   |   `-- hello.ts
|   `-- index.tsx
|-- public
|   |-- favicon.ico
|   `-- vercel.svg
|-- styles
|   |-- Home.module.css
|   `-- globals.css
`-- tsconfig.json

Docker で起動する

docker コマンドでnpm インストールしてローカルサーバーを起動

$ docker run -v `pwd`:/app -w /app node:alpine npm install
$ docker run -v `pwd`:/app -w /app -p 3000:3000 node:alpine npm run dev

_middleware.ts ファイルを作成

参考: examples/_middleware.ts at main · vercel/examples

参考というかそのままコピペ。 pages/_middleware.ts にファイルを作成し、以下のコードを記載

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

export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get('authorization')

  if (basicAuth) {
    const auth = basicAuth.split(' ')[1]
    const [user, pwd] = Buffer.from(auth, 'base64').toString().split(':')

    if (user === '4dmin' && pwd === 'testpwd123') {
      return NextResponse.next()
    }
  }

  return new Response('Auth required', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  })
}

localhost:3000 へアクセスし、basic 認証が有効になっていることを確認。