Speedrun Next.js
Let’s speedrun creating a new app and internationalising it with GT.
Overview
In this guide, we’ll cover two things:
- Creating a new Next.js app
- Internationalising it with General Translation
Altogether, 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 a directory of your choice in the terminal and run the following command:
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dirA setup wizard will appear; you can simply 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
npm i gtx-cliStep 3: Add your environment variables.
Go to the Dashboard.
Open the Dev API Keys page in the navigation 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 set up your codebase for translation.
npx gtx-cli setupStep 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.
import { GTProvider, getLocale } from "gt-next";
...
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const locale = await getLocale();
return (
<html lang={locale}> // [!code highlight]
<GTProvider>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</GTProvider>
</html>
);
}Step 6: Start your app
Your app is internationalised! 🎉 Let’s test it!
Let’s change your browser’s language settings.
Start your Next.js app.
npm run devOpen your app in your preferred browser (usually at http://localhost:3000). If you’ve set everything up correctly, you should see your app in the language set in your browser.
Troubleshooting
Notes
- Translate arbitrary JSX with the
<T>component. - If translation isn’t 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.
How is this guide?