Menu

forbidden

forbidden関数はNext.js 403エラーページをレンダリングするエラーをスローします。アプリケーション内の認可エラーを処理するのに便利です。forbidden.jsファイルを使用してUIをカスタマイズできます。

forbiddenの使用を開始するには、next.config.jsファイルで実験的なauthInterrupts設定オプションを有効にしてください。

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

forbiddenはServer Components、Server Actions、およびRoute Handlersで呼び出すことができます。

app/auth/page.tsx
TypeScript
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // ユーザーが「admin」ロールを持っているかを確認
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 認可されたユーザー向けに管理ページをレンダリング
  return <></>
}

補足

例

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

forbiddenを使用して、ユーザーロールに基づいて特定のルートへのアクセスを制限できます。認証済みだが必要な権限を持たないユーザーがそのルートにアクセスできないようにします。

app/admin/page.tsx
TypeScript
import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // ユーザーが「admin」ロールを持っているかを確認
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 認可されたユーザー向けに管理ページをレンダリング
  return (
    <main>
      <h1>Admin Dashboard</h1>
      <p>Welcome, {session.user.name}!</p>
    </main>
  )
}

Server Actionsでのミューテーション

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

app/actions/update-role.ts
TypeScript
'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()
 
  // 管理者のみがロールを更新できるようにする
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // 認可されたユーザー向けにロール更新を実行
  // ...
}

バージョン履歴

バージョン変更内容
v15.1.0導入時期：forbidden

下一步

forbidden.js

forbidden.js特殊ファイルのAPIリファレンス。