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 12169 stars on GitHub!

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

Here’s the MDX code for the example above:

MDX

import { useData } from 'nextra/hooks'
 
export function getStaticProps() {
  return fetch('https://api.github.com/repos/shuding/nextra')
    .then(res => res.json())
    .then(repo => ({
      props: {
        // We add an `ssg` field to the page props,
        // which will be provided to the Nextra `useData` hook.
        ssg: {
          stars: repo.stargazers_count
        }
      },
      // The page will be considered as stale and regenerated every 60 seconds.
      revalidate: 60
    }))
}
 
export function Stars() {
  // Get the data from SSG, and render it as a component.
  const { stars } = useData()
  return <strong>{stars}</strong>
}
 
Nextra has <Stars /> stars on GitHub!

Organize Files Steps