Next.js SSG

С помощью Next.js вы можете предварительно отрисовать свою страницу, используя статическую генерацию (Static Site Generation (SSG) (opens in a new tab)). В этом случае страницы будут сгенерированы во время сборки и статически отображены в браузере.

Для повышения производительности можно кэшировать страницы с помощью CDN. Nextra позволяет это сделать. Вот пример:

У Nextra 11888 звезд на GitHub!

Вышеуказанное число звезд было сгенерировано во время сборки с помощью getStaticProps. При включенной Incremental Static Regeneration (opens in a new tab) это число будет обновляться автоматически.

А это MDX код для вышеописанного примера:

import { useData } from 'nextra/data'
 
export const getStaticProps = ({ params }) => {
  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 const 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!

Next.js изображения Next.js I18n