Member-only story
The Ultimate Guide to Internationalization with the All-New Next.js 13
In this article we are going to talk about internationalization with Next.js 13 and how to use it in your app directory based project. You can find the source code of the project here.
Why this article?
I feel like while there are some posts about internationalization with Next.js, no post really addresses the common pitfalls you are going to face due to the new architecture, henceforth I decided to write this behemoth guide.
What is internationalization?
Internationalization is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes. It is sometimes abbreviated as i18n (where 18 stands for the number of letters between the first i and the last n in the word internationalization).
What has changed in Next.js 13 regarding internationalization?
Next.js 13 introduced many changes regarding the routing and the way we can handle the routing in our Next.js apps like parallel routes, route groups and many more. While the pages directory has really amazing support for internationalization out of the box, the app directory is not yet on-par with it.
What we will create in this project
- You will create a client side hook and server utility that will help you to easily separate your translations in multiple files and load them on demand.
- We are going to implement a middleware with a couple of strategies to resolve the desired language of the user. The middleware will be used to set the language of the user and to redirect the user to the correct language version of the page.
And of course this setup can be re-used as template for any other Next.js 13 app directory project that you want to internationalize.
Building your project
First we need to create a new Next.js 13 project with the following command:
yarn create next-app nextjs13-appdir-i18n
