DEV Community

Cover image for How to Translate Your Next.js App with React Intl + i18.dev (In Under 1 Minute)
Sachintha Kodagoda
Sachintha Kodagoda

Posted on

How to Translate Your Next.js App with React Intl + i18.dev (In Under 1 Minute)

#nextjs #react #internalization #ai

You already built your app in Next.js with React. Now make it multilingual.

Here's the exact workflow to go from single-language to fully translated using i18.dev's intelligent prompt system — no documentation rabbit holes, no per-word fees, no legacy TMS overhead.

Step 1: Set Up Your i18.dev Project (30 seconds)

  1. Go to i18.dev and sign in (or create a free account).

  2. Aceess to Dashboard.

Free tier includes: 100 stored strings, 25K in / 10K out LLM tokens, 20 team members, unlimited languages.

Step 2: Get Your Environment Variables

From your i18.dev dashboard page:

  1. Click "Quick Setup" to open the getting-started guide.

  2. Click "Create Project + PAT" if you haven't already. This will create new project and Personal Access Token.

  3. Copy your environment variables to your .env, .env.local:

I18DEV_API_KEY=your_api_key_here
I18DEV_PAT_TOKEN=your_pat_token_here
Enter fullscreen mode Exit fullscreen mode
  1. Add them to your Next.js project:

The i18dev CLI auto-loads .env, .env.local, .env.development, and .env.production. No extra configuration needed.

Step 3: Copy the Prompts from i18.dev (30 seconds)

On the i18.dev quickstart page, select react-intl as your i18n library. Two prompts appear:

Prompt 1: "01-Setup Prompt"

Click Copy. Paste it into Cursor, Claude, Codex, or any AI editor connected to your repo.

This prompt tells your AI agent to:

  • Install and configure react-intl + i18dev-cli
  • Scan your repo to detect your framework, package manager, and source structure
  • Find your header/layout and add a language switch component
  • Configure i18dev.config.cjs so i18dev pull writes files to src/lang/{locale}.json
  • Create an i18dev-readme.md file in your project for future reference

Your agent runs commands like:

# Install i18dev CLI
npm install --save-dev i18dev-cli

# Initialize configuration
npx i18dev init --framework react-intl

# Verify setup
npx i18dev status
Enter fullscreen mode Exit fullscreen mode

Prompt 2: "02-Localize a Page or Component"

Click Copy. Paste it into your AI editor and specify your target:

Target: app/page.tsx
Enter fullscreen mode Exit fullscreen mode

This prompt tells your agent to:

  • Find all user-facing strings in the selected file
  • Replace them with react-intl translation calls (FormattedMessage, useIntl)
  • Push new locale strings to the i18.dev dashboard automatically

Your agent runs:

# Extract strings and push to i18.dev
npx i18dev extract --write
npx i18dev push
Enter fullscreen mode Exit fullscreen mode

Here is your section extended with the additional information you requested:

Prompt 2: "02-Localize a Page or Component"

Click Copy. Paste it into your AI editor and specify your target:

Target: app/page.tsx
Enter fullscreen mode Exit fullscreen mode

This prompt tells your agent to:

  • Find all user-facing strings in the selected file
  • Replace them with react-intl translation calls (FormattedMessage, useIntl)
  • Push new locale strings to the i18.dev dashboard automatically

Your agent runs:

# Extract strings and push to i18.dev
npx i18dev extract --write
npx i18dev push
Enter fullscreen mode Exit fullscreen mode

What Happens After You Push

Once the push completes:

  1. i18.dev automatically creates a new namespace for your page or component (e.g., page.home, checkout.form)

  2. Your translations appear in the project language view — each string is listed with:

    • Source language (original English)
    • Target translations (auto-generated by AI)
    • Status (pending review / approved)

  3. Refresh the i18.dev dashboard to see the latest strings and translations populate in real time

  4. Review and approve translations directly in the dashboard, or invite team members to refine them

💡 Pro Tip: Each time you run npx i18dev push, i18.dev detects new strings, updated strings, and removed strings — updating your dashboard automatically. No manual CSV uploads. No copy-pasting JSON files.

Step 4: Add a New Language

Once your strings are pushed to i18.dev:

  1. Open your i18.dev dashboard.

  2. Go to your project.

  3. Click "Add Language" from the left sidebar.

  4. Select the language you want (e.g., Spanish, French, German, Japanese).

i18.dev's AI automatically translates all your strings instantly.

Review and approve the translations (or invite a translator to refine).

The Smart Part: Auto-Generated Prompts

As soon as you add a language, a notification appears in the top-right corner:

"New language added — Copy prompt"

Click "Copy prompt" — i18.dev has already written the exact prompt you need. Paste it into your AI editor. Done.

No manual prompt writing. No guessing. i18.dev knows you just added Japanese, so it generates the precise prompt to:

  • Pull ja.json via i18dev pull
  • Wire it into your app's IntlProvider
  • Update the language switcher list 
# Pull the new translations
npx i18dev pull

# Verify
npx i18dev status
Enter fullscreen mode Exit fullscreen mode

Step 5: Prompts on Demand

Instead of requiring hours of documentation reading, i18.dev is designed with an AI-first workflow — delivering a significantly better user experience. Whenever you need a prompt, simply click the mini sidebar Prompts button in the i18.dev project view. It provides ready-made prompts for your for your daily tasks.

  • Setup prompts — for new developers joining the project
  • Localization prompts — to translate new pages or components
  • Sync prompts — to pull confirmed translations into your repo
  • One shot prompt — one-prompt to localize project at once ( Recommend only to run this on paid plan )

and more ...

Examples of what the sidebar generates:

"You confirmed 12 checkout strings in Japanese. Pull them into your repo."

Copy. Paste. Run.

Why i18.dev + React Intl for Next.js?

Legacy TMS i18.dev
Read docs for 2 hours Copy a prompt, paste, done
Per-word translation fees LLM tokens included in your plan
Seat-based pricing 20 team members free
Manual string extraction i18dev extract scans your codebase
Browser-based file uploads CLI: i18dev push / i18dev pull
Vendor lock-in Works with react-intl, next-intl, i18next, vue-i18n, and more

Key i18.dev CLI Commands 

# Setup and configuration
npx i18dev init --framework react-intl    # Create i18dev.config.cjs
npx i18dev setup                          # Scan repo, suggest config

# Translation workflow
npx i18dev extract --write                # Extract strings from code
npx i18dev push                           # Push strings to i18.dev dashboard
npx i18dev pull                           # Pull translations into your repo
npx i18dev pull --confirmed               # Only pull reviewed translations
Enter fullscreen mode Exit fullscreen mode

Content-Aware Localization

i18.dev doesn't just translate words — it adapts to context:

  • Checkout CTAs → natural call-to-action phrasing per locale
  • Error messages → culturally appropriate tone
  • Onboarding flows → region-aware user experience

Reference: React Intl in Next.js

After i18.dev sets up your project, here's how you use react-intl in your components:

Server Components 

// app/[locale]/page.tsx
import { getMessages } from '@/i18n/server';
import { FormattedMessage } from 'react-intl';

export default async function HomePage() {
  const messages = await getMessages('en');

  return (
    <IntlProvider messages={messages} locale="en">
      <h1>
        <FormattedMessage id="hero.title" defaultMessage="Welcome" />
      </h1>
      <p>
        <FormattedMessage
          id="hero.subtitle"
          defaultMessage="Build faster with our platform"
        />
      </p>
    </IntlProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Client Components 

'use client';

import { useIntl, FormattedMessage } from 'react-intl';

export default function HeroSection() {
  const intl = useIntl();

  return (
    <section>
      <h1>
        <FormattedMessage id="hero.title" defaultMessage="Welcome" />
      </h1>
      <button>
        {intl.formatMessage({ id: 'cta.primary', defaultMessage: 'Get Started' })}
      </button>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Pluralization (ICU MessageFormat) 

<FormattedMessage
  id="cart.itemCount"
  defaultMessage="{count, plural, =0 {No items} one {# item} other {# items}}"
  values={{ count: items.length }}
/>
Enter fullscreen mode Exit fullscreen mode

What i18.dev Creates in Your Repo

After running the setup prompt, your project includes:

my-nextjs-app/
├── src/
│   ├── lang/                     # Translation files (from i18dev pull)
│   │   ├── en.json
│   │   ├── es.json
│   │   └── ja.json
│   ├── components/
│   │   └── LanguageSwitcher.tsx  # Auto-generated language switcher
│   └── i18n/
│       └── provider.tsx          # IntlProvider configuration
├── i18dev.config.cjs             # i18dev CLI configuration
├── i18dev-readme.md              # Project reference for your team
└── .env.local                    # I18DEV_API_KEY + I18DEV_PAT_TOKEN
Enter fullscreen mode Exit fullscreen mode

The i18dev-readme.md file includes:

  • Which i18n library was used and why
  • Where locale files live
  • Required environment variables
  • CLI commands (setup, init, pull, status, push, extract)
  • How the language switcher works
  • Code examples for translating text
  • How to add new languages (with copy-ready prompt)
  • How to add new namespaces (with copy-ready prompt)

Summary

Step Action Time
1 Create i18.dev project + PAT 15 sec
2 Add env vars to your project 15 sec
3 Copy Prompt 1 → paste into AI editor 15 sec
4 Copy Prompt 2 → localize your page 15 sec
Total ~1 minute

After setup, adding a new language is two clicks + one paste. i18.dev writes the prompt for you.

Get Started Free

  • No credit card required
  • 100 stored strings on the free tier
  • 25K in / 10K out LLM tokens/month
  • 20 team members
  • Unlimited languages

Sign up at i18.dev

Stop reading docs. Start shipping multilingual.

Top comments (0)