Next.js SSG

Next.js では、静的生成（SSG）を使用してページをプリレンダリングできます。ページはビルド時に生成され、静的に訪問者に提供されます。また、パフォーマンスを最大化するために CDN でキャッシュすることもできます。

これは Nextra でもサポートされています。以下に例を示します。

Nextra は GitHub で 11740 個のスターを獲得しています！

上記の数値は、getStaticProps を介してビルド時に生成されました。インクリメンタル静的再生成を有効にすると、最新の状態に保たれます。

上記の例の MDX コードは次のとおりです。

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!

Next.js Image Next.js I18n