如何为App Router与Pages Router设置不同页面扩展名？

Next.js本身不支持直接通过扩展名让不同路由系统加载对应文件，但可以通过目录结构+配置约定实现你要的效果：

• 配置Pages Router仅识别.page.tsx后缀
  在项目根目录的next.config.js中，通过pageExtensions指定Pages Router的页面文件扩展名：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
  }
  
  module.exports = nextConfig
  

  配置后，pages/目录下只有后缀为.page.tsx（及上述其他指定后缀）的文件会被Pages Router解析为页面。

• App Router使用默认.tsx后缀
  App Router默认会识别app/目录下的.tsx、.ts等文件作为页面或组件，无需额外配置。只要将对应文件放在app/目录下，使用.tsx后缀即可由App Router加载。

注意事项 #

• 两个路由系统的核心区分是目录结构，扩展名配置只是筛选当前目录下的有效页面文件。比如app/目录下的.page.tsx文件依然会被App Router处理，pages/下的.tsx文件如果不在pageExtensions列表中，不会被Pages Router加载。
• 确保你的Next.js版本为13+，该版本支持同时启用App Router和Pages Router（混合路由），只要项目中同时存在app/和pages/目录即可。

内容的提问来源于stack exchange，提问作者Timothy Oliver