Next.js v13.4.9 で 404ページ をカスタマイズして任意のページにする

結論

環境によって適宜読み替えてください。

1. app/404/page.tsx を作る

 import { notFound } from 'next/navigation'
 
 export default function NotFoundPage() {
   return notFound()
 }

2. app/not-found.tsx を作る

// このファイルが表示させたい内容です
const Hoge = () => {
  return (
    <div>
      hoge
    </div>
  )
}

export default Hoge

3. （参考）next/image を用いる場合SSG の場合は next.config.js に以下を書き加える

$ yarn dev するときに怒られます。

const nextConfig = {
  images: {
    unoptimized: true,
  },
}

所感

アップルーター難しすぎ。