Documentation
Static Rendering

Static Rendering

Next.js App Router supports Static Rendering (opens in a new tab), meaning your pages will be rendered at build time and can then be served statically from CDNs, resulting in faster TTFB.

Static Rendering

Export getStaticParams from createI18nServer:

// locales/server.ts
export const {
  getStaticParams,
  ...
} = createI18nServer({
  ...
})

Inside all pages that you want to be statically rendered, call this setStaticParamsLocale function by giving it the locale page param:

// app/[locale]/page.tsx and any other page
import { setStaticParamsLocale } from 'next-international/server'
 
export default function Page({ params: { locale } }: { params: { locale: string } }) {
  setStaticParamsLocale(locale)
 
  return (
    ...
  )
}

And export a new generateStaticParams function. If all your pages should be rendered statically, you can also move this to the root layout:

// app/[locale]/page.tsx and any other page, or in the root layout
import { getStaticParams } from '../../locales/server'
 
export function generateStaticParams() {
  return getStaticParams()
}

Static Export with output: 'export'

You can also export your Next.js application to be completely static using output: 'export' (opens in a new tab) inside your next.config.js. Note that this will disable many features (opens in a new tab) of Next.js


MIT 2024 © next-international contributors.