Nextjs を使用したミドルウェアの構築

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

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

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

始めるには、次のことを行う必要があります

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

npx create-next-app@latest

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

プロジェクトを作成した後、

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

認証用に jose というパッケージ ライブラリを 1 つだけインストールします。代わりに 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 のステップがお役に立てば幸いです。この方法についてのご意見をコメント セクションでお知らせください。また、これを達成するためのより良い方法があればお気軽に共有してください。

ありがとうございます。

以上がNextjs を使用したミドルウェアの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。