next-on-pagesでのビルドでerror _not_foundが出たら読む記事
Next.jsのページをCloudflareにデプロイする際にビルドエラーが発生しました。”not-found”エラーの対処法として、”app/not-found.tsx”に”export const runtime = ‘edge’;”を追加する必要があります。これによってCloudflare上で正しく動作することが確認できます。ビルドエラーの原因はデフォルトのNot Foundページが”export const runtime = ‘edge’;”を持っていないことにあるようです。
広告ここから
広告ここまで
目次
next-on-pagesを使ってNext.jsをCloudflareにデプロイする方法を調べたり試したりしています。その中でビルドエラーに遭遇したので、内容と対処法を簡単にまとめました。
ビルド時にnot-foundのエラーがでることがある
デフォルト状態からすこし手を入れた状態の時、Cloudflare上での動作を確認するためにビルドとデプロイを試みました。その際、以下のエラーが発生してビルドに失敗する現象がおきました。
⚡️ Warning: your app/not-found route might contain runtime logic, this is currently
⚡️ not supported by @cloudflare/next-on-pages, if that's actually the case please
⚡️ remove the runtime logic from your not-found route
⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️
⚡️ The following routes were not configured to run with the Edge Runtime:
⚡️ - /_not-found
⚡️
⚡️ Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️ export const runtime = 'edge';
⚡️
⚡️ You can read more about the Edge Runtime on the Next.js documentation:
⚡️ https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.not-found.tsxを追加して、ページが見つからない時に表示するコンテンツを用意する
エラーメッセージに書かれていますが、対処法はシンプルでapp/not-found.tsxを追加するだけです。
import Link from 'next/link'
export const runtime = 'edge';
export default function NotFound() {
return (
<div>
<h2>Not Found</h2>
<p>Could not find requested resource</p>
<Link href="/">Return Home</Link>
</div>
)
}
エラーメッセージを読んだ理解としては、デフォルトのNot Foundページがexport const runtime = 'edge';を持たないのが原因じゃないかと思います。なのでページコンポーネントの中身や実装というよりは、この１行さえ追加できていればOKという考え方でよいかなと思います。