At Next.js Conf, the Vercel team announced Next.js 13 which introduced the new app directory.
It includes support for Layouts, Server Components, ...
For further actions, you may consider blocking this person and/or reporting abuse
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
i18nand 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.
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.
Good for you and Angular
What if I want to make the root path as default language like this:
http://localhost:3000==> will beenwithout showing the/enprefix because it's the default language.http://localhost:3000/frit will translate tofrHow can I achieve this?
great post! i need same as you, i think its a custom route in middleware.js, did you resolve it?
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?
You may need to adapt the middleware
Thanks for your answer, indeed, I had to adapt the middleware, now I was able to implement it without any problem. Thank you!
Nice post! Awesome! I follow the code but I had problems to implement a typescript version. Any ideia?
github.com/i18next/next-13-app-dir...
Fantastic, thank you
Really awesome, now I can remove my tslint-ignore. Thanks!
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."
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...
@adrai tried and works fine -
How did you solve the issue?
You should use
langorlocalein product ready products instead oflng.lngmeans what?used lng because also i18next uses it as option name: i18next.com/overview/configuration...
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
github.com/i18next/next-i18next/di...
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?
github.com/i18next/next-13-app-dir...
Awesome eg. with new App Router approach.
Much appreciated! 🎉
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?
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...
Sorry... I deleted .next and node_modules and restarted, then it works fine.
how i can get nested translate object for example : { data: { title: 'test', data2: { title: 'test'} } }
Lots of typing issues when going to Typescript
github.com/i18next/next-13-app-dir...
Why do you use both Clint and server side components for i18n in app directory? Isn’t it enough to have one of them?
if you don‘t use client pages, you need only the server side option
Hi. Thanks, good tutorial. It would be cool to create a new post with backend (i18next-http-backend).