1

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!

Liren Yeo
  • 3,215
  • 2
  • 20
  • 41

3 Answers3

0

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.

Alex
  • 66
  • 1
  • 3
0

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

dodo
  • 9
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 18 '23 at 23:41
0

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.

  • Netlify has been able to host Next.js apps just fine for quite some time now - it is just this specific routing issue when you use the latest Next.js 13 and app router. Switching providers shouldn't be the solution. – Alex Aug 11 '23 at 03:58
  • agree with you @Alex, waiting for an update from Netlify on this issue. – syed yaser mohasin Aug 11 '23 at 10:58
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 12 '23 at 11:40