🚀

【Next.js和訳】API Ref/next.config.js/Custom Page Extensions

2021/10/03に公開約1,900字

この記事について

この記事は、next.config.js/Custom Page Extensionsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Custom Page Extensions

.mdxで終わるページのサポートを追加する@next/mdxのようなモジュールを対象としています。ページを解決するときにpagesディレクトリで探す拡張子を設定することができます。

next.config.jsを開き、pageExtensionsの設定を追加します。

module.exports = {
  pageExtensions: ["mdx", "md", "jsx", "js", "tsx", "ts"],
}

ページ以外のファイルをpagesディレクトリに含める

テストファイルや生成ファイルなど、コンポーネントが使用するファイルをpagesディレクトリに配置するには、extensions の前にpageのようなものを付けます。

next.config.jsを開き、pageExtensionsという設定を追加します。

module.exports = {
  pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
}

その後、ページの名前を変更し、拡張子に.pageが含まれるようにします(例:MyPage.tsxMyPage.page.tsxに変更)。

この設定を行わないと、Next.js はpagesディレクトリ内のすべての tsx/ts/jsx/js ファイルをページや API ルートとみなし、サービス拒否の攻撃を受けやすい意図しないルートを公開してしまったり、本番バンドルのビルド時に以下のようなエラーが発生したりする可能性があります。

Build error occurred
Error: Build optimization failed: found pages without a React Component as default export in
pages/MyPage.generated
pages/MyPage.test

See https://nextjs.org/docs/messages/page-without-valid-component for more info.

関連

https://nextjs.org/docs/api-reference/next.config.js/introduction

Discussion

ログインするとコメントできます