导航到 Next.js 中的不同页面时，资源未加载

Question

当我在 Next.js 中从一个页面导航到另一页面时，我的页面内容（例如图像、文本和样式填充）无法正确呈现。但是，当我刷新页面或复制链接并直接在新选项卡中打开它时，所有内容都会正确显示。仅当我在 Next.js 中浏览路由时才会出现此问题。我认为切换路线时资源加载不正确。

Answer 1

使用 Next.js 链接组件： 确保您使用 Next.js 的链接组件进行客户端导航，而不是常规锚标记 ()。 Next.js 的链接组件预取链接页面的资源，这可以帮助确保在路线之间导航时正确加载资源。

示例

import Link from 'next/link';

<Link href="/other-page">
  <a>Go to Other Page</a>
</Link>