如何在Next.js单个页面中将trailingSlash设置为false（禁用尾斜杠）？

嘿，作为Next.js新手碰到这个问题很正常，毕竟全局配置和单页面自定义的逻辑确实容易搞混。下面分两种主流的路由场景，给你详细说下怎么单独给某个页面禁用trailingSlash（也就是设为false）：

如果你用的是传统的pages目录路由，有两种方式可以实现单页面的trailingSlash自定义：

• 静态导出项目（使用next export）：在next.config.js里通过exportPathMap来指定单个页面的路径规则，覆盖全局设置。比如全局默认加斜杠，但要让/about页面不加：

module.exports = {
  trailingSlash: true, // 全局默认开启末尾斜杠
  exportPathMap: async function () {
    return {
      '/': { page: '/' },
      '/about': { page: '/about', trailingSlash: false }, // 这个页面单独禁用
      '/contact': { page: '/contact' }, // 继承全局配置
    };
  },
};

• 服务端渲染/静态生成的页面：直接在页面的getStaticProps或getServerSideProps函数里返回trailingSlash: false，就能单独给这个页面生效：

// pages/about.js
export async function getStaticProps() {
  // 这里写你的数据获取逻辑
  return {
    props: {}, // 页面需要的 props
    trailingSlash: false, // 禁用该页面的末尾斜杠
  };
}

export default function About() {
  return <div>About Page</div>;
}

如果是用新版的app目录路由，Next.js 13.4+支持在单个路由目录下创建route.config.js文件来配置，非常直观：

1. 找到你要设置的页面所在的路由目录，比如app/about（对应/about页面）
2. 在该目录下新建route.config.js，写入如下内容：

export const config = {
  trailingSlash: false,
};

这样这个路由就会强制禁用末尾斜杠，不管next.config.js里的全局配置是什么。如果是动态路由（比如app/post/[id]），同样可以在对应的动态路由目录下创建这个文件来生效。

小提醒 #

• 修改配置后记得重启开发服务器，或者清除Next.js的缓存（可以删除.next目录），避免旧配置生效
• 如果全局trailingSlash设置和单个页面的配置冲突，单个页面的配置会优先覆盖全局

如果还有其他场景或者版本适配的问题，随时再问～

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