Next.js SSG 静态生成

使用 Next.js，你可以使用静态生成 (SSG) (opens in a new tab) 预渲染你的页面。你的页面将在构建时生成，并以静态方式提供给访问者。它也可以由 CDN 缓存，以最大化性能。

Nextra 也支持这个功能。以下是一个示例：

Nextra 在Github上现在有 12012 颗Star!

上面的数字是通过 getStaticProps 在构建时生成的。启用了增量静态再生 (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 在Github上现在有 <Stars /> 颗Star!

Next.js 图片 Next.js I18n 多语言支持