Nextjsでミドルウェアを扱った話

そもそもミドルウェアとは？

Webにおけるミドルウェアは、クライアント（通常はWebブラウザ）からのリクエストを受け取り、最終的なレスポンスを返すまでの間に実行されるソフトウェアコンポーネントのこと。

ちょうど、リクエストとアプリケーションの間、あるいはアプリケーションとデータベースの間などに位置し、様々な処理を仲介する役割を果たします。

Nextjsのmiddlewareは、リクエストとアプリケーションの間の処理を実装できます。

Nextjs middleware ドキュメント

https://nextjs.org/docs/app/building-your-application/routing/middleware

Nextjsミドルウェア実装の基本

[middleware.ts]を以下のディレクトリに配置
Page Router →　pagesフォルダと同じ階層
App Router →　appフォルダと同じ階層

middleware.ts

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// ミドルウェアで行いたい処理を記載
// 非同期処理も可能
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// ここで上記処理の対象となるパスを指定
export const config = {
　// matcherはString、またはString[]で指定できる
　// pathの指定は正規表現
  matcher: '/about/:path*',
  // matcher: ['/about/:path*', '/dashboard/:path*']
}

Nextjsミドルウェアでできること

• ユーザー認証、ベーシック認証
• サーバーサイドリダイレクト
• アクセスログ、分析

などなどいろいろできる！