# General Translation React SDKs (gt-react, gt-next, gt-react-native): Pages Router static site generation
URL: https://generaltranslation.com/en-US/docs/react/nextjs/pages-router-static-site-generation.mdx
---

title: Pages Router static site generation
description: How to pre-render localized Next.js Pages Router pages with General Translation.
related:
  links:
    - /docs/react/nextjs/pages-router-middleware
    - /docs/react/guides/storing-translations
    - /docs/react/guides/managing-locales
    - /docs/react/guides/migrating-i18n-libraries

---

Pre-render localized Pages Router pages with `withGTStaticProps`. The setup mirrors `withGTServerSideProps`, but Next.js generates the props at build time.

## Configure locale routing [#config]

Next.js must know every locale at build time so it can generate one version of each page per locale. Import the values from `gt.config.json`; its `locales` array must include `defaultLocale`:

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { withGTConfig } from 'gt-next/config';
import gtConfig from './gt.config.json';

const nextConfig: NextConfig = {
  i18n: {
    locales: gtConfig.locales,
    defaultLocale: gtConfig.defaultLocale,
  },
};

export default withGTConfig(nextConfig);
```

Keep pages in their normal locations. Next.js internationalized routing generates localized URLs without a `pages/[locale]` segment. See [Pages Router locale routing](/docs/react/nextjs/pages-router-middleware) for the complete setup.

## Add static props [#static-props]

Wrap each page's `getStaticProps` function with `withGTStaticProps`:

```tsx title="pages/about.tsx"
import type { GetStaticProps } from 'next';
import { T, Var, withGTStaticProps } from 'gt-next';

type AboutPageProps = {
  generatedAt: string;
};

export const getStaticProps: GetStaticProps<AboutPageProps> =
  withGTStaticProps(async () => ({
    props: {
      generatedAt: new Date().toISOString(),
    },
  }));

export default function AboutPage({ generatedAt }: AboutPageProps) {
  return <T>Generated at: <Var>{generatedAt}</Var></T>;
}
```

`withGTStaticProps` adds the locale and translation snapshot to the returned page props. If the page has no other props, use the no-argument form:

```tsx title="pages/index.tsx"
import { withGTStaticProps } from 'gt-next';

export const getStaticProps = withGTStaticProps();
```

Next.js calls `getStaticProps` once for each configured locale and supplies `context.locale`. Pass the generated values to [`GTProvider`](/docs/react/reference/components/gt-provider) and [connect locale changes](/docs/react/nextjs/pages-router-middleware#locale-changes) in `_app.tsx`.

## Handle dynamic results [#dynamic-results]

The wrapper preserves `redirect` and `notFound` results from your `getStaticProps` function. It only loads translations when the result contains `props`.

```tsx title="pages/products/[id].tsx"
import { withGTStaticProps } from 'gt-next';

export const getStaticProps = withGTStaticProps(async ({ params }) => {
  const product = await loadProduct(params?.id);

  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product },
    revalidate: 3600,
  };
});
```

Dynamic Pages Router routes still need `getStaticPaths`. Return each path once for every locale you want to pre-render:

```tsx title="pages/products/[id].tsx"
import type { GetStaticPaths } from 'next';

export const getStaticPaths: GetStaticPaths = async ({ locales = [] }) => {
  const products = await loadProducts();

  return {
    paths: products.flatMap((product) =>
      locales.map((locale) => ({
        params: { id: product.id },
        locale,
      }))
    ),
    fallback: 'blocking',
  };
};
```

If a path omits `locale`, Next.js generates only the default-locale version of that path.

## Recover from build failures [#build-failures]

### The locale cannot be determined

`withGTStaticProps` throws when Next.js supplies neither `context.locale` nor `context.defaultLocale`. Add `i18n.locales` and `i18n.defaultLocale` to `next.config.ts`, and keep them aligned with `gt.config.json`.

Do not use [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) as a replacement for Pages Router `i18n` configuration. Middleware does not provide the build-time locale passed to `getStaticProps`.

### The default locale renders untranslated

The default locale intentionally receives an empty translation snapshot because the source content is already present in the page. Other locales load their generated translation snapshot.

If a target locale also renders source content, confirm that [`npx gt translate`](/docs/cli/reference/commands/translate) ran before `next build` and that the locale exists in both Next.js and General Translation configuration.

### The helper throws in an App Router file

`withGTStaticProps` is a Pages Router API. Use `generateStaticParams` and the [App Router static generation setup](/docs/react/nextjs/app-router-static-site-generation) under `app/`.

### Static export rejects locale routing

Next.js Pages Router `i18n` configuration does not support `output: 'export'`. Deploy the generated pages through a Next.js server or platform adapter, or move to App Router routes that generate an explicit `[locale]` parameter.

## Next steps

- /docs/react/nextjs/pages-router-middleware
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales
- /docs/react/guides/migrating-i18n-libraries