# gt-next: General Translation Next.js SDK: Next.js Quickstart
URL: https://generaltranslation.com/en-US/docs/next.mdx
---
title: Next.js Quickstart
description: Add multiple languages to your Next.js app in under 10 minutes
---
By the end of this guide, your Next.js app will display content in multiple languages, with a language switcher your users can interact with.
**Prerequisites:**
- A Next.js app using the **App Router** (Next.js 13+)
- Node.js 18+
**Want automatic setup?** Run `npx gt@latest` to configure everything with the [Setup Wizard](/docs/cli/init). This guide covers manual setup.
---
## Step 1: Install the packages
`gt-next` is the library that powers translations in your app. `gt` is the CLI tool that prepares translations for production.
```bash
npm i gt-next
npm i -D gt
```
```bash
yarn add gt-next
yarn add --dev gt
```
```bash
bun add gt-next
bun add --dev gt
```
```bash
pnpm add gt-next
pnpm add --save-dev gt
```
---
## Step 2: Configure your Next.js config
`gt-next` uses a Next.js plugin called **`withGTConfig`** to set up internationalization at build time. Wrap your existing Next.js config with it:
```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {};
export default withGTConfig(nextConfig);
```
This plugin reads your translation settings and wires everything together behind the scenes. No other changes to your Next.js config are needed.
---
## Step 3: Create a translation config file
Create a **`gt.config.json`** file in your project root. This tells the library which languages you support:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
- **`defaultLocale`** — the language your app is written in (your source language).
- **`locales`** — the languages you want to translate into. Pick any from the [supported locales list](/docs/platform/supported-locales).
- **`files.gt.output`** — where the CLI saves translation files. `[locale]` is replaced with each language code (e.g., `public/_gt/es.json`).
Add `public/_gt/` to your **`.gitignore`** — these files are generated, not hand-written:
```txt title=".gitignore"
public/_gt/
```
---
## Step 4: Add the GTProvider to your layout
The **`GTProvider`** component gives your entire app access to translations. It must wrap your app at the root layout level:
```tsx title="app/layout.tsx"
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`GTProvider` is a **server component** — it loads translations on the server and passes them down to your client components.
---
## Step 5: Mark content for translation
Now, wrap any text you want translated with the **``** component. `` stands for "translate":
```tsx title="app/page.tsx"
import { T } from 'gt-next';
export default function Home() {
return (
Welcome to my app
This content will be translated automatically.
);
}
```
You can wrap as much or as little JSX as you want inside ``. Everything inside it — text, nested elements, even formatting — gets translated as a unit.
---
## Step 6: Add a language switcher
Drop in a **``** so users can change languages:
```tsx title="app/page.tsx"
import { T, LocaleSelector } from 'gt-next';
export default function Home() {
return (