Nested path with UID

Developing with Prismic
1

I'm developing a site with two routes: "/collection/:uid" and "/product/:uid". The first route is intended to display a specific collection, which contains multiple products. The second route is for displaying a specific product.

Here's the code for my app routes configuration:

const routes: prismic.ClientConfig["routes"] = [
    {
        type: "collection",
        path: "/collection/:uid",
    },
    {
        type: "product",
        path: "/product/:uid",
    },
];

For the Next.js app router, the file structure is organized as follows:

app
   collection
         [uid]
            page.tsx
         page.tsx
   product
         [uid]
            page.tsx

the code for the "/product/[uid]/page.tsx" file:

type ProductParams = { uid: string }

const Product = async ({ uid }: ProductParams) => {
    const client = createClient();

    const product = await client
        .getByUID("product", uid)
        .catch(() => notFound());

    return <SliceZone slices={product.data.slices} components={components} />;
};

export async function generateStaticParams() {
    const client = createClient();

    const products = await client.getAllByType("product");

    return products.map((product) => {
        return { uid: product.uid };
    });
}

I'm encountering 404 error when access /product/product-uid, what would be the problem?

2

Hello @lhncompany.gift,
I'm certainly no expert but I think this is what you might need to change your code to look like:

type ProductParams = { params: { uid: string } } // Sticking with the params name

const Product = async ({ params }: ProductParams) => {
    const client = createClient();

// note that in your code I believe you needed to reference uid.uid, but here we're using params.uid
    const product = await client
        .getByUID("product", params.uid) // I think that this line in your code is returning an error and then your catch statement returns a notFound() hence the 404. 
        .catch(() => notFound());

    return <SliceZone slices={product.data.slices} components={components} />;
};

export async function generateStaticParams() {
    const client = createClient();

    const products = await client.getAllByType("product");

    return products.map((product) => {
        return { uid: product.uid };
    });
}
3

Hi, thank for your suggestion.
I tried that, but still cant get the document.

4

When you

const product = await client.getByUID("product", params.uid)
console.log(product)

Are you able to see what you'd expect?

Also, does your prismicio.ts file have this?

// prismicio.ts
export const createClient = (config: prismicNext.CreateClientConfig = {}) => {
  const client = prismic.createClient(repositoryName, {
    routes,
    fetchOptions:
      process.env.NODE_ENV === 'production'
        ? { next: { tags: ['prismic'] }, cache: 'force-cache' }
        : { next: { revalidate: 5 } },
    ...config,
  })
5

nope, for the console, no document return

and for prismicio.ts, I do have that

export const createClient = (config: prismicNext.CreateClientConfig = {}) => {
    const client = prismic.createClient(repositoryName, {
        routes,
        fetchOptions:
            process.env.NODE_ENV === "production"
                ? { next: { tags: ["prismic"] }, cache: "force-cache" }
                : { next: { revalidate: 5 } },
        ...config,
    })

    prismicNext.enableAutoPreviews({
        client,
        previewData: config.previewData,
        req: config.req,
    })

    return client
}