I've recently started using Next.js and I noticed that my browser's back and forward buttons don't seem to do anything except change the URL after the first click. The content on my pages stays the same, which is really confusing. I even created a bare-bones app and faced the same issue. Is this how Next.js is supposed to behave? I've tried it with both Next 15 and 16. Am I using the Link component incorrectly, and does having "use client" in my layout matter?
3 Answers
That behavior isn't normal for Next.js. The back and forward buttons should work seamlessly with the Link component and the app router. Double-check if you might be preventing default navigation somewhere in your code, as well as any middleware or event listeners that could be causing issues. Caching could also be a factor, so try adding `export const dynamic = 'force-dynamic'` to your pages. Also, ensure you're running a fresh instance of your app by using `npm run dev` without cached builds.
It sounds like there might be a problem with your implementation if the back and forward buttons aren’t functioning as expected. If there’s nothing to go back to, though, that could be a separate issue. Make sure there’s actually history to navigate through.
This is expected behavior when using the App Router in Next.js. The framework tends to reuse layouts and the React tree, which means that while the URL changes, the UI may not update if the layout structure remains the same. To fix this, consider moving your Sidebar component out of the root layout and into a segment-level layout. This way, when the route segment changes, Next.js can properly update the UI when navigating back and forth. It’s not about the Link component or using "use client". Check out the official docs for more about layouts and caching navigation.
Thanks for the suggestion! It seems the real issue was actually an interaction with a chrome extension I had installed.
I don’t think forcing dynamic is necessary to solve the back button issue.