search

Skyleen77 / next-nprogress-bar

NProgress integration on Next.js compatible with /app and /pages folders
https://next-nprogress-bar.vercel.app
315 stars 24 forks source link

next-nprogress-bar causes deopting into client-side rendering in Nextjs 13 app router #43

Closed DrTaleb closed 6 months ago

DrTaleb commented 6 months ago

Hello! In my NextJS projects, I'm using your progress bar, but there's a major bug: my static pages, such as "/" or "/mag," are deopting into client-side rendering, the server-side components aren't mounted in my page source, and my html tag has this attribute: <html id="__next_error__">. However, my dynamic routes and catch all routes, such as [city] and [...city], work fine and are server-side. I discovered that your package is the source of this error, and I tried a number of adjustments, such as removing it from the root layout and importing it using next-dynamic, but nothing worked. What should I do as this issue is affecting my SEO and my large-scale projects?

Skyleen77 commented 6 months ago

Hello, I'm really sorry to hear this, what version are you on?

This normally happens when the component is not surrounded by : https://nextjs.org/docs/messages/deopted-into-client-rendering

However, in the latest version, the ProgressBar component is well surrounded by the Suspense component.

Please make sure you are at least on version 2.3.4 or higher.

DrTaleb commented 6 months ago

My version was 2.1.2 I changed the version to 2.3.4 and it was fixed Thank you very much :heart_eyes: :heart: