NextJS 12动态路由生成：如何关联对象路径与pages页面？

一、直接匹配pages目录结构（无需as属性） #

如果你的路由对象里的path和pages文件夹内的页面文件路径完全一致，直接用Link组件的href属性关联即可，这是最稳妥的方式，不会出现刷新404的问题。

假设你的pages文件夹结构如下：

pages/
  about.js
  profile.js
  users.js

渲染导航的代码可以这么写：

import Link from 'next/link';

const navItems = [
    { name: 'About', path: '/about' },
    { name: 'Profile', path: '/profile' },
    { name: 'Users', path: '/users' }
];

export default function Nav() {
  return (
    <nav>
      {navItems.map(item => (
        <Link key={item.path} href={item.path}>
          <a>{item.name}</a>
        </Link>
      ))}
    </nav>
  );
}

这种方式下，Next.js会自动根据pages目录生成路由规则，不管客户端导航还是页面刷新，都能正常访问对应页面。

二、必须用as属性时的解决方法（路由重写场景） #

如果你是需要自定义地址栏显示的URL（比如实际页面路径和想要展示的URL不一致）才用到as属性，刷新404的核心原因是服务器无法识别自定义URL对应的实际页面，需要做以下配置：

1. 配置next.config.js的路由重写规则 #

在项目根目录的next.config.js中添加重写规则，把自定义URL映射到实际页面路径：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // 示例：如果实际页面是/pages/about-page.js，想显示的URL是/about
      {
        source: '/about',
        destination: '/about-page'
      },
      {
        source: '/profile',
        destination: '/profile-page'
      },
      {
        source: '/users',
        destination: '/users-page'
      }
    ];
  }
};

module.exports = nextConfig;

2. 静态导出场景的额外配置 #

如果项目是用next export做静态导出，需要在next.config.js中开启trailingSlash: true，确保每个路由生成对应的目录和index.html文件：

const nextConfig = {
  trailingSlash: true,
  // 其他配置...
};

这样静态部署后，服务器能通过目录结构找到对应的页面文件，避免刷新404。

3. 自定义服务器部署的配置 #

如果是自己搭建Node.js服务器，需要添加路由 fallback，把所有请求转发到Next.js的入口文件，让Next.js的路由系统处理匹配逻辑。

问题根源 #

as属性仅修改浏览器地址栏显示的URL，但服务器收到请求时，会直接根据这个URL查找对应资源；如果没有提前配置重写规则或对应页面文件，服务器就会返回404。而客户端导航是Next.js的前端路由在处理，所以能正常跳转。

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