Framework Adapters

Next.js App Router

Use pico-intl in React Server Components for zero client bundle cost on static text, and in Client Components for interactive locale switching.

import { createServerI18n } from '@pico-intl-dev/next';

export const { getT, resolveLocale } = createServerI18n({
  base: 'en',
  supported: ['en', 'es'],
  loadMessages: async (locale) => (await import(`../locales/${locale}.json`)).default,
});

Key points

• Use createServerI18n() in App Router Server Components.
• Use @pico-intl-dev/next/proxy for Next.js 16+ locale routing.
• Client locale switching should use Link or router.push(); useLocale() exposes locale, dir, and isRTL.

Next step

Copy the example into a small fixture, run the validation commands, and keep framework-specific routing, hydration, or SSR behavior covered by your app tests.