问题标签 [next-link]

来自：下一个/链接

您可以看到<Link>组件 fromnext/link启用了客户端转换和链接prefetching，这是很棒的功能，但可能并非适用于所有情况。

请参阅我遇到的警告。假设我有以下页面：

• Home- 一些带有导航栏的登陆页面
• Latest- 在这里我可以看到我的最新帖子
• Admin- 在这里我可以添加更多帖子

上面示例中的Latest页面使用getStaticPropswith revalidate。就像是：

理论上，1 秒后，它应该为下一个请求发送最后一个陈旧的响应，并触发一个新的静态重新生成，为后续请求提供服务。1 秒后，该过程重复进行，并且您至少每秒都会获得新数据，这几乎是立即的。

现在，看看我遇到的警告next/link：

• 1. 用户登陆Home页面。导航栏上有一个Link指向Latest。该链接prefetched将由next/link.
• 2. 在其他一些浏览器中，anadmin转到Admin页面并添加一个帖子（它应该Latest在某个时候出现在页面上）。
• 3. 现在用户点击Latest页面链接。新帖子不存在。
• 4. Home再次点击。并再次点击Latest。新职位仍然不存在，也永远不会存在。

在这种情况下，转换速度非常快，这很好。但根据我目前的经验，我认为该用户被锁定在我的网站版本中，新帖子将永远不可用，因为第一次prefetch发生在新帖子不存在的时候。

用户看到新帖子的唯一方法是他/她按下F5以重新加载完整的网站。并且可能需要刷新两次，因为第一个可能会在触发下一个的重新生成时返回以前的旧版本。

我的意思是，这个问题的解决方法是什么？我不应该使用next/link包含任何动态数据的页面吗？我应该只使用普通<a>标签吗？

更新

来自：https ://nextjs.org/docs/basic-features/data-fetching#statically-generates-both-html-and-json

从上面的摘录中，我们可以看到确实，客户端转换不会触发页面重新生成，因为它们不会调用getStaticProps. 他们只获取页面的预构建JSON对象以用作props.

AFAIK，这意味着您将被锁定到您第一次访问该网站时存在的页面版本。您可以来回移动，页面中的任何内容都不会改变，因为JSON数据可能无论如何都缓存在客户端上。

PS：我已经对此进行了测试（就像我在上面的问题中提到的那样），这正是发生的事情。

那么如何解决呢？我希望那些在我的网站上保持打开标签的用户能够在从一个页面导航到另一个页面时获得页面的更新。

一个可能的解决方案

设置某种空闲时间计数器，如果用户有 10 分钟的空闲时间（这意味着他们让选项卡保持打开状态）。每当他回来做一些动作时，我可以刷新整个网站以确保他们获得新版本的页面。

以前有人遇到过这个问题吗？

我有两个页面使用相同的一个组件Posts作为searchModel道具，当我使用 Next Link 更改路径时，除非刷新页面，否则组件永远不会重新呈现。我的代码：

index.js

类别/[id]/[slug].js

和帖子：

有什么我做错了吗？我可以绕过它而不必使用 componentDidUpdate() 吗？

我已经构建了一个使用动态路由的 Next.js 应用程序，并且我注意到<Link>预取的一些奇怪行为。

偶尔（通常在重建后但并非总是如此）我的应用程序开始为给定页面上的所有预取返回 404。如果我点击一个链接，下一页会加载，但再次，该页面上的所有预取都从 404 开始。刷新页面几次后，这个问题就会消失，但这并不总是一致的。

中断似乎只发生在我的动态路线上，每秒使用 getStaticProps 和内容重新验证。下面是我如何构建链接的示例，注意tripname将是一个动态值。

这就是页面加载时发生的情况。

编辑：

我花了一天时间对此进行深入研究，并提供了一些额外的细节来更好地描述我正在经历的事情。此错误肯定与我构建应用程序的时间有关，并且仅发生在通过我的函数中的fallback:true属性在构建过程之后生成的页面上。getStaticPaths()

显式构建的页面（例如在路径数组中）似乎没有表现出这个问题。我不确定这是否有意义，但似乎给定页面的前几次加载恢复到以前版本的版本而不是后备页面。只有在重新加载页面几次之后，回退功能才会真正发挥作用，然后将该页面构建为当前构建的一部分。从那时起，一切似乎都按预期工作，直到整个考验开始新的下一个构建。

还包括控制台日志的屏幕截图，指示/_next/data/...目录中存在问题。虽然我不确定这个错误实际上是指什么。

我有一个基于自定义 Express 服务器的 Next JS 应用程序。在使用 Next Link 组件从一个页面到另一个页面进行客户端转换时，我没有使用 getServerSideProps 获取 ServerSide 呈现的数据。使用 getInitialProps 也可以正常工作

Next Link 组件、getServerSideProps 和 NextJS 与自定义服务器的客户端转换有任何问题吗？

如何使链接出现在我制作的组件上方？我使用 Next.js 11 版本。

这是错误信息。

这是我的源代码。

Card 组件只是简单的 ui 数据，而 const 数据是临时数据。我认为在链接中嵌入 comp 是错误的。我应该怎么办？

我有 next.js 网站，用于使用 strapi 进行生产工作。我有三个主要页面和动态子页面。

“/[slug]”页面有两种路由方式。如果用户从“/”转到此页面，它会作为上下文路由并以模式打开 slug 页面。其他用户直接转到页面它作为“下一个/链接”正常工作

“/”页面首次加载大约需要。2-3 秒。这有点正常。问题是，在初始加载后，加载时间会更长。是不是有预取或者缓存机制呢？在文档中， next 说 prefetch true 作为默认值。

另一个问题，“/About”页面总是在加载后立即刷新。没有理由重新加载，这个页面不像“/”那样复杂

您可以从那里查看实时页面

对于上下文路由，我使用了 next-use-contextual-routing

当我包含这个包然后在我的页面组件中添加一个链接时，它给了我一个错误。在世博会客户端工作正常。这里我想使用 expo-next-react-navigation 包。错误链接https://github.com/nandorojo/expo-next-react-navigation/issues/72

错误

包.json

` .eslintrc

通天塔配置

自定义组件

我在 next.js 中遇到路由问题。服务器上的项目位于子目录中：exmaple.com/app。

我想实现的路由：（example.com/app/<locale>/<pageName> 在url前添加前缀）。当我尝试将其添加到 href 时，会以Link这种方式生成 url：example.com/<locale>/app/<pageName>

有没有办法在前缀之后添加语言环境，而不是相反？当我使用 basePath 时，它会在 example.com/app/app 中为我的应用程序提供服务，因为项目位于 /app 子目录中

用于包装链接的自定义链接组件：

我有一个Link看起来像的标签<Link href='/api/twitter/generate-auth-link'>Login with Twitter</Link>。

我已经创建pages/api/twitter/generate-auth-link.ts了如下所示：

当我单击它时，它会引发以下错误：

我如何解决它？

复制 → https://github.com/deadcoder0904/twitter-api-v2-3-legged-login-using-next-connect

我需要 Next/Link 的默认 href 值，就像我们在下面的纯 html 中所做的那样

我试过了，Link但它会重新加载页面，如果我把它留空，它会产生一些错误，因为它的 required 属性

实际上，我正在映射一个集合，其中一些项目没有，href所以我需要将其留空并在点击时显示一些警报；