コンテンツへスキップ

forbidden

この機能は現在実験的であり、変更される可能性があります。本番環境での使用は推奨されません。GitHub でお試しいただき、フィードバックを共有してください。

forbidden 関数は、Next.js の 403 エラーページを表示するエラーをスローします。これは、アプリケーションでの認証エラーを処理するのに役立ちます。forbidden.js ファイルを使用して UI をカスタマイズできます。

forbidden を使用するには、next.config.js ファイルで実験的な authInterrupts 設定オプションを有効にする必要があります。

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
}
 
export default nextConfig

forbidden は、サーバーコンポーネントサーバーアクションルートハンドラーで呼び出すことができます。

app/auth/page.tsx
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // Check if the user has the 'admin' role
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // Render the admin page for authorized users
  return <></>
}

知っておくと良いこと

ロールベースのルート保護

forbidden を使用すると、ユーザーロールに基づいて特定のルートへのアクセスを制限できます。これにより、認証済みであっても必要な権限がないユーザーはルートにアクセスできなくなります。

app/admin/page.tsx
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // Check if the user has the 'admin' role
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // Render the admin page for authorized users
  return (
    <main>
      <h1>Admin Dashboard</h1>
      <p>Welcome, {session.user.name}!</p>
    </main>
  )
}

サーバーアクションによるミューテーション

サーバーアクションでミューテーションを実装する際、forbidden を使用して、特定のロールを持つユーザーのみが機密データを更新できるようにすることができます。

app/actions/update-role.ts
'use server'
 
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
import db from '@/app/lib/db'
 
export async function updateRole(formData: FormData) {
  const session = await verifySession()
 
  // Ensure only admins can update roles
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // Perform the role update for authorized users
  // ...
}

バージョン履歴

バージョン変更点
v15.1.0forbidden が導入されました。