Next.js 13中如何创建包含下划线的路由？

方法1：动态路由 + 重写规则（推荐） #

这是适配Next.js 13+ App Router和Pages Router的通用方案：

1. 在app/shop目录下创建动态路由文件夹[slug]，并在其中创建page.js（App Router）或index.js（Pages Router），用于渲染对应页面内容。
2. 在项目根目录的next.config.js中添加重写规则，将下划线开头的请求转发到动态路由：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/shop/_t-shirt',
        destination: '/shop/t-shirt', // 对应动态路由[slug]的参数为t-shirt
      },
      // 如需添加多个下划线路由，继续追加规则即可
      {
        source: '/shop/_hoodie',
        destination: '/shop/hoodie',
      }
    ]
  },
}

module.exports = nextConfig

3. 在动态路由的页面组件中，通过params.slug（App Router）或useRouter().query.slug（Pages Router）获取参数，匹配并渲染对应内容。

方法2：自定义服务器（适用于Next.js 12及更早版本） #

如果需要更灵活的路由控制，可以使用自定义服务器（如Express）直接映射路由：

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  // 映射下划线开头的路由到目标页面
  server.get('/shop/_t-shirt', (req, res) => {
    return app.render(req, res, '/shop/t-shirt', req.query)
  })

  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

注意：Next.js 13+ App Router对自定义服务器支持有限，优先使用方法1。

关键说明 #

Next.js规定下划线开头的文件夹为私有文件夹，不会被解析为公开路由，也无法被客户端代码导入，因此不能直接通过创建_t-shirt文件夹实现需求。上述方案通过路由转发，既保留了下划线开头的URL，又规避了框架的私有文件夹限制。

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