如何在Next.js中通过自定义API动态生成页面并保留核心特性？

问题背景 #

我用Next.js搭建电商网站，需要为每个商品动态生成详情页。商品数据存储在数据库中，可通过API端点https://my-api.com/products/:id获取（:id为商品ID）。要求实现时必须保留Next.js的自动代码分割、性能优化和SEO优化核心特性——比如商品详情页的JS、CSS等资源仅在用户访问该页面时加载，而非全局加载。

最佳实现方案 #

Next.js的动态路由结合针对性的数据获取方法，是实现该需求的最优解，同时能完美保留框架的核心特性。以下分两种常见场景说明：

场景1：预渲染已知商品ID（静态生成，优先推荐） #

如果商品ID可以提前获取（比如通过API拿到全量商品列表），使用getStaticPaths + getStaticProps组合实现静态生成。这种方式生成的页面是静态HTML，SEO效果最好，加载速度最快，还能配合CDN缓存。

创建pages/products/[id].js文件，代码示例：

import React from 'react'
import axios from 'axios'

function ProductDetail({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>价格: {product.price}</p>
    </div>
  )
}

// 预定义需要生成静态页面的商品ID路径
export async function getStaticPaths() {
  // 调用API获取所有商品的ID列表
  const res = await axios.get('https://my-api.com/products')
  const products = res.data

  // 生成符合要求的路径数组
  const paths = products.map(product => ({
    params: { id: product.id.toString() }
  }))

  // fallback: false → 仅预渲染paths中的路径，其他路径返回404
  // 若商品频繁更新，可设为fallback: 'blocking'，访问未预渲染路径时会动态生成并缓存
  return { paths, fallback: false }
}

// 获取对应商品的详情数据
export async function getStaticProps({ params }) {
  const res = await axios.get(`https://my-api.com/products/${params.id}`)
  const product = res.data

  return {
    props: { product },
    // 可选：设置重新验证时间（秒），后台自动更新静态页面，适合数据更新不频繁的场景
    revalidate: 60
  }
}

export default ProductDetail

场景2：动态处理任意商品ID（服务器端渲染） #

如果商品ID无法提前预知，或者数据需要实时更新，使用getServerSideProps。每次用户访问页面时，服务器都会实时获取数据并渲染完整HTML，保证数据最新，同时SEO友好。

创建pages/products/[id].js文件，代码示例：

import React from 'react'
import axios from 'axios'

function ProductDetail({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>价格: {product.price}</p>
    </div>
  )
}

// 每次请求时在服务器端获取数据
export async function getServerSideProps({ params }) {
  const res = await axios.get(`https://my-api.com/products/${params.id}`)
  const product = res.data

  return {
    props: { product }
  }
}

export default ProductDetail

核心特性的保留说明 #

• 自动代码分割：Next.js的动态路由页面默认开启自动代码分割，pages/products/[id].js的代码只会在用户访问商品详情页时加载，不会影响首页、列表页等其他页面的加载速度。
• 性能优化：静态生成的页面会被Next.js优化为静态资源，可通过CDN缓存实现极致加载速度；服务器端渲染的页面也会经过框架的资源压缩、懒加载等优化。
• SEO优化：两种方案都会返回完整的HTML内容，搜索引擎可以正常抓取商品信息，保证SEO效果。

关于原示例的说明 #

你提供的示例中使用了getInitialProps，这个API在Next.js中已经被标记为不推荐使用——它的行为在客户端和服务器端存在差异，且无法实现静态生成的性能优势，建议替换为上述的getStaticProps或getServerSideProps。

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