【Next.js】Not Foundページを表示する方法

ページを作成する

page.tsxを以下のように作成します。

page.tsx

async function getData() {
  const res = await fetch('https://api.example.com/...')

  return res.json()
}
 
export default async function Page() {
  const data = await getData()
  if (!data) {
    notFound()
  }
 
  return <main></main>
}

Not Found画面を作成する

pages.tsxと同じ階層にnot-found.tsxを作成します。

not-found.tsx

import { useEffect } from 'react'
 
export default function NotFound() {
  return (
    <div>
      <h2>ページが見つかりませんでした。</h2>
    </div>
  )
}

上記のように記述するとpage.tsxのnotFound()が実行されるとnot-found.tsxが表示されるようになります。