Next.js静态构建环境下能否使用动态路由？如何实现？

当然可以！在Next.js的静态构建场景下，动态路由完全可行，不过得先调整一下你的路由文件结构（符合Next.js的文件系统路由规则），再根据内容的可预知性选择对应的实现方式。

首先纠正一下你的路由写法：你提到的/pages/[article].js/read不符合Next.js的路由规范，正确的嵌套动态路由结构应该是/pages/[article]/read.js，这样才能对应/articleA/read这种访问路径。

场景1：预渲染所有已知的动态路径（适合内容固定、可提前枚举的情况） #

如果你的文章列表是固定的（比如可以提前从数据库、API或本地文件中获取所有文章的slug），可以通过getStaticPaths + getStaticProps预渲染出所有对应路径的静态HTML文件，部署到任何静态服务器后直接访问即可。

实现步骤： #

1. 创建路由文件：pages/[article]/read.js
2. 在文件中实现两个核心函数：
   • getStaticPaths：返回所有需要预渲染的动态参数值
   • getStaticProps：根据动态参数获取对应数据，传递给页面组件

示例代码：

// pages/[article]/read.js

// 模拟从数据源获取所有文章slug
async function getAllArticleSlugs() {
  // 实际场景中可以替换为API请求、读取本地JSON等
  return ['articleA', 'articleB', 'articleC'];
}

// 模拟根据slug获取文章详情
async function getArticleBySlug(slug) {
  return {
    title: `文章${slug}`,
    content: `这是${slug}的详细内容`
  };
}

export async function getStaticPaths() {
  const slugs = await getAllArticleSlugs();
  return {
    // 生成所有需要预渲染的路径参数
    paths: slugs.map(slug => ({
      params: { article: slug }
    })),
    // 未知路径直接返回404
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const articleData = await getArticleBySlug(params.article);
  // 如果文章不存在，返回404
  if (!articleData) {
    return { notFound: true };
  }
  return {
    props: { articleData }
  };
}

export default function ArticleReadPage({ articleData }) {
  return (
    <div className="article-container">
      <h1>{articleData.title}</h1>
      <div className="article-content">{articleData.content}</div>
    </div>
  );
}

3. 执行静态构建命令：

next build && next export

构建完成后，out目录下会生成articleA/read.html、articleB/read.html等静态文件，直接部署到Apache、Nginx、S3或Netlify等服务器即可访问对应路径。

场景2：处理未知的动态路径（适合内容动态新增、无法提前枚举的情况） #

如果你的文章是动态新增的（无法提前枚举所有slug），可以使用fallback: true配合客户端路由来实现，此时Next.js会生成一个占位页面，用户访问未知路径时，客户端会动态获取数据并渲染内容。

实现步骤： #

1. 同样创建路由文件：pages/[article]/read.js
2. 修改getStaticPaths的配置，并在组件中处理加载状态：

示例代码：

// pages/[article]/read.js
import { useRouter } from 'next/router';

// 模拟根据slug从公开API获取文章详情
async function getArticleBySlug(slug) {
  const res = await fetch(`https://your-public-api.com/articles/${slug}`);
  if (!res.ok) return null;
  return res.json();
}

export async function getStaticPaths() {
  return {
    // 可以预渲染部分热门路径，也可以留空（不预渲染任何路径）
    paths: [],
    // 开启fallback，让未知路径由客户端处理
    fallback: true
  };
}

export async function getStaticProps({ params }) {
  const articleData = await getArticleBySlug(params.article);
  if (!articleData) {
    return { notFound: true };
  }
  return {
    props: { articleData }
  };
}

export default function ArticleReadPage({ articleData }) {
  const router = useRouter();

  // 当fallback为true时，首次访问未知路径会进入加载状态
  if (router.isFallback) {
    return <div>加载文章中...</div>;
  }

  return (
    <div className="article-container">
      <h1>{articleData.title}</h1>
      <div className="article-content">{articleData.content}</div>
    </div>
  );
}

3. 执行静态构建命令：

next build && next export

4. 服务器配置关键：
   由于静态服务器默认只会查找存在的文件，所以需要配置SPA fallback规则，让所有动态路径都指向index.html（Next.js的入口文件）：
   • Nginx：在配置中添加try_files $uri $uri/ /index.html;
   • Apache：启用mod_rewrite并添加Rewrite规则，将所有请求转发到index.html
   • S3：将桶的“错误文档”设置为index.html
   • Netlify：在站点设置中开启“SPA fallback”，指定index.html为 fallback 文件

总结 #

• 静态构建下完全支持动态路由，核心是利用Next.js的getStaticPaths和getStaticProps机制
• 已知路径优先预渲染，未知路径通过fallback: true配合客户端路由处理
• 服务器必须配置SPA fallback规则，才能让动态路径正确指向静态资源

内容的提问来源于stack exchange，提问作者wsdfgfkdl