DEV Community

Cover image for i18n with Next.js 13 and app directory

i18n with Next.js 13 and app directory

Adriano Raiano on December 08, 2022

At Next.js Conf, the Vercel team announced Next.js 13 which introduced the new app directory. It includes support for Layouts, Server Components, ...
Collapse
 
spock123 profile image
Lars Rye Jeppesen

I have to admit, coming from Angular, this is such a bad experience in comparison.

In Angular you just use a system-provided prop called i18n and you use it in component templates like<h1 i18n="id_for_my_translation">Translate-me</h1>

No special imports needed, no function calls, no contexts, no having to make components async etc etc.

Collapse
 
tim_emed profile image
Tim Goyer

To be fair, using the react-i18n library in a vanilla React app is just as easy as you mention in Angular, and possibly easier.

This article is about getting it to work in a SSR-first NextJS v13 app. v13 is a brand new paradigm in the React space and still in beta. You are comparing apples to oranges.

Collapse
 
alibayatmokhtari profile image
Ali Bayat Mokhtari

Good for you and Angular

Collapse
 
rhmnaulia profile image
Aulia Rahman

What if I want to make the root path as default language like this:

  • http://localhost:3000 ==> will be en without showing the /en prefix because it's the default language.
  • and if I go to http://localhost:3000/fr it will translate to fr

How can I achieve this?

Collapse
 
mattmana profile image
mattmana • Edited

great post! i need same as you, i think its a custom route in middleware.js, did you resolve it?

Collapse
 
veroqg profile image
Veronica Quispe

An excellent guide for those who are learning a little more about it, I implemented it in Typescript version and it looks great, I only have a problem, I can not access the images in the public folder as I did, any idea why this happens?

Collapse
 
adrai profile image
Adriano Raiano

You may need to adapt the middleware

Collapse
 
veroqg profile image
Veronica Quispe

Thanks for your answer, indeed, I had to adapt the middleware, now I was able to implement it without any problem. Thank you!

Collapse
 
cbfn profile image
Christian Nascimento

Nice post! Awesome! I follow the code but I had problems to implement a typescript version. Any ideia?

Collapse
 
adrai profile image
Adriano Raiano
Collapse
 
spock123 profile image
Lars Rye Jeppesen

Fantastic, thank you

Collapse
 
cbfn profile image
Christian Nascimento

Really awesome, now I can remove my tslint-ignore. Thanks!

Collapse
 
rc77526076 profile image
rc

hi there a error, when i try a not exit path. didnt go to "not-found"page.
"Server Error
Error: A required parameter (slug) was not provided as a string in generateStaticParams for /[lng]/[slug]

This error happened while generating the page. Any console logs will be displayed in the terminal window."

Collapse
 
adrai profile image
Adriano Raiano

There's no slug in my example…
If you see any issue feel free to open an issue or PR on GitHub: github.com/i18next/next-13-app-dir...

Collapse
 
anilbms75 profile image
ANIL KUMAR • Edited

@adrai tried and works fine -

Collapse
 
hamzakhuswan profile image
HamzaKhuswan

How did you solve the issue?

Collapse
 
aungmyatmoe profile image
Aung Myat Moe

You should use lang or locale in product ready products instead of lng. lng means what?

Collapse
 
adrai profile image
Adriano Raiano

used lng because also i18next uses it as option name: i18next.com/overview/configuration...

Collapse
 
paulghc051080 profile image
Paul GH Cheung

Do you have an example of how to use dynamic routes? I had an error when I created the dynamic page folder 'Server Error
Error: A required parameter (name) was not provided as a string in generateStaticParams for /[lng]/[name]

This error happened while generating the page. Any console logs will be displayed in the terminal window.' thanks

Collapse
 
adrai profile image
Adriano Raiano
Collapse
 
omorsh profile image
omor shahriar

Great post, just one query. Say, the site user is in some deeply nested route. And I want the functionality to change that route to other language, not routing them to main index like it's doing here. How could that be implemented?

Collapse
 
adrai profile image
Adriano Raiano
Collapse
 
alexandre46 profile image
Alexandre Abreu

Awesome eg. with new App Router approach.

Much appreciated! 🎉

Collapse
 
bejaranotech profile image
bejarano-tech

Great job, awesome post.!!

I have a issue that is because i want that the / path to be responded by the fallback language, example /enterprises to be responded by /en-US/enterprises. Do you know how i can accomplish that?

Collapse
 
sngazm profile image
Azuma Shingo

Has anyone else done this with @next/font?

It have stopped loading the fonts in my environment without any errors. The generated class name is assigned a font family with a name like '__Noto_Sans_JP_Fallback_d2549e', which seems to fail to provide a font. Because it says Fallback.

I'm wondering if perhaps it is the redirect settings that are not serving the fonts properly on the server side...

Collapse
 
sngazm profile image
Azuma Shingo

Sorry... I deleted .next and node_modules and restarted, then it works fine.

Collapse
 
vitya_obolonsky profile image
viktor_k

how i can get nested translate object for example : { data: { title: 'test', data2: { title: 'test'} } }

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Lots of typing issues when going to Typescript

Collapse
 
adrai profile image
Adriano Raiano
Collapse
 
marchitecht profile image
marchitecht

Why do you use both Clint and server side components for i18n in app directory? Isn’t it enough to have one of them?

Collapse
 
adrai profile image
Adriano Raiano

if you don‘t use client pages, you need only the server side option

Collapse
 
madly0894 profile image
Vugar Yusifli • Edited

Hi. Thanks, good tutorial. It would be cool to create a new post with backend (i18next-http-backend).