Next.js tutorial

[andrii-bodnar]

Next.js is one of the most requested and popular cases when users ask about using Lingui. Currently, we don't have a single guide that describes all the details of internationalizing Next.js apps.

We do have some examples with the Pages Router, and a PoC of usage with the App Router.

As was recently discussed, it would be great to have a separate guide that covers both ways (pages router and app router (using the @lingui/react/server PoC).

[vonovak]

I have recently set up Lingui with the app router, including server and client components, so I'm happy to do it.

My timeline is ~ end of March.

[andrii-bodnar]

I think it would be also great to mention the recent feature in the React bundle - https://github.com/lingui/js-lingui/releases/tag/v4.8.0

Related discussion - #1698 (comment)

[fromthemills]

Made an example and a guide. 👉 PR

[daveycodez]

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Home`.

src/app/[locale]/(home)/page.tsx (25:21) @ Home


  23 |                     {" "}
  24 |
> 25 |                     <Trans>
     |                     ^
  26 |                         Hybrid
  27 |                     </Trans>
  28 |                 </h1>

Can't get it to work.

import { Trans } from "@lingui/react/macro"

[timofei-iatsenko]

@daveycodez most likely you messed up with a configuration for macro. Check one of nextjs examples in this repo and copy configuration to your project. Note, macro requires some compilation time plugins either for babel or swc (next compiler) make sure you copied this configuration as well.

[daveycodez]

@daveycodez most likely you messed up with a configuration for macro. Check one of nextjs examples in this repo and copy configuration to your project. Note, macro requires some compilation time plugins either for babel or swc (next compiler) make sure you copied this configuration as well.

I sorted it out, needed experimental swcPlugins in Next config. Thanks