如何避免Next.js为/pages文件夹内的.js/jsx/tsx文件创建路由？

直接移除默认导出会导致访问对应路由时崩溃，因为Next.js默认会把/pages下的所有.js/jsx/tsx文件当作路由页面，要求必须导出React组件作为页面内容。下面是几种靠谱的解决方法：

• 使用下划线前缀的文件夹存放组件
  在/pages下创建以下划线开头的子文件夹，比如pages/_shared/或者pages/_components/，把需要复用的组件放在这里。Next.js会自动忽略下划线开头的文件夹，不会为其中的文件生成路由。你可以正常导出组件，在其他页面中导入使用，完全不影响。

• 给组件文件名加下划线前缀
  如果不想新建文件夹，直接给组件文件名加上下划线前缀，比如pages/_Navbar.tsx。Next.js同样会跳过这类文件的路由生成，不会把它当作可访问的页面。

• 配置pageExtensions指定页面文件后缀
  在项目根目录的next.config.js里修改pageExtensions配置，只把特定后缀的文件识别为路由页面。比如只允许.page.js/.page.tsx作为页面文件：

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

  之后你的路由页面命名为home.page.tsx、about.page.jsx，普通组件用Sidebar.tsx这类命名放在/pages里，就不会被生成路由了。

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