MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Next.js 动态路由与 getStaticPaths 的高级用法示例

2023-01-082.4k 阅读

Next.js 动态路由基础回顾

在深入探讨 Next.js 动态路由与 getStaticPaths 的高级用法之前，我们先来回顾一下动态路由的基础知识。在 Next.js 中，动态路由允许我们根据不同的参数生成不同的页面。例如，我们可能有一个博客应用，每个博客文章都有一个唯一的 ID，并且每个文章都需要有一个对应的页面。

我们通过在 pages 目录下创建带方括号的文件来定义动态路由。比如，创建 pages/post/[id].js 文件，这个 [id] 就是动态参数。在这个文件中，我们可以通过 useRouter 钩子或者 getStaticProps 的 context 参数来获取这个动态参数。

以下是一个简单的示例，展示如何在 [id].js 文件中获取动态参数并显示在页面上：

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

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post ID: {id}</h1>
    </div>
  );
};

export default Post;

这里，我们使用 useRouter 钩子获取 router 对象，然后从 router.query 中提取出 id 参数并显示在页面上。

getStaticPaths 函数简介

getStaticPaths 是 Next.js 中一个非常重要的函数，它与动态路由紧密相关。getStaticPaths 主要用于在构建时生成静态页面的路径。对于动态路由，我们需要告诉 Next.js 哪些动态参数值需要生成静态页面。

getStaticPaths 函数必须返回一个包含 paths 和 fallback 属性的对象。paths 是一个数组，每个元素都是一个对象，包含 params 属性，params 中包含了动态路由的参数。fallback 则决定了当用户访问一个在构建时没有生成的路径时，Next.js 应该如何处理。

getStaticPaths 的基本用法示例

假设我们有一个博客应用，文章的 ID 是从 1 到 100。我们可以这样定义 getStaticPaths：

export async function getStaticPaths() {
  const paths = [];
  for (let i = 1; i <= 100; i++) {
    paths.push({ params: { id: `${i}` } });
  }

  return {
    paths,
    fallback: false
  };
}

在这个例子中，我们通过一个循环生成了从 1 到 100 的所有文章 ID 对应的路径。fallback: false 表示如果用户访问一个不在 paths 中的路径，将会返回 404 页面。

结合 getStaticProps 使用

getStaticPaths 通常与 getStaticProps 一起使用。getStaticProps 用于在构建时获取页面所需的数据。例如，我们可以根据文章的 ID 获取文章的详细内容：

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post
    },
    revalidate: 60 // 每 60 秒重新验证数据（如果使用增量静态再生）
  };
}

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

在这个例子中，getStaticProps 根据 params.id 从 API 获取文章数据，并将数据作为 props 传递给 Post 组件。

高级用法：动态生成路径

有时候，我们无法在构建时预先知道所有的动态路径。比如，我们的博客应用可能有新文章不断添加，不可能每次有新文章就重新构建应用。这时，我们可以使用 fallback 的不同值来实现动态生成路径。

fallback: true

当 fallback: true 时，如果用户访问一个在构建时没有生成的路径，Next.js 会在用户首次访问时生成这个页面的静态版本。例如：

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return {
    paths,
    fallback: true
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post
    },
    revalidate: 60
  };
}

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

在这个例子中，我们从 API 获取已有的文章列表来生成构建时的路径。但如果用户访问一个新文章的路径（在构建时不存在），Next.js 会在用户访问时调用 getStaticProps 来获取数据并生成静态页面。

fallback: 'blocking'

fallback: 'blocking' 与 fallback: true 类似，但在生成新页面时，用户会看到一个加载指示器，直到页面生成完成。这提供了更好的用户体验，因为用户不会看到一个空白页面。例如：

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return {
    paths,
    fallback: 'blocking'
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post
    },
    revalidate: 60
  };
}

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

当用户访问一个新路径时，Next.js 会在后台调用 getStaticProps 生成页面，同时显示加载指示器，直到页面生成并渲染完成。

结合数据库查询使用 getStaticPaths

在实际项目中，我们通常会从数据库中获取数据来生成动态路径。以 MongoDB 为例，假设我们有一个 posts 集合存储文章信息。

首先，安装 mongodb 包：

npm install mongodb

然后，我们可以这样编写 getStaticPaths 和 getStaticProps：

import { MongoClient } from'mongodb';

export async function getStaticPaths() {
  const client = await MongoClient.connect('mongodb://localhost:27017');
  const db = client.db('my-blog');
  const postsCollection = db.collection('posts');
  const posts = await postsCollection.find().toArray();

  client.close();

  const paths = posts.map(post => ({
    params: { id: post._id.toString() }
  }));

  return {
    paths,
    fallback: true
  };
}

export async function getStaticProps({ params }) {
  const client = await MongoClient.connect('mongodb://localhost:27017');
  const db = client.db('my-blog');
  const postsCollection = db.collection('posts');
  const post = await postsCollection.findOne({ _id: new ObjectId(params.id) });

  client.close();

  return {
    props: {
      post
    },
    revalidate: 60
  };
}

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

在这个例子中，我们通过 MongoDB 的 Node.js 驱动连接到数据库，获取文章列表生成路径，并根据文章 ID 获取单个文章的数据。

处理嵌套动态路由

Next.js 也支持嵌套动态路由。例如，我们可能有一个博客应用，每个文章除了有 ID 外，还可能有一个分类。我们可以创建 pages/post/[category]/[id].js 文件来处理这种情况。

在 getStaticPaths 中，我们需要生成包含多个参数的路径。假设我们有两个分类 tech 和 lifestyle，并且每个分类下有 10 篇文章：

export async function getStaticPaths() {
  const categories = ['tech', 'lifestyle'];
  const paths = [];

  categories.forEach(category => {
    for (let i = 1; i <= 10; i++) {
      paths.push({
        params: { category, id: `${i}` }
      });
    }
  });

  return {
    paths,
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const { category, id } = params;
  // 根据 category 和 id 获取文章数据
  const res = await fetch(`https://api.example.com/${category}/${id}`);
  const post = await res.json();

  return {
    props: {
      post
    },
    revalidate: 60
  };
}

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

这里，我们通过双重循环生成了所有分类和文章 ID 组合的路径。getStaticProps 则根据 category 和 id 获取对应的文章数据。

与国际化（i18n）结合使用

在国际化应用中，我们可能需要根据不同的语言生成不同的动态路径。Next.js 支持通过 next-i18next 等库实现国际化。假设我们支持英语和中文两种语言，并且文章路径需要包含语言前缀。

首先，安装 next-i18next：

npm install next-i18next

然后，配置 next-i18next。在 next.config.js 中添加如下配置：

const NextI18Next = require('next-i18next').default;

const nextI18Next = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['zh'],
  localePath: path.resolve('./public/locales')
});

module.exports = nextI18Next.config();

在 pages/post/[lang]/[id].js 中，我们可以这样编写 getStaticPaths 和 getStaticProps：

import { useTranslation } from 'next-i18next';

export async function getStaticPaths() {
  const langs = ['en', 'zh'];
  const paths = [];

  langs.forEach(lang => {
    for (let i = 1; i <= 10; i++) {
      paths.push({
        params: { lang, id: `${i}` }
      });
    }
  });

  return {
    paths,
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const { lang, id } = params;
  // 根据 lang 和 id 获取文章数据
  const res = await fetch(`https://api.example.com/${lang}/${id}`);
  const post = await res.json();

  return {
    props: {
      post
    },
    revalidate: 60
  };
}

const Post = ({ post }) => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('post.title', { postTitle: post.title })}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

在这个例子中，我们通过循环生成了不同语言和文章 ID 组合的路径。getStaticProps 根据语言和 ID 获取文章数据，并且在组件中使用 next-i18next 的 useTranslation 钩子来实现翻译。

处理动态路由中的参数验证

在实际应用中，我们需要对动态路由的参数进行验证。比如，文章 ID 应该是一个数字，或者分类名称应该是预定义的。

在 getStaticPaths 中，我们可以在生成路径时进行简单的验证。例如，确保文章 ID 是数字：

export async function getStaticPaths() {
  const paths = [];
  for (let i = 1; i <= 100; i++) {
    if (Number.isInteger(i)) {
      paths.push({ params: { id: `${i}` } });
    }
  }

  return {
    paths,
    fallback: false
  };
}

在 getStaticProps 中，我们也可以进行更复杂的验证。例如，根据分类名称验证是否合法：

export async function getStaticProps({ params }) {
  const validCategories = ['tech', 'lifestyle'];
  const { category, id } = params;

  if (!validCategories.includes(category)) {
    return {
      notFound: true
    };
  }

  const res = await fetch(`https://api.example.com/${category}/${id}`);
  const post = await res.json();

  return {
    props: {
      post
    },
    revalidate: 60
  };
}

在这个例子中，如果分类名称不在 validCategories 中，getStaticProps 会返回 notFound: true，Next.js 会返回 404 页面。

优化动态路由性能

随着应用规模的增长，动态路由和 getStaticPaths 的性能可能成为问题。以下是一些优化建议：

  1. 减少路径生成数量：如果可能，尽量减少在构建时生成的路径数量。例如，如果文章很多，可以只生成热门文章的路径，其他路径通过 fallback 动态生成。
  2. 缓存数据：在 getStaticProps 中，可以使用缓存来减少重复的 API 调用。例如，使用 lru - cache 库来缓存从数据库或 API 获取的数据。
  3. 并行数据获取：如果 getStaticPaths 和 getStaticProps 需要从多个数据源获取数据，可以使用 Promise.all 进行并行获取，以减少总等待时间。

例如，并行获取文章数据和相关评论数据：

export async function getStaticProps({ params }) {
  const [postRes, commentsRes] = await Promise.all([
    fetch(`https://api.example.com/posts/${params.id}`),
    fetch(`https://api.example.com/comments/${params.id}`)
  ]);

  const post = await postRes.json();
  const comments = await commentsRes.json();

  return {
    props: {
      post,
      comments
    },
    revalidate: 60
  };
}

通过这些优化措施，可以显著提高动态路由和 getStaticPaths 的性能，提升用户体验。

与 Server - Side Rendering（SSR）结合的注意事项

虽然 Next.js 主要以静态生成（SSG）为特色，但在某些情况下，我们可能需要结合 Server - Side Rendering（SSR）。当使用 SSR 与动态路由和 getStaticPaths 时，需要注意以下几点：

  1. 数据获取时机：在 SSR 中，数据获取是在服务器端进行的。getStaticPaths 和 getStaticProps 仍然可以使用，但它们的执行环境是服务器。确保数据获取逻辑在服务器环境中能够正常运行，例如数据库连接等操作。
  2. 缓存策略：由于 SSR 每次请求都会重新渲染页面，与 SSG 的缓存机制不同。需要根据实际需求调整缓存策略，避免不必要的重复数据获取。
  3. 性能优化：SSR 可能会增加服务器的负载，尤其是在处理大量动态路由时。可以通过优化数据库查询、使用缓存等方式来减轻服务器压力。

例如，在使用 SSR 时，可以在服务器端缓存数据：

const serverCache = {};

export async function getStaticProps({ params }) {
  if (!serverCache[params.id]) {
    const res = await fetch(`https://api.example.com/posts/${params.id}`);
    const post = await res.json();
    serverCache[params.id] = post;
  }

  return {
    props: {
      post: serverCache[params.id]
    },
    revalidate: 60
  };
}

这样，对于相同 ID 的请求，可以直接从缓存中获取数据，减少数据库或 API 的调用次数。

错误处理

在使用动态路由和 getStaticPaths 过程中，可能会遇到各种错误，如 API 请求失败、数据库连接错误等。

在 getStaticPaths 中，可以通过返回 { notFound: true } 来处理路径生成失败的情况。例如，如果从 API 获取文章列表失败：

export async function getStaticPaths() {
  try {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();

    const paths = posts.map(post => ({
      params: { id: post.id.toString() }
    }));

    return {
      paths,
      fallback: true
    };
  } catch (error) {
    return {
      notFound: true
    };
  }
}

在 getStaticProps 中，同样可以处理数据获取错误。例如：

export async function getStaticProps({ params }) {
  try {
    const res = await fetch(`https://api.example.com/posts/${params.id}`);
    const post = await res.json();

    return {
      props: {
        post
      },
      revalidate: 60
    };
  } catch (error) {
    return {
      notFound: true
    };
  }
}

通过合理的错误处理，可以确保应用在遇到异常情况时仍然能够提供友好的用户体验，而不是出现崩溃或显示错误信息。

动态路由与 SEO

搜索引擎优化（SEO）对于网站的可见性至关重要。在使用动态路由时，需要注意以下几点来优化 SEO：

  1. 规范 URL：确保动态路由生成的 URL 结构清晰、简洁且易于理解。例如，/post/123 - article - title 比 /post/123 更有利于 SEO，因为包含了文章标题。
  2. 元数据：在 getStaticProps 中，可以根据文章内容生成合适的元数据，如标题、描述等。例如：
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  const meta = {
    title: post.title,
    description: post.excerpt
  };

  return {
    props: {
      post,
      meta
    },
    revalidate: 60
  };
}

const Post = ({ post, meta }) => {
  return (
    <div>
      <Head>
        <title>{meta.title}</title>
        <meta name="description" content={meta.description} />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;
  1. 预渲染：Next.js 的静态生成（SSG）和 Server - Side Rendering（SSR）有助于搜索引擎爬虫获取页面内容。确保正确配置 getStaticPaths 和 getStaticProps，以提供完整的页面内容给爬虫。

通过这些措施，可以提高动态路由页面在搜索引擎中的排名，吸引更多的流量。

动态路由在大型项目中的应用策略

在大型项目中，动态路由和 getStaticPaths 的管理变得更加复杂。以下是一些应用策略：

  1. 模块化管理：将动态路由相关的逻辑，如 getStaticPaths 和 getStaticProps，拆分成独立的模块。这样可以提高代码的可维护性和复用性。例如，可以创建一个 lib/posts.js 文件，专门处理文章相关的动态路由逻辑。
  2. 分层架构：采用分层架构，将数据获取、路径生成和页面渲染逻辑分离。例如，在数据层负责从数据库或 API 获取数据，在路由层负责生成路径和处理参数，在视图层负责页面的渲染。
  3. 自动化测试：对动态路由和 getStaticPaths 相关的代码进行自动化测试。可以使用 Jest 和 React Testing Library 等工具来测试路径生成是否正确、数据获取是否成功等。

通过这些策略，可以更好地管理大型项目中的动态路由，确保代码的质量和可扩展性。

在 Next.js 中，动态路由和 getStaticPaths 提供了强大的功能来构建灵活且高性能的应用。通过深入理解和掌握这些高级用法，我们能够应对各种复杂的业务需求，打造出优秀的前端应用。无论是处理动态内容、优化性能还是提升 SEO，合理运用这些技术都能带来显著的效果。在实际项目中，需要根据具体需求和场景，灵活选择和组合这些用法，以实现最佳的用户体验和业务目标。同时，随着项目的发展和需求的变化，不断优化和调整动态路由的实现，确保应用始终保持高效和稳定。