Next.js Framework

Next.js i18n for App Router

Add internationalization to your Next.js app. Full App Router support with Server Components. Works with next-intl, next-i18next, and built-in routing.

Quick Start

1. Install packages

$ npm install @intlpullhq/next next-intl

2. Initialize with Next.js

$ npx @intlpullhq/cli init --framework nextjs

3. Add to your layout

// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl';

export default async function LocaleLayout({
  children,
  params: { locale }
}) {
  const messages = await getMessages(locale);
  return (
    <NextIntlClientProvider messages={messages}>
      {children}
    </NextIntlClientProvider>
  );
}

Server Components Support

Server Component

// app/[locale]/page.tsx
import { getTranslations } from 'next-intl/server';

export default async function Page() {
  const t = await getTranslations('Home');

  return (
    <h1>{t('title')}</h1>
  );
}

Client Component

'use client';
import { useTranslation } from '@/hooks/useTranslation';

export function Button() {
  const { t } = useTranslation('Common');

  return (
    <button>{t('submit')}</button>
  );
}

Features

App Router Ready

Full support for Next.js 13+ App Router with Server Components.

next-intl Support

First-class integration with next-intl for type-safe translations.

Vercel Deploy

Automatic sync on Vercel deployments. Zero config required.

AI Translations

Get instant AI translations with React Server Component context.

Routing Strategies

Sub-path

/en/about, /fr/about

Domain

en.example.com, fr.example.com

Detect from cookie

Header

Accept-Language header

Why Next.js Developers Choose IntlPull

Works with App Router and Pages Router

Server Component translation support

Automatic locale detection and routing

SEO-optimized with hreflang tags

Static generation with all locales

Middleware-based locale detection

Ready to Add i18n?

Start internationalizing your Next.js app in minutes.