Next.js 所有预加载链接都出现 404 错误

Question

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

那么我的代码有什么问题？我该如何解决这个问题？

演示存储库位于 github。

Answer 1

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

您可以轻松解决此问题：只需要这样重写您的 links

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

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

此技术称为 "route masking" 您可以在 Next.js tutorial

中阅读更多相关信息

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

Answer 2

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

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

我的routes.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>

Next.js 所有预加载链接都出现 404 错误

Next.js 404 error for all preloaded links

javascript

reactjs

next.js