Docs: ability to make parallel route to be bound to url segment

[t-zander]

What is the improvement or update you wish to see?

Currently I see this in the docs:

Slots are not route segments and do not affect the URL structure. The file path /@team/members would be accessible at /members.

However I guess it is a valid use case and pattern in plain react, when you have nested route which renders on the same page. You just use <Outlet /> (for react router) as many times as needed, to render child route on the same page in response to url change.

Simplified example: products - shows list of products products/:productId - shows product information and stays on the same page, meaning both products list and product info are shown.

Is this possible? It would be nice to have it explicitly stated and if it's possible, have an example.

I know that there is a route intercept + parallel routes, but it's not something which is needed fro this use case.

Is there any context that might help us understand?

Let's say there is a page called products. When user goes to this page, it shows a list of products. The structure would be smth like

app/ -- products/ ---- page.tsx In UI it will look like this

Then, when user clicks on a specific product it should show that product details on the same page on the right side and url should change to products/:id In UI it will look like this:

In react world you would just have one top lvl to render /products and then you'd have a nested route and nested to render product information. Like this:

const routes = [
  {
    path: '/products'
    element: <ProductsList />
    children: [
      {
        path: '/:id',
        element: <ProductDetails />
      }
    ]
  }
]

// ProductsList component

return (
  ... showing products list
  <Outlet /> <--- to show product details on the same page
)

Is it possible to do it in next.js world? If I created another page like

app/ -- products/ ---- page.tsx ---- [id] ------ page.tsx It will be a completely separate page.

If next.js provides smth similar, would be good to have it in the docs. If not, still would be nice too see alternatives. Currently I could achieve smth close by using query param, parallel routes and then checking route query param and showing one of two parallel routes

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

_DX-1697

[mcgrealife]

+1 and great mock-ups @t-zander

[mcgrealife]

@t-zander I got it! It was simpler than expected, using layout.tsx

The layout uses a 2-column grid, where:

• the left column is a Server component that fetches productIds and displays them in a list
• the right column is {children}, that will show the /products/[id] page (the [id] page fetches its own product details using param.id)

here is code example https://github.com/mcgrealife/next13-app-example/tree/main

[mcgrealife]

I found fetching productIds in the layout better (and passing as props to SideBar), so the SideBar component can use client for dynamic styles based on selected product/[id] via usePathname()

(I have not updated the example repo yet)

[t-zander]

I see. So it means Layout is always shown for child page too. So even when we go to product/:id, we have this kind of tree

<Layout>
   <SideBar />
   <products[id] />
</Layout>

I guess this will work perfectly fine in this case, indeed 🙂 The only thing is that we treat products list as part of Layout, but in usual react app we treat it as a top lvl page. I guess it's still a bit difficult for me to shift my mind to next.js approach. But your example seems to solve the problem perfectly well. Thanks a lot 🙏