Next.jsのmiddlewareを使ってbasic認証を実装する

こんにちは、フロントエンドエンジニアの髙橋です。

先日Next.js ConfでNext.js 12は発表されましたね！

色々な新機能が追加されましたが、新機能のMiddlewareが気になって試してみたのでその使い方などを書いてみようと思います。

middlewareとは？

公式には以下のように書かれております！

Middleware enables you to use code over configuration. This gives you full flexibility in Next.js because you can run code before a request is completed.

リクエスト完了前に特定のコードを実行できる機能のようです。

*公式ドキュメントはこちら

例えば、こういった場合↓に使用することができるそうです。 f:id:sotq17:20211105150022p:plain

何を試したか

今回は1番に例に上がっているAuthentication（認証）を試してみました。具体的に言えば、Basic認証をNext.jsにつける、という作業です。

f:id:sotq17:20211105152843g:plain

Next.jsで作ったサイトをVercelにあげる場合、コンテンツに制限をかけることは通常有料となってしまいます。

ライブラリを導入して、Basic認証をつけることも可能なようですが、公式の機能でできればそれが一番なのでは無いかと思っております！

そんなわけで、早速試してみたいと思います！

実装

プロジェクト/ファイル作成

npx create-next-app@latest --ts

create-next-appで雛形を作ったあと…

f:id:sotq17:20211105153303p:plain

pages/_middleware.tsを作成します。こちらがmiddlewareを扱うファイルとなります。

認証処理を書いていく

早速ですが、以下のコードを貼り付けるだけでOKです！（解説はコード内に記載します）

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

export const middleware = (req: NextRequest) => {
  const basicAuth = req.headers.get('authorization')
  //HeaderにAuthorizationが定義されているかをチェック
  if (basicAuth) {
    const auth = basicAuth.split(' ')[1]
    const [user, pwd] = Buffer.from(auth, 'base64').toString().split(':')

    // basic認証のUser/Passが、envファイルにある値と同じかをチェック
    if (user ===  process.env.NEXT_PUBLIC_USER && pwd === process.env.NEXT_PUBLIC_PASS) {
      return NextResponse.next()
    }
  }

  // 同じでなければエラーを返す
  return new Response('Auth required', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  })
}

// .env.local
NEXT_PUBLIC_USER=XXXXX
NEXT_PUBLIC_PASS=XXXXX

これでローカルを立ち上げればBasic認証がかかるはずです！

公開する

当たり前ではありますが、Vercel上にenvファイルは置けないので環境変数を設定します。

以下の通りに設定すればlocal同様にBasic認証がかかります。

f:id:sotq17:20211105154918p:plain

まとめ

実際に作ってみて、想像の何倍も簡単に実装することができたと思っています。

相変わらずのVercel依存はありますが、ここまで便利になるなら使わない手はないのでは？と最近考えるようになりました。

ちなみにこちらがサンプルのGitHubです！

Next.js 12ではmiddlewareの他にすごい機能がたくさんあります。（SWCめっちゃ早いです…！）

気になる方は他の機能もチェックしてみてはいかがでしょうか。

最後に

Wizではエンジニアとして一緒に働く仲間を絶賛募集しております。

ご興味のある方、是非ご覧下さい..！！

careers.012grp.co.jp

Wiz テックブログ

Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。