Next.js创建/编辑页面处理及数据获取最佳实践咨询

1. 表单复用 vs 复制文件：优先做带可选product属性的组件 #

绝对不要复制表单到两个文件里，维护两份完全一致的代码是后续的噩梦——改字段、加校验都要重复操作，极易出现遗漏或不一致。最佳实践就是封装一个接受可选product属性的ProductForm组件：

• 当传入product（编辑场景）时，用react-hook-form的reset方法把产品数据填充到对应字段
• 无product传入（创建场景）时，表单保持空初始状态

示例代码参考：

import { useForm, useEffect } from 'react-hook-form';

export default function ProductForm({ product, onSubmit }) {
  const { register, handleSubmit, reset } = useForm();

  // 组件挂载/产品数据更新时，填充表单
  useEffect(() => {
    if (product) {
      reset(product);
    }
  }, [product, reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="产品名称" />
      <input type="number" {...register('price')} placeholder="价格" />
      {/* 其他表单字段 */}
      <button type="submit">{product ? '更新产品' : '创建产品'}</button>
    </form>
  );
}

后续在创建页和编辑页直接复用：

• 创建页：<ProductForm onSubmit={createProductHandler} />
• 编辑页：<ProductForm product={fetchedProduct} onSubmit={updateProductHandler} />

2. 编辑页数据获取：根据数据更新频率选方案 #

选getServerSideProps的场景 #

如果产品数据频繁变动（比如后台随时会修改产品信息），用getServerSideProps——它会在每次用户请求时从服务器拉取最新数据，确保编辑页展示的是当前最新的产品内容。

选getStaticProps的场景 #

如果产品数据很少更新，优先用getStaticProps搭配revalidate参数（增量静态生成），既能享受静态页面的性能优势，又能在指定时间间隔自动更新页面内容，示例：

export async function getStaticProps({ params }) {
  const res = await fetch(`https://你的接口地址/products/${params.id}`);
  const product = await res.json();

  return {
    props: { product },
    revalidate: 60 // 每60秒重新生成页面
  };
}

export async function getStaticPaths() {
  // 提前获取所有产品ID生成静态路径；产品数量多的话可以用fallback: true
  const res = await fetch('https://你的接口地址/products');
  const products = await res.json();
  const paths = products.map(product => ({ params: { id: product.id.toString() } }));

  return { paths, fallback: false };
}

3. 通过slug的ID获取产品：完全正确 #

不管用getServerSideProps还是getStaticProps，都可以从params中提取slug里的ID，再用该ID请求对应产品数据——这是Next.js动态路由的标准用法，完全符合最佳实践。

比如getServerSideProps的写法：

export async function getServerSideProps({ params }) {
  const { id } = params;
  const res = await fetch(`https://你的接口地址/products/${id}`);
  const product = await res.json();

  return { props: { product } };
}

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