Utilizando carpeta [...slug] con NextJS 13.4.

import { products as initialProducts } from "@/mocks/products.json";
import Link from "next/link";

export interface Products {
  products: Product[];
  total: number;
  skip: number;
  limit: number;
}

export interface Product {
  id: number;
  title: string;
  description: string;
  price: number;
  discountPercentage: number;
  rating: number;
  stock: number;
  brand: string;
  category: string;
  thumbnail: string;
  images: string[];
}

export default function Home() {
  return (
    <>
      <h1>Home</h1>

      <section className="h-28">
        <h2>Carrito</h2>
      </section>
      {initialProducts.map((product: Product) => (
        <div key={product.id}>
          <img src={product.thumbnail} alt={product.title} />
          <h2>{product.title}</h2>
          <p>{product.description}</p>
          <p>{product.price}$</p>
          <Link href={"/product/" + product.id}>añadir al carrito</Link>
        </div>
      ))}
    </>

);
}

import { products as initialProducts } from "@/mocks/products.json";
import { Product } from "@/app/page";

const PageProduct = ({ params }: { params: { slug: string } }) => {
const slug = Number(params.slug);

const post = initialProducts.find((post: Product) => post.id === slug);

if (!post) throw new Error(`Publicar con slug ${params.slug} extraviado.`);
console.log(post?.id);
return (

<>
  <div>pagina de Producto / {params.slug}</div>
  <hr />
  <section className="p-8">
    <div>Nombre{post?.title}</div>
    <div>Descripcion{post?.description}</div>
    <div>Precio{post?.price}</div>
    <img src={post.thumbnail} alt={post.title}></img>
  </section>
</>
); };

export default PageProduct;

import { products as initialProducts } from "@/mocks/products.json";
import { Product } from "@/app/interfaces";

const PageProduct = ({ params }: { params: { slug: string } }) => {

  const slug = Number(params.slug);
  const post = initialProducts.find((post: Product) => post.id === slug);

if (!post) throw new Error(`Publicar con slug ${params.slug} extraviado.`);

return (
  <>
    <div>pagina de Producto / {params.slug}</div>
    <hr />
    <section className="p-8">
      <div>Nombre{post?.title}</div>
      <div>Descripcion{post?.description}</div>
      <div>Precio{post?.price}</div>
      <img src={post.thumbnail} alt={post.title}></img>
    </section>
  </>
);