NextJS 从不同的页面渲染内容

Question

我有两条路线，

app/products => pages/products/index.js
app/products/1 => pages/products/[page].js

这里app/products和app/product/1都会呈现相同的内容（相同的产品项），是否可以在app/products中呈现app/products/1的内容而无需编写重复代码？我可以在他们的文档中找到类似的内容。

谢谢。

Answer 1

最简单的方法是从页面级别抽象内容。这里不需要棘手的代码。 pages/products/index.js:

import { ProductPageContent } from 'components/ProductPageContent';
import { getProductData } from 'lib/productData';

export default function ProductsIndexPage() {
  return <ProductPageContent />
}

export async function getStaticProps() {
  const productData = await getProductData();
  return {
     productData,
  }
}

pages/products/[页面].js:

import { ProductPageContent } from 'components/ProductPageContent';
import { getProductData } from 'lib/productData';

export default function ProductPagePage() {
 return <ProductPageContent />
}

export async function getStaticProps() {
  const productData = await getProductData();
  return {
     productData,
  }
}

Answer 2

您可以在项目的某处创建类似 template.jsx 的内容，只需在 index 和 [page]

中使用此模板

NextJS 从不同的页面渲染内容

NextJS render content from a different page

javascript

reactjs

next.js