Next.js Quickstart (5m)
Internationalize your Next.js App in 5 minutes with General Translation
Overview
This guide describes how to internationalize an existing Next.js project that uses the App Router.
For a project using the Pages Router, follow the React docs.
We will cover 4 simple steps:
Installing gt-next
and gt-next-cli
Select languages
Add the <T>
component
Add your environment variables
This entire process should take under 5 minutes.
Are you using the Next.js pages router? Follow the React Quickstart guide instead.
Setup
1. Install libraries
Install the gt-next and gt-next-cli libraries.
2. Add the withGTConfig()
plugin
Add withGTConfig()
to your next.config.js
file.
You can specify the languages you want to support by passing an array of locale codes.
3. Add the <T>
component
Wrap any nested JSX content in the <T>
component to make it translatable.
For more information, check out the guide on using <T>
components.
Use the <Var>
component to designate JSX content that should not be translated.
Tip:
To save time, run the setup command.
This will scan your codebase for translatable JSX and insert the <T>
tags for you.
For strings, you can use useGT()
or getGT()
for translation.
For more information, check out this guide.
4. Add your environment variables
Add your API key and Project ID to your local environment.
Navigate to the Dashboard. Go to the Developer Keys page in the sidebar.
Click Create Dev API Key.
Add the Project ID and Development API key to your environment.
Protect Your API Keys!
Development keys should only ever be used in development. Likewise, production keys should only ever be used in production. Never commit your API keys to a public repository!
Let's Try It Out!
Congratulations! 🥳 Your app is now multilingual! Let's see it in action.
See Your App in a Different Language
Start by changing your preferred browser's language settings. This will change which language is displayed.
Start your Next.js app in development mode.
Open up your app in your preferred browser (usually at http://localhost:3000). If you want to switch languages, just select a different language in your browser settings and refresh the page.
Troubleshooting
Shipping to Production
Follow our guide on shipping to production.
Next steps
- See our Next.js API reference for detailed information about the
<T>
component and other available components. - Improve your content with
<Num>
,<Currency>
,<Branch>
, and<Plural>
components. - Learn how to improve SEO with i18n routing (adding routes for each locale, e.g.
example.com/en
,example.com/fr
) - Mirror your app to support right-to-left languages such as Arabic and Hebrew.
- Create a list of approved languages for your app with the Next.js plugin.