Next.js App Routing Behaves Differently After Deployment to Netlify

Question

I'm currently developing a Next.js app (version 13.4.1) and have encountered an issue with the new App Routing feature. In my local development environment, everything works as expected, but once deployed to Netlify, I'm experiencing different behavior.

My app has the following structure:

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

I have a simple navbar in my dashboard layout file (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}
    </>
  )
}

and the agenda/page and seating/page look something like this:

'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>
  )
}

When clicking on the navbar links locally, the children component re-renders without a page refresh as expected. However, when running the same code in Netlify, clicking the navbar links triggers a full page refresh, as if they were typical tags.

I have not made any special configuration or setup for Netlify, simply pushing my code as is. I'm looking for a solution that maintains the expected behavior after deployment. Any guidance or suggestions would be greatly appreciated. Thank you!

Answer 1

Hi in case you haven't found an answer yet, this is an ongoing issue.

I'm also having this issue with a project of mine deployed on Netlify.

Answer 2

you can use "next": "13.3.1", it will working fine this

Answer 3

When it comes to hosting Next.js applications, Vercel is often recommended due to its seamless integration and optimization for Next.js features, including dynamic routing and server-side rendering. On the other hand, Netlify is commonly associated with static web hosting and might not provide the same level of support for Next.js's dynamic routing.

For instance, I hosted my app at https://99ledger.vercel.app/ on Vercel, and it functions smoothly, mirroring the behavior on my local system. However, when I attempted to host the same app on Netlify, I encountered issues with page rerendering during routing.

This experience highlights the importance of selecting a hosting platform that aligns with the specific features and requirements of your Next.js application. It's a good practice to thoroughly test your application on the chosen platform to ensure that routing and other functionality work as intended.