forbidden

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

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

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
}

export default nextConfig

module.exports = {
  experimental: {
    authInterrupts: true,
  },
}

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

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 <></>
}

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 関数はルートレイアウトでは呼び出すことができません。

使用例

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

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

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>管理者ダッシュボード</h1>
      <p>ようこそ、{session.user.name}さん！</p>
    </main>
  )
}

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>管理者ダッシュボード</h1>
      <p>ようこそ、{session.user.name}さん！</p>
    </main>
  )
}

サーバーアクションでの変更処理

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

'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()
  }

  // 認可されたユーザーのロール更新を実行
  // ...
}

'use server'

import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
import db from '@/app/lib/db'

export async function updateRole(formData) {
  const session = await verifySession()

  // 管理者のみがロールを更新できるようにする
  if (session.role !== 'admin') {
    forbidden()
  }

  // 認可されたユーザーのロール更新を実行
  // ...
}

バージョン履歴

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

forbidden.js

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

知っておくと便利

使用例

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

サーバーアクションでの変更処理

バージョン履歴

forbidden.js

On this page