面试题：Next.js中getStaticPaths核心用法之基础理解

getStaticPaths函数的主要作用

在Next.js中，getStaticPaths函数主要用于为动态路由生成静态路径。这使得Next.js能够在构建时预渲染动态页面，从而提升页面性能和SEO。它会告诉Next.js哪些动态路由需要被预渲染，以及为每个动态路由提供参数。

举例说明如何使用它来为动态路由生成静态路径

假设我们有一个博客应用，文章页面的路由是/posts/[id]，其中[id]是动态参数。以下是如何使用getStaticPaths和getStaticProps来生成静态路径并获取数据的示例：

创建页面文件：在pages/posts/[id].js创建页面组件：

import React from 'react';
import { useRouter } from 'next/router';

const Post = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  // 假设这里从数据库获取所有文章的id
  const posts = [
    { id: '1' },
    { id: '2' },
    { id: '3' }
  ];
  const paths = posts.map(post => ({ params: { id: post.id.toString() } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // 假设这里根据id从数据库获取文章数据
  const post = {
    title: `Post ${params.id} Title`,
    content: `Post ${params.id} Content`
  };
  return {
    props: {
      post
    },
    revalidate: 60 // 每60秒重新验证（如果使用增量静态再生）
  };
}

export default Post;

在上述示例中：

getStaticPaths函数模拟从数据库获取所有文章的id，并通过map方法生成路径数组paths，每个路径对象包含params属性，其值为动态路由参数。fallback设置为false表示仅预渲染paths中的路径，不存在的路径会返回404。
getStaticProps函数根据传入的params.id从数据库获取具体文章的数据，并通过props传递给页面组件。同时，revalidate设置为60，表示每60秒重新验证页面数据（适用于增量静态再生）。

星途面试题库

面试题：Next.js中getStaticPaths核心用法之基础理解

知识考点

面试题答案

getStaticPaths函数的主要作用

举例说明如何使用它来为动态路由生成静态路径