所有预加载链接的 Next.js 404 错误

Question

我是 next.js 的新手，作为第一步，在我开始开发实际的应用程序之前，我正在按照文档学习基础知识，现在，我正在努力让预取工作，因为所有预加载的请求返回 404 错误。

那么我的代码有什么问题呢？ 我怎么解决这个问题？

演示存储库位于github 上。

Answer 1

请注意，只有express服务器知道如何处理这种/post/:id URL， next.js不知道它，因此next.js尝试预取不存在的页面（您可能会在 Chrome 控制台输出中看到）。

您可以轻松解决此问题：只需要以这种方式重写您的链接

<Link href={`/post/?id=${show.id}`} as={`/post/${show.id}`} prefetch>

因此，只会执行一个预取post.js页面的查询。

这种技术称为“路由屏蔽”，您可以在Next.js 教程中了解更多信息

更新：问题似乎更多是关于prefetch功能在 Next.js 中的实际工作方式，因此我将尝试对其进行解释。 如果链接上没有prefetch属性，Next.js 将按需加载相关块（当用户单击链接时），因此加载和解析 javascript 会导致小的延迟。 prefetch属性允许您消除此延迟，因为 javascript 将在应用程序启动后尽快加载。 在这两种情况下，新页面都将像在通常的 React 应用程序中一样在浏览器中呈现。

Answer 2

不要使用这个： import Link from "next/link";

使用： import { Link } from './routes'; 这是 routes.js 配置文件

我的路线.js：

const routes = (module.exports = require("next-routes")());
routes.add("/:username", "profilepage");

使用：

import { Link } from './routes';
<Link route={"/my_page"}><a href="my_page">My Page</a></Link>