Next.js 应用程序路由在部署到 Netlify 后表现不同

Question

我目前正在开发 Next.js 应用程序（版本 13.4.1），并且遇到了新的应用程序路由功能的问题。在我的本地开发环境中，一切都按预期运行，但一旦部署到 Netlify，我就会遇到不同的行为。

我的应用程序具有以下结构：

app
 |-- (dashboard)
   |-- agenda/page.tsx
   |-- seating/page.tsx
   |--layout.tsx

我的仪表板布局文件（dashboard/layout.tsx）中有一个简单的导航栏：

'use client'

import Image from 'next/image'
import Link from 'next/link'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <header className={styles.dashboardHeader}>...</header>
      <ComponentThatHasUseEffect />
      <nav className={styles.dashboardNav}>
        <Link href="/seating">Seating</Link>
        <Link href="/agenda">Agenda</Link>
      </nav>
      {children}
    </>
  )
}

议程/页面和座位/页面看起来像这样：

'use client'

export default function Agenda() {
  // this custom hooks uses useSWR to fetch logged in users
  const { user, isLoading, error } = useUser()

  if (isLoading) {
    return (
      <main className={styles.agenda}>
        <Placeholder height={800} />
      </main>
    )
  }

  return (
    <main className={styles.agenda}>
      ...normal stuffs
    </main>
  )
}

当单击本地导航栏链接时，子组件会重新呈现，而不会按预期刷新页面。然而，当在 Netlify 中运行相同的代码时，单击导航栏链接会触发整个页面刷新，就像它们是典型的标签一样。

我没有对 Netlify 进行任何特殊配置或设置，只是按原样推送我的代码。我正在寻找一种在部署后保持预期行为的解决方案。任何指导或建议将不胜感激。谢谢！

Answer 1

嗨，如果您还没有找到答案，这是一个持续存在的问题。

我在 Netlify 上部署的一个项目也遇到了这个问题。

Answer 2

你可以使用“next”：“13.3.1”，它会正常工作

Answer 3

https://vercel.com/ 推荐用于托管 nextjs 应用程序，Netlify 主要推荐用于静态 Web 托管。

我已经在 vercel 中托管了我的应用程序 https://99ledger.vercel.app/，它像在我的本地系统中一样运行顺利。当我尝试相同的 netlify 时，这给了我路由问题。