pageExtensions

您可以擴展 Next.js 使用的預設頁面副檔名 (.tsx、.ts、.jsx、.js)。在 next.config.js 中新增 pageExtensions 設定：

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

變更這些值會影響 所有 Next.js 頁面，包括以下檔案：

• middleware.js
• instrumentation.js
• pages/_document.js
• pages/_app.js
• pages/api/

例如，如果您將 .ts 頁面副檔名重新設定為 .page.ts，則需要將 middleware.page.ts、instrumentation.page.ts、_app.page.ts 等頁面重新命名。

在 pages 目錄中包含非頁面檔案

您可以將測試檔案或元件使用的其他檔案與頁面存放在同一個 pages 目錄中。在 next.config.js 中新增 pageExtensions 設定：

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

然後，將您的頁面重新命名為包含 .page 的副檔名（例如將 MyPage.tsx 重新命名為 MyPage.page.tsx）。請確保重新命名 所有 Next.js 頁面，包括上述提到的檔案。