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 图片 Next.js 国际化