search

TheSGJ / nextjs-toploader

A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 , Next.js 13 and React.
https://www.npmjs.com/package/nextjs-toploader
MIT License
871 stars 50 forks source link

Hydration error (app directory) #20

Closed ishaan1013 closed 1 year ago

ishaan1013 commented 1 year ago

Adding the component into the root layout gives a hydration error.

app/layout.js:

import NextTopLoader from 'nextjs-toploader';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}

image

Putting <NextTopLoader /> into a client component and using that in the root layout gives the same error.

uwussimo commented 1 year ago

The same issue here, let me know if you find any fix.

uwussimo commented 1 year ago

I figured out the issue, so providers should be inside the body component...