面试题：Next.js 中 getStaticProps 和 getStaticPaths 的基础应用

获取文章数据：
- 首先，假设我们有一个数据源（比如文件系统中的 Markdown 文件或者数据库）存储博客文章。需要有一个函数从这个数据源获取所有博客文章的数据，包括 slug 等信息。例如，如果是从文件系统读取 Markdown 文件，可能会有一个函数 getAllPosts 来读取并解析这些文件。
getStaticPaths 函数：
- 在 Next.js 页面组件中，定义 getStaticPaths 函数。这个函数的作用是告诉 Next.js 在构建时要生成哪些页面路径。
- 调用获取文章数据的函数（如 getAllPosts），从数据源获取所有文章的信息。
- 遍历文章数据，为每篇文章生成一个包含 params 的对象，params 中应该包含 slug 字段。例如：
```
export async function getStaticPaths() {
  const posts = await getAllPosts();
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  return { paths, fallback: false };
}
```
- fallback: false 表示只生成 paths 中指定的路径，不存在的路径不会进行动态渲染。如果设置为 true，当访问不存在的路径时，Next.js 会在运行时尝试生成该页面。如果设置为 blocking，则会在访问不存在路径时先阻塞请求，等待页面生成后再返回。
getStaticProps 函数：
- 定义 getStaticProps 函数，这个函数接收 context 参数，context 中包含 params，即 getStaticPaths 中生成的 params。
- 根据 params.slug 从数据源中获取特定文章的详细数据。例如：
```
export async function getStaticProps(context) {
  const { slug } = context.params;
  const post = await getPostBySlug(slug);
  return {
    props: {
      post,
    },
    revalidate: 60 * 60 * 24, // 每24小时重新验证一次（如果使用增量静态再生）
  };
}
```
- 将获取到的文章数据通过 props 返回给页面组件，这样页面组件就可以使用这些数据进行渲染。revalidate 字段用于设置增量静态再生的时间间隔，单位为秒。如果不设置 revalidate，则不会启用增量静态再生。

页面组件：

在页面组件中接收 getStaticProps 传递过来的 props，并使用这些数据进行页面的渲染。例如：

import React from'react';

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </div>
  );
};

export default PostPage;

通过以上步骤，使用 getStaticProps 和 getStaticPaths 就可以在构建时生成所有博客文章页面的路径，并为每个页面获取相应的数据进行静态生成。

星途面试题库

面试题：Next.js 中 getStaticProps 和 getStaticPaths 的基础应用

知识考点

面试题答案