Next.js Discord

Discord Forum

Client side navigation not working even on a brand new empty barebones project (App router)

Unanswered
Red-billed Tropicbird posted this in #help-forum
Open in Discord
Red-billed TropicbirdOP
Since yesterday, client side navigation for all projects under my account have stopped working (for new commits) on production. It works fine on the local dev server. I've created a sample barebones project below to demonstrate the issue. If you click the 'add background colour' button, the background colour is lost between page navigations (on dev the page colour is preserved). You can also observe the behaviour by looking at the network tab in chrome inspector.

Anyone have any ideas on what is going on?

Sample project:
https://nextjs-nav-sable.vercel.app/
Git repo:
https://github.com/romiem/nextjs-nav/

17 Replies

not-milo.tsx
The repo is private so we can't see your code :thinq:
Red-billed TropicbirdOP
@not-milo.tsx Oops sorry! It is now public
not-milo.tsx
I think the issue lies within the fact that you're re-rendering your links on each navigation. Putting them in a separate Navbar component and placing that in the root layout fixes the issue.

https://nextjs-nav-two.vercel.app/
https://github.com/milovangudelj/nextjs-nav
// app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
        <div>
          <button id="button">Add background colour</button>
        </div>
        <Script src="/buttonscript.js" />
      </body>
    </html>
  );
}

// components/navbar.tsx

import Link from "next/link";

export const Navbar = () => {
  return (
    <div>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </div>
  );
};
Red-billed TropicbirdOP
Interesting - you're right. In my main project I actually do have the NavBar abstracted away into it's own component. But I wonder why this only suddenly started happening on my main project which has been running for months without issue.
not-milo.tsx
Try to figure out when it started happening and see if it coincides with an update in Next version or other changes to your code. Maybe you'll find a reasonable answer. From what you provided my best guess is the one I sent above.
Red-billed TropicbirdOP
It's also bizarre how the issue does not occur on local dev
When you tested it out, did you find the same?
not-milo.tsx
Yup. Your repo was working fine on the local dev server
Red-billed TropicbirdOP
I've updated the repo to show what happens if I use Layout level links and page level links, and it seems to revert back to the broken behaviour. Would you mind having another look if you have a moment please?
not-milo.tsx
Sure. I'll take a lok as soon as I can 👍🏻
Red-billed TropicbirdOP
Thank you
not-milo.tsx
Oddly enough with your latest changes I don't see the issue anymore. https://nextjs-nav-two.vercel.app/
Red-billed TropicbirdOP
Hey - yep I noticed this too. Also, all my projects under my account have started working again (without any code changes or commits).
My suspicion is that there must have been a configuration issue that has been rectified - either at Vercel's end, or their load balancer
not-milo.tsx
We can't know for sure. Vercel's status page doesn't show relevant incidents for today...
Well, I'm glad it started working again ✌🏻