Next.js动态路由中，as属性是否真的有必要使用？

你观察到的两种写法跳转效果一致是有前提的，但as属性并非完全多余，得结合路由类型来看：

1. 静态路由场景（你的第一个例子） #

直接用href="/someroute"完全可行，as属性在这里确实没必要。因为这个路由是固定的静态路径，Next.js会直接匹配对应的pages/someroute.js页面，跳转逻辑清晰直接。

2. 动态路由场景（你的第二个例子） #

这里的区别就很关键了：

• href="/[param]"指向的是你的动态路由页面文件（比如pages/[param].js），这是告诉Next.js要加载哪个页面组件；
• as="/someroute"是浏览器地址栏显示的实际URL，同时用来给动态路由传递参数（这里param的值就是someroute）。

如果你的页面是动态路由，只写href="/someroute"的话，Next.js会去寻找pages/someroute.js这个静态页面文件——如果这个文件不存在，页面就会404。而用href="/[param]" as="/someroute"的写法，Next.js会正确加载pages/[param].js，并把param参数设为someroute。

举个实际例子：假设你有pages/post/[id].js页面，要跳转到id为123的文章，正确写法是：

<Link href="/post/[id]" as="/post/123">
  <a>查看文章123</a>
</Link>

如果直接写<Link href="/post/123"><a>查看文章123</a></Link>，Next.js会去找pages/post/123.js，这个文件不存在的话就会报错。

补充：Next.js版本差异 #

在新版的App Router中，as属性已经被移除，改用直接在href中拼接动态参数的方式，比如：

<Link href={`/post/${id}`}>
  <a>查看文章{id}</a>
</Link>

框架会自动解析动态路由并传递参数。但在旧版的Pages Router中，as属性依然是动态路由跳转的标准写法。

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