配置构建静态网站

配置 next build 生成静态网站，设置 output 为 export，修改 next.config.js

// next.config.js

const nextConfig = {
  ...
  output: 'export',
  distDir: 'dist',
};

module.exports = nextConfig;

动态路由

对于动态路由的页面 ，我们还需要告诉 Next.js 需要生成那些页面。

App Router 模式下，我们需要添加 generateStaticParams 方法。

// /src/app/posts/[slug]/page.js

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default function Page({ params }) {
  const { slug } = params;
  // ...
}

Pages Router 模式下，则是应该添加 getStaticPaths 方法。

// /pages/posts/[slug].tsx

export const getStaticPaths = async () => {
  const posts = await getPosts();
  return {
    paths: [
      {
        params: posts.map((post) => ({
          slug: post.slug,
        })),
      },
    ],
    fallback: true,
  };
};

export async function getStaticProps({ params }) {
  const post = await getPostBySlug(params.slug);
  return { props: { post } };
}

export default function Page({ post }) {
  // ...
}

配置 basePath

Pages 默认生成的链接是一个带有仓库名称的二级目录链接，为了正常访问页面，我们需要设定 Next.js 的 basePath 设置，修改 next.config.js

// next.config.js

const nextConfig = {
  ...
  basePath: '/slqm', // 与你的仓库名称匹配
};

module.exports = nextConfig;

如果你使用了与用户名相同的仓库名， Pages 可以生成不带二级目录的链接，那么你就可以不需要配置 basePath 了。

构建

配置好了之后，可以运行 npm run build 生成静态网站到 dist 目录

发布

接下来我们就可以把 dist 目录发布到 Pages 或其它托管平台了。

先安装 gh-pages 包

npm install --save-dev gh-pages

然后，在 package.json 中添加 pages 脚本

{
  "scripts": {
    ...
    "pages": "gh-pages -d dist --nojekyll"
  },
}

配置好之后，我们就只需要运行 npm run pages 就可以将 dist 目录 push 到 gh-pages 分支了。

为 gh-pages 分支启用 Pages，当新内容 push 到 gh-pages 分支后，GitHub Pages 会自动发布新的内容，而 Gitee Pages 还需要手动到设置页面点下更新发布，或者升级到付费版才能自动更新。