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.

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

fix: i18n in app router #496

Conversation

enpitsuLin
Copy link
Member

part of #492

fix i18n problem

For client component => use props to display translated text , see src/app/(home)/components/EntranceButton.tsx(maybe there are better way)

For server components just add a hook to get headers['accept-language'] as langId and use it in async component with useTranslation in src/lib/i18n or <Trans/> export from react-i18next/TransWithoutContext

@vercel
Copy link

vercel bot commented May 6, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
xlog ❌ Failed (Inspect) May 6, 2023 3:49pm

<strong className="font-medium">xLog</strong> is the best{" "}
<UniLink
<a
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMHO, In RSC, we shouldn't use components that may be both pure function component and stateful component (next/link) like <UniLink/>, so I just replace to anchor tag here


import { Trans, useTranslation } from "next-i18next"
import { useRouter } from "next/navigation"
import { Element, Link } from "react-scroll"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we cant use class component in RSC so replace it to native anchor

@@ -12,6 +12,7 @@ export default async function HomeLayout({
}) {
return (
<>
{/* @ts-expect-error RSC */}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here has some solution, but IDK how to😁


get from this

@@ -0,0 +1,142 @@
"use client"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some component in @crossbell/ui cause RSC error

@enpitsuLin enpitsuLin changed the title refactor: i18n configuration move to lib dir fix: i18n in app router May 6, 2023
@DIYgod DIYgod merged commit 091c118 into Crossbell-Box:feature/nextjs-app-router May 6, 2023
@enpitsuLin enpitsuLin deleted the feature/nextjs-app-router branch May 7, 2023 02:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants