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. In the Next.js App Router, you can fetch data directly in your MDX pages, which are React Server Components.

The number above was generated at build time. With Incremental Static Regeneration  configured via the revalidate option in fetch, it will be kept up to date.

Here’s the MDX code for the example above:

export const Stars = async () => {
  const { stargazers_count: stars } = await fetch(
    `https://api.github.com/repos/shuding/nextra`,
    { next: { revalidate: 60 } }
  ).then((res) => res.json())
  return <strong>{stars}</strong>
}
 
<div className="p-4 border border-gray-200 dark:border-gray-900 rounded mt-6">
  Nextra has <Stars /> stars on GitHub!
</div>