Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
marcelotk15 opened this issue Feb 25, 2023 · 2 comments · Fixed by #39 or aralroca/next-translate#1075
Closed

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

marcelotk15 opened this issue Feb 25, 2023 · 2 comments · Fixed by #39 or aralroca/next-translate#1075
Labels
bug Something isn't working enhancement New feature or request

Comments

@marcelotk15
Copy link

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 aralroca added the bug Something isn't working label Feb 25, 2023
@aralroca aralroca transferred this issue from aralroca/next-translate Feb 25, 2023
@aralroca
Copy link
Owner

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

@aralroca aralroca added the enhancement New feature or request label Feb 25, 2023
This was referenced May 18, 2023
Closed
Closed
This was referenced Jun 19, 2023
Merged
Merged
@aralroca
Copy link
Owner

aralroca commented Jun 19, 2023 •
edited
Loading

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 🙏

This was referenced Jun 19, 2023
Merged
Merged
@aszx87410 aszx87410 mentioned this issue Sep 1, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Milestone
No milestone
2 participants
@marcelotk15 @aralroca