Next.jsのミドルウェアの使い方の例 - omniSENSE

Next.js ミドルウェアとは

Next.js のミドルウェアは、リクエストとレスポンスのサイクルの間に実行されるカスタム関数です。これは、Express や Koa などの他の Node.js フレームワークで提供されるミドルウェア機能に似ています。ミドルウェアを使用することで、リクエストを検査、変更、またはリダイレクトすることができます。これにより、サーバーサイドロジックを簡単に実装できます。

Next.js のミドルウェアは、ページや API エンドポイントの前に実行されます。ミドルウェアは、pages/_middleware.js または pages/api/_middleware.js に配置することができます。前者はすべてのページと API ルートで実行され、後者は API ルートのみで実行されます。また、個別のページや API ルートに対してミドルウェアを実装することもできます。

Next.jsミドルウェアの使い方の代表例（コード付き）

Next.js ミドルウェアの使い方の代表例のサンプルコードを例示します。

認証

ミドルウェアを使用して、ページやAPIエンドポイントにアクセスする前にユーザーの認証状態をチェックできます。

ミドルウェア関数は、3つの引数を受け取ります:

req: リクエストオブジェクト (インスタンス: NextRequest)
res: レスポンスオブジェクト (インスタンス: NextResponse)
next: 次のミドルウェア関数またはページ/API ルートへの制御を渡すための関数

// pages/_middleware.js
import { getSession } from 'next-auth/client';

export async function middleware(req, res, next) {
  const session = await getSession({ req });

  if (!session) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  return next();
}

リダイレクト

特定の条件に基づいてリダイレクトを実行することができます。

// pages/_middleware.js
export function middleware(req, res, next) {
  if (req.url === '/old-path') {
    return res.redirect(301, '/new-path');
  }

  return next();
}

ロギング

ミドルウェアを使用して、リクエストに関する情報をロギングできます。

// pages/_middleware.js
export function middleware(req, res, next) {
  console.log(`Request URL: ${req.url}`);
  console.log(`Request method: ${req.method}`);
  console.log(`Request headers: ${JSON.stringify(req.headers)}`);

  return next();
}

CORSヘッダーの追加

CORSヘッダーを追加して、クロスオリジンリソース共有を許可できます。

// pages/_middleware.js
export function middleware(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  return next();
}