[英]Inconsistent static links with Next.js SSG
I've created a Next.js website with the simple structure:我创建了一个结构简单的 Next.js 网站:
- pages
- articles
- [slug].js
- index.js
- components
- nav.js
In nav.js, I route all links with next/link
as well as in pages/articles/[slug].js
and pages/articles/index.js
<-- The latter is an "archive" page of sorts to see all articles.在 nav.js 中,我使用next/link
以及pages/articles/[slug].js
和pages/articles/index.js
路由所有链接 <-- 后者是一种“存档”页面,可以查看所有内容文章。
However, I can't get Link to properly point to domain/articles/
and have the generated links in that list work properly.但是,我无法让 Link 正确指向domain/articles/
并使该列表中生成的链接正常工作。
With each <Link />
I'm using the <Link href="/articles/[id].js" as={
/articles/${id} }>
method which works in development, but as soon as I export to a static site, issues abound.对于每个<Link />
我都在使用<Link href="/articles/[id].js" as={
/articles/${id} }>
在开发中有效的方法,但是一旦我导出到一个static网站,问题比比皆是。
First, setting a static link doesn't seem to work at all:首先,设置 static 链接似乎根本不起作用:
<Link href="/articles/index.js" as={`/articles/${id}`}>
results in a link pointing to domain/articles
which gives me the index of files in the generated articles/
folder. <Link href="/articles/index.js" as={`/articles/${id}`}>
导致指向domain/articles
的链接,它为我提供了生成的articles/
文件夹中的文件索引。 If I manually add an .html
to the end, then I get the page.如果我手动将.html
添加到末尾,那么我会得到该页面。 However, the same link in a generated articles/[id]
page link, points to domain/articles/articles
但是,生成的articles/[id]
页面链接中的相同链接指向domain/articles/articles
I think I must be doing something wrong, but I can't for the life of me figure out how I'm supposed to use the <Link />
component to generate consistent and functional static links between pages.我想我一定是做错了什么,但我终其一生都无法弄清楚我应该如何使用<Link />
组件在页面之间生成一致且有效的 static 链接。
[UPDATE: Newer version of NextJS do no longer require the use of the as
attribute.] [更新:新版本的 NextJS 不再需要使用as
属性。]
First of all, the href
attribute should not have the .js
file suffix.首先, href
属性不能有.js
文件后缀。
Correct hrefs for your example files would be href="/article"
and href="/article/[slug]"
示例文件的正确 href 为href="/article"
和href="/article/[slug]"
Secondly, your as
attribute needs to match with the href
, so you can not do for example其次,您的as
属性需要与href
匹配,因此您不能这样做
<Link href="/articles/index" as={`/articles/${id}`}>
since "index" does not match with the id string.因为“index”与 id 字符串不匹配。
So correct tags are:所以正确的标签是:
<Link href="/articles">
(Does not need as
since it is the same as the href
) (不需要as
因为它与href
相同)
<Link href="/articles/[slug]" as={`/articles/${id}`}>
It should work better for you once you correct those things.一旦你纠正了这些事情,它应该对你更好。
Turns out the issues stemmed from a quirk of Next.js deployment: It does NOT support having the site in subfolders.原来问题源于 Next.js 部署的一个怪癖:它不支持将站点放在子文件夹中。 So example.com/myNextSite/
will do strange things with links, while the same exported site works fine in the root example.com
.所以example.com/myNextSite/
会用链接做一些奇怪的事情,而同一个导出的站点在根example.com
中工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.