introduction

意在像@next/mdx 模块类似, 例如它支持了让页面能够以<font style="color:rgb(17, 17, 17);">.mdx</font>结尾,你可以配置这些扩展(为了在解析页面时在<font style="color:rgb(17, 17, 17);">pages</font>目录中查找提供解决方案) ..

打开<font style="color:rgb(17, 17, 17);">next.config.js</font>,并增加<font style="color:rgb(17, 17, 17);">pageExtensions</font>配置 
  1. module.exports = {
  2.   pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
  3. }

注意到: pageExtensions的默认值为['tsx','ts','jsx','js']

同样配置这个属性会影响_document.js,_app.js,middleware.js以及在pages/api/下的文件 …

例如: 设置pageExtensions: ['page.tsx','page.ts']意味着以下文件_document.tsx,_app.tsx,middleware.ts,pages/users.tsx,pages/api/users.ts将能够重命名为_document.page.tsx,_app.page.tsx,middleware.page.tsx,pages/users.page.tsx以及 pages/api/users.page.ts

在pages目录中包含非页面文件

为了在pages目录中统一定位由组件使用的测试文件、生成的文件、或者其他文件,你可以前缀扩展,类似于页面的 ..

打开next.config.js,增加pageExtensions配置

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

然后重命名你的页面去包含一个文件扩展(让它包含.page) ..,例如重命名MyPage.tsx到MyPage.page.tsx)

注意到: 确保你重命名了_document.js,_app.js,middleware.js,以及在pages/api/的文件 ..

没有这个配置,Next.js 仅仅假设在pages目录中的tsx/ts/jsx/js文件是一个页面或者API 路由,并且也许会意外暴露容易收到拒绝服务攻击路由或者抛出一个错误(类似于在构建生产打包过程中):

  1. Build error occurred
  2. Error: Build optimization failed: found pages without a React Component as default export in
  3. pages/MyPage.generated
  4. pages/MyPage.test
  6. See https://nextjs.org/docs/messages/page-without-valid-component for more info.