Nextjs を使用したミドルウェアの構築-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-08-13 07:00:02

オリジナル

1124 人が閲覧しました

Building a middleware with 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 サイトの他の関連記事を参照してください。