この短い記事では、nextjs を使用してミドルウェアを構築する方法について書きます。

私は最近、nextjs を使用して本格的なバックエンド サービスを構築しましたが、nextjs の進歩に本当に驚かされました。

この記事を読むには、JavaScript と Nodejs の基本的な知識が必要です。

始めるには、

1.以下のコマンドを使用してターミナルから nextjs プロジェクトを作成します

npx create-next-app@latest

このコマンドを実行すると、プロジェクトを構成するためのプロンプトが表示されます。

プロジェクト作成後、

2.ターミナルで npm install を実行して、必要な依存関係をインストールします

認証用のパッケージ ライブラリは 1 つだけインストールします。これは jose ですが、代わりに jsonwebtoken をインストールすることもできます。ただし、nextjs ミドルウェアはブラウザ上で実行されるため、エッジ ランタイムは多数の機能を実装しません。 Node.js API

3.以下のコマンドを使用して開発モードでプロジェクトを開始します
npm run dev

4. middleware.js ファイルを作成する
プロジェクトのルートに middleware.js ファイルを作成します。/src ディレクトリを使用している場合は、/src ディレクトリ内にファイルを作成します

5.ファイルからミドルウェア関数をエクスポート

// /middleware.js

export const middleware = async (req) => {
   try {
   } catch(error){
   console.log(error)
   }
}

6.リクエストヘッダーからトークンを抽出

// /middleware.js

import { NextResponse } from 'next/server'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
   } catch(error){
   console.log(error)
   }
}

7. jose
を使用してトークンを検証します。

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

// your encoded data will be inside the payload object.

   } catch(error){
   console.log(error)
   }
}

8.検証済みトークンからデータを抽出しリクエストヘッダーに設定

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)
   } catch(error){
   console.log(error)
   }
}

9. next() 関数を呼び出し、更新されたリクエスト ヘッダーを渡します

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)

    return NextResponse.next({
               request: {
                headers: requestHeaders
               } 
    })
   } catch(error){
   console.log(error)
   }
}

10.最後に、保護するルートに関する構成が含まれるミドルウェア ファイルから構成オブジェクトをエクスポートする必要があります。

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const config = {
  matcher:[
   // contain list of routes you want to protect, e.g /api/users/:path*
]
}

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)

    return NextResponse.next({
               request: {
                headers: requestHeaders
               } 
    })
   } catch(error){
   console.log(error)
   }
}

この 10 のステップがお役に立てば幸いです。コメント セクションでこの方法についてのご意見をお聞かせください。また、これを達成するためのより良い方法があればお気軽に共有してください。

ありがとう。