hydration error with nextjs and link

Issues
1

i created a component in plasmic which has a link to the root page (“/”).

nextjs redirects / to the default language /de

i now get a hydration error, saying that on client there is a link with href=“/de”, but on the server its “/”

Warning: Prop `href` did not match. Server: "/" Client: "/de"
    at a
    at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:106:19)
    at PlasmicNextLink2

how can i fix this?

2

i have a PlasmicRootProvider in _app in nextjs.

i fixed it by explicitly passing import Link from "next/link" into the Root provider:

  <PlasmicRootProvider
        loader={PLASMIC}
        Link={Link}
        prefetchedData={pageProps?.plasmicData ?? props?.plasmicData}
      >
        ... rest
      </PlasmicRootProvider>
    </>
1 Like