docs: react server components tutorial #1945
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
size-limit report 📦
|
vonovak
force-pushed
the
docs/rsc-tutorial
branch
from
3a37045 to
6ad03dd
Compare
|
@vonovak, excellent and polished writing. I really enjoyed it, thank you! 💪 |
website/docs/tutorials/react-rsc.md
Outdated
| ```tsx title="app/[lang]/components/SomeComponent.tsx" | ||
| import { Trans, t } from "@lingui/macro"; | ||
|
|
||
| export function SomeComponent() { | ||
| const { i18n } = useLingui(); | ||
| return ( | ||
| <div> | ||
| <p> | ||
| <Trans>Some Item</Trans> | ||
| </p> | ||
| <p>{t(i18n)`Other Item`}</p> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
may be it's worth to add an import statement for useLingui / Trans to avoid confusion
website/docs/tutorials/react-rsc.md
Outdated
| Here's how you could implement server-side `useLingui` yourself using `getI18n`, which is another way to obtain the I18n instance on the server: | ||
|
|
||
| ```tsx title="useLinguiForRSC.ts" | ||
| import { getI18n } from "@lingui/react/server"; | ||
|
|
||
| export function useLingui() { | ||
| const ctx = getI18n(); | ||
| if (!ctx) { | ||
| // throw an informative error | ||
| } | ||
|
|
||
| return ctx; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
do we really need this block? I believe the purpose of it is just informational, but that may bring a bit of cluttering and confusion for the reader. So developer may think that it need to implement this function by itself.
I think the previous paragraph is totally enough to describe the idea behind RSC version of useLingui
There was a problem hiding this comment.
agree. I removed it, but linked to the implementation. I think it's good to give people understanding of how things work inside.
website/docs/tutorials/react-rsc.md
Outdated
|
|
||
| Most likely, your users will not need to change the language of the application because it will render in their preferred language (obtained from the `accept-language` header in the [middleware](#)), or with a fallback. | ||
|
|
||
| To change language, you can either redirect users to a page with the new locale in the url, or you can load another locale [dynamically](/guides/dynamic-loading-catalogs.md). However, you need to keep in mind that if you have server-rendered locale-dependent content, it'd become stale. |
There was a problem hiding this comment.
no sure we need to advertise dynamic catalogs loading here. For the nextjs the only and single correct way would be to simply navigate to page with correct language, due to nextjs hybrid router + RSC, the only needed parts whould be updated, so pretty much the same result as if we load it dynamically on the FE
There was a problem hiding this comment.
yeah good point. I rewrote it slightly, just pointing out that dynamic loading doesn't make a ton of sense in this scenario
There was a problem hiding this comment.
@vonovak I just merged the PR too early and didn't notice the broken links. Could you please update them in a separate PR?
| Lingui provides support for React Server Components (RSC) as of v4.10.0. In this tutorial, we'll learn how to add internationalization to an application with the Next.js [App Router](https://nextjs.org/docs/app). However, the same principles are applicable to any RSC-based solution. | ||
|
|
||
| :::tip Hint | ||
| There's a working example available [here](#). We will make references to the important parts of it throughout the tutorial. The example is more complete than this tutorial. |
| :::tip Hint | ||
| There's a working example available [here](#). We will make references to the important parts of it throughout the tutorial. The example is more complete than this tutorial. | ||
|
|
||
| The example uses both Pages Router and App Router, so you can see how to use Lingui with both in [this commit](#). |
| Why we are not passing the I18n instance directly from `RootLayout` to the client via `LinguiClientProvider`? It's because the I18n object isn't serializable, and cannot be passed from server to client. | ||
| ::: | ||
|
|
||
| Lastly, there's the `appRouterI18n.ts` file, which is only executed on server and holds one instance of I18n object for each locale of our application. See [here](#) how it's implemented in the example. |
| - [Why do nested layouts/pages render before their parent layouts?](https://github.com/vercel/next.js/discussions/53026) | ||
| - [On navigation, layouts preserve state and do not re-render](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts) | ||
|
|
||
| This means you need to repeat the `setI18n` in every page and layout. Luckily, you can easily factor it out into a simple function call, or create a HOC with which you'll wrap pages and layouts [as seen here](#). Please let us know if there's a known better way. |
|
|
||
| ### Changing the active language | ||
|
|
||
| Most likely, your users will not need to change the language of the application because it will render in their preferred language (obtained from the `accept-language` header in the [middleware](#)), or with a fallback. |
Description
This is a tutorial for RSC using the existing NextJS example app (see #1944). The idea is to merge that one first and then link it from the guide.
closes #1698
closes #1903
closes #1876
Types of changes
Fixes # (issue)
Checklist