next-create-app

gt-next + Create Next.js App Example

This is an example project showcasing a multilingual Next.js App using gt-next.

See it live here.

Change your browser language to see the translations in action.

• Chrome
• Firefox
• Safari
• Edge

Deploy to Vercel

One-click deploy to Vercel:

Everything works out of the box!

Docs

See the docs for more information on how to use gt-next with Next.js.

Cloning

To clone this example and see it in action yourself, follow the following steps:

1. Run

git clone https://github.com/generaltranslation/gt.git
cd gt-libraries/examples/next-create-app
npm install

2. (Optional) Create a .local.env file and populate it with GT_PROJECT_ID and GT_API_KEY, obtainable via the GT Dashboard here

   • This example comes with translations for French, Spanish, and Chinese out of the box, but if you want to experiment with other locales or modify some content, you'll need to add your own API keys.

3. Run npm run dev

Step by Step Setup

Here is a list of steps done to reach this repo state:

1. npx create-next-app@latest
2. npm install gt-next gtx-cli
3. npx gtx-cli setup && npx-gtx-cli init
   • Setup will automatically add the <T> components to your app.
   • When calling init specify "remote" as the location of your language files and en, zh, and fr as your locales.
4. Add locales to the next.config.ts file:

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['en-US', 'fr', 'es', 'zh'],
});

6. (optional) Create a .local.env file and populate it with GT_PROJECT_ID and GT_API_KEY.
   • These environment variables are needed for local translations during development. The GT_API_KEY should be a development API key. A separate production API Key is needed for subsequent steps when deploying to production.
7. npm run dev

To deploy this app to production:

1. Add GT_PROJECT_ID and GT_API_KEY to your .env.local file
   • The GT_API_KEY should be a production API key.
2. Add npx gtx-cli translate to your build step before the build command.
3. Deploy to Vercel / Render / etc..

Local Translations

This repo is setup to use local translations in production.

If you are following the step-by-step guide, you will also need to follow these steps to use local translations. If you omit these steps, your production app will use the GT CDN for translation files.

1. Add a loadTranslations.ts file under ./src with the following content:

export default async function loadTranslations(locale: string) {
  const t = await import(`../public/_gt/${locale}.json`);
  return t.default;
}

2. Instead of running the command in Step 2 above, run:

• When calling init specify "local" as the location of your language files and en, zh, and fr as your locales

npx gtx-cli translate

For more information on local translation, check out our guide on local translation.