​
Prerequisites

Quetzal can be used to translate Next.js which use the next-intl framework.

​
Installing Quetzal

Install
npm install --save @quetzallabs/i18n-next @quetzallabs/i18n-core

​
Setting Up

After installing the package, some additional setup is required.

1

Run Setup Script

Run npx quetzal-setup in the directory you installed the Quetzal package

2

Set API Key

Set the environment variable QUETZAL_API_KEY to your Quetzal API Key. Your API Key can be found on your project dashboard

3

Update quetzal.config.json

The setup script should have created this for you. Update paths so that it points to the directories with the code you plan to localize. Update parser to i18next-parser

Example quetzal.config.json
{
  "paths": ["src/**/*.{js,tsx}"],
  "parser": "i18next-parser"
}
4

Set Up next-intl provider

Quetzal uses the next-intl package to inject translations in your app, and so your app needs to use the NextIntlClientProvider

This will look something like:


import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";

const messages = await getMessages();

...

return (

<html>
    <body>
        <NextIntlClientProvider messages={messages}>
            {children}
        </NextIntlClientProvider>
    </body>
</html>

);

More detail on this provider can be found in the next-intl docs.

5

Set up next-intl plugin

Your app also needs to add the NextIntlPlugin from next-intl into your next.config file.

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

More detail on this plugin can be found in the next-intl docs.

​
And you’re done!

Setup should be complete, and you can start translating your app.

​
Verify Your Installation

Run npx quetzal-process-translations to test out your installation.

If your output looks similar to the one above, then Quetzal has been installed properly and your app will begin to support other languages!

If there are errors, hopefully the error is clear and can be remedied. If not, contact us and we can get your installation working.

Note: This script will fail if you have not marked any text in your app for translation. So, you may have to start translating your app first

Quetzal is designed to integrate seamlessly into your build process. So, this script should be run whenever a build is made at a minimum, but it could run as often as you like.

The setup script should have added npx quetzal-process-translations to the pre-build script in your project’s package.json, but this can be modified.

Project DashboardReact