Built to make you extraordinarily productive, i18.dev is the best way to localize.

npm install next-intl

I18DEV_API_KEY=your-project-api-key
I18DEV_BASE_URL=https://i18-dev-sass.vercel.app/
I18DEV_MESSAGES_PATH=messages

// pull-translations.js - For next-intl
const fs = require('fs');
const path = require('path');
const https = require('https');

const BASE_URL = process.env.I18DEV_BASE_URL || 'https://i18.dev';
const API_KEY = process.env.I18DEV_API_KEY || 'your-project-api-key';
const MESSAGES_PATH = process.env.I18DEV_MESSAGES_PATH || 'messages';

const API_URL = `${BASE_URL}/api/download-translations?projectId=${API_KEY}`;
const MESSAGES_DIR = path.join(__dirname, '..', MESSAGES_PATH);

async function fetchTranslations() {
  return new Promise((resolve, reject) => {
    const req = https.get(API_URL, (res) => {
      let data = '';
      res.on('data', (chunk) => { data += chunk; });
      res.on('end', () => {
        try {
          resolve(JSON.parse(data));
        } catch (error) {
          reject(new Error(`Failed to parse JSON: ${error.message}`));
        }
      });
    });
    req.on('error', reject);
    req.setTimeout(10000, () => { req.destroy(); reject(new Error('Timeout')); });
  });
}

function ensureDir(dirPath) {
  if (!fs.existsSync(dirPath)) fs.mkdirSync(dirPath, { recursive: true });
}

function updateMessageFiles(translations) {
  ensureDir(MESSAGES_DIR);
  
  Object.entries(translations).forEach(([locale, content]) => {
    const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
    fs.writeFileSync(filePath, JSON.stringify(content, null, 2));
    console.log(`✅ Updated ${locale}.json`);
  });
}

async function main() {
  console.log('🔄 Fetching translations...');
  const translations = await fetchTranslations();
  console.log('📝 Updating files...');
  updateMessageFiles(translations);
  console.log('✨ Done!');
}

main().catch(console.error);

// i18n.ts
import {notFound} from 'next/navigation';
import {getRequestConfig} from 'next-intl/server';

const locales = ['en', 'es', 'fr'];

export default getRequestConfig(async ({locale}) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

// In your component
import {useTranslations} from 'next-intl';

export default function MyComponent() {
  const t = useTranslations('common');
  
  return <h1>{t('hello')}</h1>;
}