NextJS动态页面[slug]本地正常，Vercel/GitHub显示404求助

问题核心原因 #

你的Next.js应用在本地可正常访问首页、homepage/blog及homepage/blog/[slug]动态页面，但部署至GitHub Pages与Vercel时动态路由（如homepage/blog/1）出现404，根源在于静态部署适配配置缺失与路由路径不匹配：

• GitHub Pages为纯静态托管服务，无法原生处理Next.js动态路由的客户端 fallback，需通过静态导出+预渲染配置支持。
• Vercel虽原生支持Next.js，但可能因basePath配置错误或构建时动态页面未生成导致404。

具体修复步骤 #

1. 配置next.config.js适配部署路径 #

在项目根目录的next.config.js中添加如下配置，匹配GitHub Pages的子路径并开启静态导出模式：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/TeamApp-BlogPage-NextJS',
  output: 'export',
}

module.exports = nextConfig

2. 完善动态页面的静态生成逻辑 #

在pages/homepage/blog/[slug].js（或对应TSX文件）中，确保正确实现getStaticPaths与getStaticProps，预渲染或适配动态slug：

export async function getStaticPaths() {
  // 从数据源获取所有可用slug列表（示例：假设从API获取）
  const res = await fetch('你的文章数据源地址')
  const posts = await res.json()
  const paths = posts.map(post => ({
    params: { slug: post.id.toString() }
  }))

  // fallback: true 支持未预渲染的slug自动生成页面；若仅需预定义slug，设为false
  return { paths, fallback: true }
}

export async function getStaticProps({ params }) {
  // 根据slug获取对应文章数据
  const res = await fetch(`你的文章数据源地址/${params.slug}`)
  const post = await res.json()

  return {
    props: { post },
    revalidate: 60 // 可选：开启增量静态再生，自动更新页面
  }
}

3. GitHub Pages 部署额外配置 #

• 执行npm run build && npm run export生成out目录，将该目录下的所有文件部署至GitHub Pages。
• 确认GitHub仓库的Pages设置中，部署源指向out目录（若用GitHub Actions，需在脚本中加入next build && next export步骤）。

4. Vercel 部署检查 #

• 查看Vercel控制台的构建日志，确认无构建错误。
• 确认项目构建命令为next build，输出目录留空（Vercel自动识别）。
• 若使用子路径部署，确保basePath配置与实际路径一致。

验证方法 #

本地执行npm run build && npm run export后，用npx serve out启动静态服务器测试动态路由，确认正常后再重新部署至线上环境。

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