Componet can't read translation context if use before children in layout.tsx - Next 13 app directory

marcelotk15 commented 1 year ago

What version of this package are you using? 2.0.2 also next-translate-plugin

What operating system, Node.js, and npm version? OS: W11 with WSL1 Node: 16.17.1 NPM: 8.15.0

What happened? If I use a component in the layout file before render the children they aren't able to read lang from useTranslation.

Showing the error. https://app.birdeatsbug.com/sessions/7-srlQL9vr0fdUIJFU8ajxGiIymHBT-A4CEI3W3o-EYh

There is an error in console about that: Warning: Prop `href` did not match. Server: "/en/second-page" Client: "//second-page"

When I click on the first he send me to http://second-page/ and the second works fine

CODES: src/components/ShowTheError.tsx

'use client'

import useTranslation from "next-translate/useTranslation";
import Link from "next/link";

export function ShowTheError() {
  const { lang } = useTranslation()

  return (
    <Link href={`/second-page?lang=${lang}`} as={`/${lang}/second-page`}>
      second page
    </Link>
  )
}

src/app/layout.tsx

import { ShowTheError } from "../components/ShowTheError"

...
  return (
    <html lang={lang}>
      <head />
      <body>
        <ShowTheError />

        {children}

        <ShowTheError />
...

What did you expect to happen? The componente can read the translation context.

Are you willing to submit a pull request to fix this bug? Yes.

aralroca commented 1 year ago

Currently; layouts, loading, etc are not supported yet. Only page & subpage components. But should be great to support it soon.

aralroca commented 1 year ago

Layouts are supported in 2.4.0-canary.2 (next-translate + next-translate-plugin in the same version). Would be great if you can try and give me some feedback before the next release. Thanks 🙏

aralroca / next-translate-plugin

Componet can't read translation context if use before children in layout.tsx - Next 13 app directory #7