我有一个用户创建产品的表单。此表单使用react-hook-form来跟踪所有表单输入。我想重复使用的形式，因为“编辑”页面是完全相同的形式，但与从服务器的数据填写的字段。
这种情况下最好的做法是什么？有一个ProductForm组件和一个可选的product属性吗？或者只是将表单复制粘贴到两个不同的文件中？
这就是我在想的：
pages/product/create/index.tsx

export default function Create() {
  return <ProductForm />
}

pages/product/create/edit.tsx

export default function Edit({id}: {id: number}) {
    const product = // Get the product with the id from the slug 
    return <ProductForm product={product} 
}

export async function getServerSideProps({ params }) { 
    return {
        props: { id: params.id }
    }
}

我问题的第二部分是编辑页面从服务器getServerSideProps或getStaticProps获取产品的最佳实践是什么。我应该从其中一个函数中的slug中获取带有id的产品吗？所以编辑看起来像这样
pages/product/create/edit.tsx

export default function Edit({product}: {product: Product}) {
    return <ProductForm product={product}
}

export async function getServerSideProps({ params }) {
    const product = // get product from slug id
    return {
        props: { product: product }
    }
}

新的Nextjs，所以任何想法，这是赞赏