【Middleware使用】Next.js12でBasic認証を導入（ローカル,vercel 両対応）

投稿日

2022.02.24

【Middleware使用】Next.js12でBasic認証を導入（ローカル,vercel 両対応）

Next.js12にBasic認証を導入する
Vercelで設定する
余談（Vercel以外での_middlewareについて）

Next.js ver13系ではこの記事の方法が使えなくなりました。

13系の人は以下記事を参考にしてみて下さいmm

Next.js13でBasic認証を導入（App Router対応）

Next.jsのversion12から Middleware と呼ばれるものが導入されました。

Middlewareについて簡単に書くと、

pagesフォルダの特定フォルダ配下に _middleware.js(tsももちろんOK)を配置すると

リクエスト完了前に実行してくれる、というもの。

ユーザーのリクエストをもとに、レスポンスの書き換え、リダイレクト、ヘッダーの追加、HTMLのストリーミングなどをおこなうことができます。

Middleware | Next.js より引用（DeepL翻訳）

Next.js ver11まで_app.tsxでBasic認証を設定する方法が一般的なイメージでしたが

Next.jsでBASIC認証を導入する（ローカル,vercel 両対応）

_appではなく、Middlewareを利用する事で特定のフォルダのみBasic認証をかけるといった事が容易に出来るようになります！

下記のケースだとadmin/配下のみBasic認証をかける事が出来るようになります、便利ですね☺️

pages/
  index.tsx
  about.tsx
  admin/ #このフォルダ配下にはBasic認証がかかる
    index.tsx
    setting.tsx
    _middleware.ts #Basic認証を設定
    ・・・

検証した環境

nextjs

12.0.10

色々な使い方が出来るよ、という事で公式から参考のコードが公開されています

examples/edge-functions at main · vercel/examples

Next.js12にBasic認証を導入する

以下がBasic認証を行うための _middleware.ts の全文になります！

pages/_middleware.ts

import { NextRequest, NextResponse } from 'next/server'
 
export const middleware = (req: NextRequest) => {
  if (process.env.ENABLE_BASIC_AUTH !== 'true') {
    return NextResponse.next()
  }
 
  const basicAuth = req.headers.get('authorization')
 
  if (basicAuth) {
    const auth = basicAuth.split(' ')[1]
    const [user, password] = Buffer.from(auth, 'base64').toString().split(':')
 
    if (user === process.env.BASIC_AUTH_USER && password === process.env.BASIC_AUTH_PASSWORD) {
      return NextResponse.next()
    }
  }
 
  return new Response('Auth required', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  })
}

あとは .env と next.config.js に環境変数を読み込めるようにします

.env

ENABLE_BASIC_AUTH="false"
BASIC_AUTH_USER="user"
BASIC_AUTH_PASSWORD="password"

next.config.js

module.exports = {
  reactStrictMode: false,
  env: {
    ENABLE_BASIC_AUTH: process.env.ENABLE_BASIC_AUTH,
    BASIC_AUTH_USER: process.env.BASIC_AUTH_USER,
    BASIC_AUTH_PASSWORD: process.env.BASIC_AUTH_PASSWORD,
  },
}