【Next.js】Middlewareで実現する認証と動的ルーティング

「またサーバーサイドの処理で悩んでいるの？」そんな声が聞こえてきそうです。Next.jsを使ってウェブアプリケーションを開発していると、認証やルーティングの実装に頭を悩ませることがありますよね。特に、パフォーマンスを維持しながら柔軟な機能を実現することは、開発者にとって大きな課題です。

しかし、ご安心ください。Next.jsのMiddlewareを活用すれば、これらの問題を効果的に解決できるのです。本記事では、Middlewareを使って認証とルーティングを最適化し、アプリケーションの品質を大幅に向上させる方法を詳しく解説します。

この記事を読めば、あなたのNext.jsアプリケーションは新たな次元に到達するでしょう。パフォーマンスと柔軟性を両立させ、ユーザー体験を劇的に改善する - そんな魔法のような力をMiddlewareが秘めているのです。

では、Next.jsのMiddlewareの世界に飛び込んでみましょう。この記事を最後まで読めば、あなたのアプリケーション開発スキルは確実にレベルアップします。さあ、一緒に学んでいきましょう！

Middlewareとは？Next.jsにおける重要性
Middlewareの基本構造
認証の実装
動的ルーティングの実装
パフォーマンス最適化
セキュリティ強化
実践的なユースケース
Middlewareのベストプラクティス
まとめ
参考リンク

Middlewareとは？Next.jsにおける重要性

Next.jsのMiddlewareは、リクエストが処理される前に実行されるコードです。これにより、レスポンスを返す前にリクエストを検査し、必要に応じて修正や変更を加えることができます。Middlewareは、アプリケーション全体またはサブパスに適用でき、認証、ログ記録、リダイレクト、ヘッダーの変更など、様々な用途に活用できます。

Middlewareが重要な理由は以下の通りです：

柔軟性: リクエスト処理の流れをカスタマイズできる
パフォーマンス: サーバーサイドで軽量な処理を実行できる
セキュリティ: リクエストレベルでのセキュリティチェックが可能
動的ルーティング: URLに基づいて動的にコンテンツを制御できる
コード分離: ルーティングロジックを集中管理できる

これらの特性により、Middlewareは次世代のウェブアプリケーション開発において不可欠な要素となっています。

Middlewareの基本構造

Next.jsのMiddlewareは、プロジェクトのルートディレクトリに middleware.ts (または middleware.js) ファイルを作成することで実装します。基本的な構造は以下のようになります：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // ここにミドルウェアのロジックを記述
  return NextResponse.next()
}

export const config = {
  matcher: '/api/:path*',
}

この例では、/api/ で始まるすべてのパスに対してMiddlewareが適用されます。matcher を使用することで、Middlewareを適用するパスを細かく制御できます。

認証の実装

Middlewareを使用して認証を実装する方法を見ていきましょう。ここでは、JWTを使用した簡単な認証システムを例に説明します。

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { verify } from 'jsonwebtoken'

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')

  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  try {
    verify(token, process.env.JWT_SECRET)
    return NextResponse.next()
  } catch (error) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

export const config = {
  matcher: '/protected/:path*',
}

この例では、/protected/ で始まるすべてのパスに対して認証チェックを行います。認証トークンが存在しない場合や無効な場合は、ログインページにリダイレクトします。

動的ルーティングの実装

Middlewareを使用して動的ルーティングを実装する方法を見ていきましょう。ここでは、ユーザーの言語設定に基づいてコンテンツを提供する例を示します。

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const LOCALES = ['en', 'ja', 'fr', 'de']

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

  const pathnameHasLocale = LOCALES.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )

  if (pathnameHasLocale) return

  const locale = request.cookies.get('NEXT_LOCALE')?.value || 'en'

  request.nextUrl.pathname = `/${locale}${pathname}`
  return NextResponse.redirect(request.nextUrl)
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

この例では、URLに言語コードが含まれていない場合、ユーザーの設定（またはデフォルト）の言語コードを追加してリダイレクトします。これにより、同じコンテンツを異なる言語で提供することができます。

パフォーマンス最適化

Middlewareを使用してパフォーマンスを最適化する方法をいくつか紹介します。

キャッシュ制御

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // 静的アセットに対してキャッシュヘッダーを設定
  if (request.nextUrl.pathname.startsWith('/static/')) {
    response.headers.set('Cache-Control', 'public, max-age=31536000, immutable')
  }

  return response
}

この例では、静的アセットに対して長期のキャッシュを設定しています。これにより、リピートユーザーの読み込み時間を大幅に短縮できます。

条件付きプリフェッチ

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // モバイルユーザーに対してはプリフェッチを無効化
  if (request.headers.get('user-agent')?.includes('Mobile')) {
    response.headers.set('X-Next-Prefetch', '0')
  }

  return response
}

この例では、モバイルユーザーに対してプリフェッチを無効化しています。これにより、モバイル回線での不要なデータ転送を防ぎ、パフォーマンスを向上させることができます。

セキュリティ強化

Middlewareを使用してアプリケーションのセキュリティを強化する方法をいくつか紹介します。

CORS設定

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // CORSヘッダーを設定
  response.headers.set('Access-Control-Allow-Origin', 'https://example.com')
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization')

  return response
}

export const config = {
  matcher: '/api/:path*',
}

この例では、APIルートに対してCORS（Cross-Origin Resource Sharing）の設定を行っています。これにより、許可されたオリジンからのリクエストのみを受け付けるようになり、セキュリティが向上します。

レート制限

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { Redis } from '@upstash/redis'

const redis = new Redis({
  url: process.env.REDIS_URL,
  token: process.env.REDIS_TOKEN,
})

export async function middleware(request: NextRequest) {
  const ip = request.ip ?? '127.0.0.1'
  const limit = 10 // 1分間に許可するリクエスト数
  const window = 60 // ウィンドウサイズ（秒）

  const currentCount = await redis.incr(ip)
  await redis.expire(ip, window)

  if (currentCount > limit) {
    return new NextResponse('Too Many Requests', { status: 429 })
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/api/:path*',
}

この例では、Redis（分散型キャッシュシステム）を使用してIP別のリクエスト数を追跡し、レート制限を実装しています。これにより、DDoS攻撃やAPIの乱用を防ぐことができます。

実践的なユースケース

ここまでMiddlewareの基本的な使い方を見てきましたが、実際のプロジェクトではどのように活用できるでしょうか？いくつかの実践的なユースケースを紹介します。

A/Bテスティング

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // ユーザーをランダムにグループAまたはBに割り当てる
  const group = Math.random() < 0.5 ? 'A' : 'B'
  response.cookies.set('ab-test-group', group)

  return response
}

この例では、ユーザーをランダムにグループAまたはBに割り当てています。これを基に、フロントエンドで異なるバージョンのUIを表示することができます。

地理位置情報に基づくコンテンツ制御

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const country = request.geo?.country ?? 'US'

  if (country === 'JP' && !request.nextUrl.pathname.startsWith('/jp')) {
    return NextResponse.redirect(new URL('/jp' + request.nextUrl.pathname, request.url))
  }

  return NextResponse.next()
}

この例では、ユーザーの地理位置情報に基づいて適切なバージョンのサイトにリダイレクトしています。これにより、ユーザーの所在地に応じたコンテンツやサービスを提供することができます。

カスタムログ記録

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // リクエスト情報をログに記録
  console.log(`[${new Date().toISOString()}] ${request.method} ${request.url} - ${request.ip}`)

  return response
}

この例では、すべてのリクエストに対して基本的な情報をログに記録しています。これにより、アプリケーションの利用状況を詳細に分析することができます。

Middlewareのベストプラクティス

Middlewareを効果的に使用するためのベストプラクティスをいくつか紹介します。

軽量な処理に留める

Middlewareはすべてのリクエストに対して実行されるため、重い処理を行うと全体のパフォーマンスに影響を与える可能性があります。可能な限り軽量な処理に留め、複雑な処理は別のレイヤーに移動させましょう。

// 良い例
export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')
  if (!token) return NextResponse.redirect(new URL('/login', request.url))
  return NextResponse.next()
}

// 避けるべき例
export async function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')
  if (!token) return NextResponse.redirect(new URL('/login', request.url))

  // トークンの検証を行う（これは重い処理になる可能性があります）
  const user = await validateToken(token)
  if (!user) return NextResponse.redirect(new URL('/login', request.url))

  return NextResponse.next()
}

適切なmatcherの使用

すべてのルートに対してMiddlewareを実行する必要はありません。matcherを使用して、必要なパスにのみMiddlewareを適用しましょう。

export const config = {
  matcher: ['/api/:path*', '/dashboard/:path*'],
}

エラーハンドリング

Middlewareでエラーが発生した場合、適切に処理することが重要です。エラーをキャッチし、ユーザーフレンドリーなレスポンスを返すようにしましょう。

export function middleware(request: NextRequest) {
  try {
    // ミドルウェアの処理
    return NextResponse.next()
  } catch (error) {
    console.error('Middleware error:', error)
    return NextResponse.error()
  }
}

環境変数の利用

セキュリティに関わる情報や環境ごとに異なる設定は、環境変数を使用して管理しましょう。

export function middleware(request: NextRequest) {
  const apiKey = process.env.API_KEY
  if (!apiKey) {
    console.error('API key is not set')
    return NextResponse.error()
  }

  // APIキーを使用した処理
  return NextResponse.next()
}

テストの実施

Middlewareはアプリケーション全体に影響を与える可能性があるため、十分なテストを行うことが重要です。ユニットテストや統合テストを実施し、期待通りの動作をすることを確認しましょう。

import { createMocks } from 'node-mocks-http'
import { middleware } from './middleware'

describe('Middleware', () => {
  test('redirects to login page when no token is present', async () => {
    const { req, res } = createMocks({
      method: 'GET',
      url: '/dashboard',
    })

    await middleware(req)

    expect(res._getStatusCode()).toBe(307)
    expect(res._getRedirectUrl()).toBe('/login')
  })
})

まとめ

Next.jsのMiddlewareは、アプリケーションの認証、ルーティング、パフォーマンス最適化、セキュリティ強化など、様々な側面で強力なツールとなります。適切に使用することで、以下のような利点が得られます：

柔軟なリクエスト処理: リクエストの内容に応じて動的に処理を変更できます。
パフォーマンスの向上: サーバーサイドでの軽量な処理により、全体的なレスポンス時間を短縮できます。
セキュリティの強化: リクエストレベルでのチェックにより、アプリケーションのセキュリティを向上させることができます。
コードの集中管理: ルーティングや認証のロジックを一箇所にまとめることができ、保守性が向上します。
ユーザー体験の最適化: ユーザーの状況に応じたコンテンツの提供や、A/Bテストの実施が容易になります。

しかし、Middlewareの使用には注意点もあります。重い処理を行うと全体のパフォーマンスに影響を与える可能性があるため、軽量な処理に留めることが重要です。また、適切なエラーハンドリングとテストの実施も忘れずに行いましょう。

Next.jsのMiddlewareを活用することで、より高度で柔軟なウェブアプリケーションの開発が可能になります。本記事で紹介した技術や事例を参考に、あなたのプロジェクトにMiddlewareを導入してみてはいかがでしょうか。きっと、新たな可能性が広がるはずです。

参考リンク

これらのリソースを参考にすることで、Next.jsのMiddlewareについてさらに理解を深めることができます。常に最新の情報をチェックし、ベストプラクティスを取り入れることで、より効果的なMiddlewareの実装が可能になるでしょう。