Internationalization with next-translate

Why next-translate?

- Zero config Intl API
- JSON‑based message files
- Automatic locale routes

Setup

npm install next-translate

// i18n.js at root
module.exports = {
locales: ['en', 'es', 'fr'],
defaultLocale: 'en',
pages: {
'*': ['common'],
},
}

In next.config.js

const nextTranslate = require('next-translate')
module.exports = nextTranslate()

Adding Translations

/locales/en/common.json
{
"welcome": "Welcome to CodeWorksLab"
}

// locales/es/common.json
{
"welcome": "Bienvenido a CodeWorksLab"
}

Using in Components

import useTranslation from 'next-translate/useTranslation'
export default function Home() {
const { t } = useTranslation('common')
return <h1>{t('welcome')}</h1>
}

Routing & Pre‑fetching

Next.js auto‑generates /es, /fr pages. Use `<Link href="/" locale="es">` to switch.

Conclusion

next-translate gives you powerful i18n with minimal overhead.