Tengo dos rutas como,
app/products => pages/products/index.js
app/products/1 => pages/products/[page].js
Aquí, tanto la app/products como app/product/1 representarán el mismo contenido (los mismos elementos del producto), ¿es posible representar el contenido de la app/products/1 en la app/products sin escribir un código duplicado? Podría encontrar algo similar en su documentación.
Gracias.
La forma más fácil es abstraer el contenido del nivel de la página. No hay necesidad de un código complicado aquí. páginas/productos/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, } }páginas/productos/[página].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, } }puede crear algo como template.jsx en algún lugar de su proyecto y simplemente usar esta plantilla en su index y [page]