Speedrun Next.js

Overview

In this guide, we'll go over two things:

Creating a new Next.js app
Internationalizing it with General Translation

In total, this should take less than 10 minutes.

Prerequisites

We assume that you either have experience using React in some capacity and are familiar with Typescript.

Step 1: Create a new Next.js app

First, navigate to the directory of your choice in terminal and run the following command:

npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir

A set up wizard will appear, you can just select the default value for each option.

Step 2: Install the libraries

Navigate to your Next.js project's root directory and run:

cd next-quickstart
npm i gt-next gt-react-cli

Step 3: Add your environment variables.

Navigate to your GT Dashboard. Go to the Dev Api Keys page on the nav bar and create a new API key and Project ID. Then add them to your .env file.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Step 4: Run the CLI tool

Run the CLI tool to setup your codebase for translation.

npx gt-cli setup

Step 5: Modify the root layout

Modify the lang prop in the <html> tag in the src/app/layout.tsx file.

It should use await getLocale() to get the current locale.

src/app/layout.tsx

import { GTProvider, getLocale } from "gt-next"; 
...
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale(); 
  return (
    <html lang={locale}>
      <GTProvider>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
        {children}
        </body>
      </GTProvider>
    </html>
  );
}

Step 6: Start your app

Your app is internationalized! 🎉 Let's test it!

Let's change your browser's language settings.

Change your language in Chrome
Change your language in Firefox
Change your language in Edge

Start your Next.js app.

npm run dev

Open up your app in your preferred browser (usually at http://localhost:3000). If you have set up everything correctly, you should see your app in the language you set in your browser.

Troubleshooting

Notes

Translate arbitrary jsx with the <T> component.
If translation is not working when you change your language, check your browser's cookies.

Next steps

Star our GitHub repo gt-next.
Set up Right to Left language support.
Try a more advanced example.

Speedrun Next.js

My app's language is not changing, even though I've changed my browser's language.

On this page