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

title: Pages Router static site generation
description: How to pre-render localised Next.js Pages Router pages with General Translation.
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-middleware
    - /docs/react/guides/storing-translations

---

Pre-render localised 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 usual locations. Next.js internationalised routing generates localised 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`.
## Next steps

- /docs/react/nextjs-pages-router-quickstart
- /docs/react/nextjs/pages-router-middleware
- /docs/react/guides/storing-translations