Next.js SSG

With Next.js, you can pre-render your page using Static Generation (SSG) . Your pages will be generated at build time and statically served to visitors. It can also be cached by a CDN to maximize the performance.

This is supported by Nextra too. Here’s an example:

🏆

Nextra has 12011 stars on GitHub!

Last repository update 12/20/2024.

The number above was generated at build time via MDX server components. With Incremental Static Regeneration enabled, it will be kept up to date.

Here’s the MDX code for the example above:

MDX


{/* Via async components */}
export async function Stars() {
  const response = await fetch('https://api.github.com/repos/shuding/nextra')
  const repo = await response.json()
  const stars = repo.stargazers_count
  return <b>{stars}</b>
}
 
{/* Via async functions */}
export async function getUpdatedAt() {
  const response = await fetch('https://api.github.com/repos/shuding/nextra')
  const repo = await response.json()
  const updatedAt = repo.updated_at
  return new Date(updatedAt).toLocaleDateString()
}
 
<Callout emoji="🏆">
  Nextra has <Stars /> stars on GitHub!
 
  Last repository update _{await getUpdatedAt()}_.
</Callout>