与 Next.js SSG 的静态链接不一致答案

【问题标题】：Inconsistent static links with Next.js SSG与 Next.js SSG 的静态链接不一致
【发布时间】：2020-05-27 04:35:57
【问题描述】：

我创建了一个结构简单的 Next.js 网站：

- pages
  - articles
    - [slug].js
    - index.js

- components
  - nav.js

在 nav.js 中，我使用next/link 以及pages/articles/[slug].js 和pages/articles/index.js 路由所有链接

但是，我无法让 Link 正确指向 domain/articles/ 并使该列表中生成的链接正常工作。

对于每个<Link />，我都在使用<Link href="/articles/[id].js" as={/articles/${id}}> 方法，该方法在开发中有效，但是一旦我导出到静态站点，就会出现很多问题。

首先，设置静态链接似乎根本不起作用：

<Link href="/articles/index.js" as={`/articles/${id}`}> 生成一个指向domain/articles 的链接，它为我提供了生成的articles/ 文件夹中的文件索引。如果我在末尾手动添加.html，那么我会得到该页面。但是，生成的articles/[id] 页面链接中的相同链接指向domain/articles/articles

我想我一定是做错了什么，但我终其一生都无法弄清楚我应该如何使用<Link /> 组件在页面之间生成一致且功能正常的静态链接。

【问题讨论】：

修复这个问题，并删除每个生成页面的烦人的 .html 结尾，我们会在这里有一些东西......现在，next.js 无法使用。

标签： javascript routes next.js

【解决方案1】：

[更新：NextJS 的较新版本不再需要使用 as 属性。]

首先，href 属性不应该有.js 文件后缀。

示例文件的正确 href 为 href="/article" 和 href="/article/[slug]"

其次，您的as 属性需要与href 匹配，因此您不能这样做

<Link href="/articles/index" as={`/articles/${id}`}>

因为“index”与id字符串不匹配。

所以正确的标签是：

<Link href="/articles">

（不需要as，因为它与href相同）

<Link href="/articles/[slug]" as={`/articles/${id}`}>

一旦你纠正了这些事情，它应该会更好地为你工作。

【讨论】：

【解决方案2】：

原来问题源于 Next.js 部署的一个怪癖：它不支持将站点放在子文件夹中。所以example.com/myNextSite/ 会对链接做一些奇怪的事情，而同一个导出的站点在根example.com 中可以正常工作。

【讨论】：