Static Site Generation

Overview

This guide will show you how to setup your i18n app to support static site generation.

What is static site generation?

Static site generation (SSG) is a feature of Next.js that allows you to generate static pages at build time. This is useful for performance and SEO.

SSG for the app router

Requirements

There are a few requirements to enable static site generation for your i18n app. Depending on whether you are using the app or pages directory, the requirements are slightly different.

1. Your app must be using the Next.js app router.
2. Your app must support i18n routing (see i18n routing)
3. Your app must be using local translations (see local translations)

Steps

import { GTProvider } from 'gt-next';

import { loadTranslations } from '@/i18n/loadTranslations';
import { GTProvider } from 'gt-next';
 
export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  return (
    <GTProvider loadTranslations={loadTranslations} locale={locale}>
      {children}
    </GTProvider>
  )
}

import { useGT } from 'gt-next/client';
import { T } from 'gt-next/client';

Make sure you have configured your Next.js app to use the getStaticParams function correctly!

That's it! Your app should now support static site generation for multiple languages!

SSG for the pages router

🚧 This section is currently under construction. 🚧