Usage in Server Components (beta)

npm install next-intl@2.12.0-beta.1

├── messages (1)
│   ├── en.json
│   └── ...
├── i18n.ts (2)
├── next.config.js (3)
├── middleware.ts (4)
└── app
    └── [locale]
        ├── layout.tsx (5)
        └── page.tsx (6)

import {Link} from 'next-intl';
 
// When the user is on `/en`, the link will point to `/en/about`
<Link href="/about">About</Link>
 
// You can override the `locale` to switch to another language
<Link href="/" locale="de">Switch to German</Link>

'use client';
 
import {useRouter} from 'next-intl/client';
 
const router = useRouter();
 
// When the user is on `/en`, the router will navigate to `/en/about`
router.push('/about');

'use client';
 
import {usePathname} from 'next-intl/client';
 
// When the user is on `/en`, this will be `/`
const pathname = usePathname();

import {redirect} from 'next-intl/server';
 
export default async function Profile() {
  const user = await fetchUser();
 
  if (!user) {
    // When the user is on `/en/profile`, this will be `/en/login`
    redirect('/login');
  }
 
  // ...
}

import {useTranslations} from 'next-intl';
import Expandable from './Expandable';
 
export default function FAQ() {
  const t = useTranslations('FAQ');
  return <Expandable title={t('title')}>{t('description')}</Expandable>;
}

'use client';
 
import {useState} from 'react';
 
function Expandable({title, children}) {
  const [expanded, setExpanded] = useState(false);
 
  function onToggle() {
    setExpanded(!expanded);
  }
 
  return (
    <div>
      <button onClick={onToggle}>{title}</button>
      {expanded && <p>{children}</p>}
    </div>
  );
}

import {headers} from 'next/headers';
import {getRequestConfig} from 'next-intl/server';
 
export default getRequestConfig(async ({locale}) => ({
  messages: (await import(`../messages/${locale}.json`)).default,
 
  // You can read from headers or cookies here if necessary
  timeZone: headers().get('x-time-zone') ?? 'Europe/Berlin'
}));

import createIntlMiddleware from 'next-intl/middleware';
 
export default createIntlMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
 
  // If no locale matches, this will be used by default
  defaultLocale: 'en',
 
  // Optionally configure a list of domains where the `defaultLocale` is changed.
  // When a locale has a matching domain, this is preferred to a locale prefix.
  domains: [
    {
      domain: 'example.de',
      defaultLocale: 'de'
    }
  ],
 
  // Sets the `Link` response header to notify search engines about
  // links to the content in other languages (defaults to `true`).
  alternateLinks: true
});
 
export const config = {
  // Skip all paths that aren't pages that you'd like to internationalize.
  // If you use the `public` folder, make sure your static assets are ignored
  // (e.g. by moving them to a shared folder that is referenced here).
  matcher: ['/((?!api|_next|favicon.ico|assets).*)']
};

const withNextIntl = require('next-intl/plugin')();
 
module.exports = withNextIntl({
  experimental: {appDir: true},
  rewrites() {
    return [
      {
        source: '/de/über',
        destination: '/de/about'
      }
    ];
  }
});

import {getTranslations} from 'next-intl/server';
 
export async function generateMetadata() {
  const t = await getTranslations('Metadata');
 
  return {
    title: t('title'),
    description: t('description')
  };
}

import {
  getTranslations, // like `useTranslations`
  getFormatter, // like `useFormatter`
  getLocale, // like `useLocale`
  getNow, // like `useNow`
  getTimeZone // like `useTimeZone`
} from 'next-intl/server';

const ms = require('ms');
const withNextIntl = require('next-intl/plugin')();
 
module.exports = withNextIntl({
  // ... Other config
 
  headers() {
    return [
      {
        // Cache all content pages
        source: '/((?!_next|assets|favicon.ico).*)',
        headers: [
          {
            key: 'Cache-Control',
            value: [
              `s-maxage=` + ms('1d') / 1000,
              `stale-while-revalidate=` + ms('1y') / 1000
            ].join(', ')
          }
        ],
 
        // If you're deploying on a host that doesn't support the `vary` header (e.g. Vercel),
        // make sure to disable caching for prefetch requests for Server Components.
        missing: [
          {
            type: 'header',
            key: 'Next-Router-Prefetch'
          }
        ]
      }
    ];
  }
});