Question

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

^[^*]*\*$

在nav.js中，我使用- pages - articles - [slug].js - index.js - components - nav.js以及next/link和pages/articles/[slug].js中的所有链接进行路由<-后者是一个“归档”页面，用于查看所有文章

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

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

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

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

我认为我一定做错了事，但是我一生都无法弄清楚我应该如何使用domain/articles/articles组件在页面之间生成一致且有效的静态链接。

Answer 1

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

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

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

第二，您的as属性需要与href匹配，因此您不能例如

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

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

所以正确的标签是：

<Link href="/articles">

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

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

更正这些问题后，它应该对您更好。

Answer 2

找出由Next.js部署的怪癖引起的问题：它不支持将站点包含在子文件夹中。因此，example.com/myNextSite/会用链接做奇怪的事情，而相同的导出站点在根example.com中可以正常工作。

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

2 个答案: