1

This is my dir structure on Next.js app:

pages
   |-users
   |     |-index.js
   |     |-[userid]
   |       |-index.js 
   index.js

when I call domain.com/users/1 I want the users->index.js component to be rendered as well. it only renders the /userid route with this structure.

equivalent in react-router <Outlet/> but I couldn't find how to do in Next.js

pneuma
  • 241
  • 5
  • 14
  • 2
    Perhaps you can import the component from **users/index.js** into the component in **users/[userid]/index.js** and render it there? – tromgy Jan 22 '22 at 14:54
  • @tromgy yes I know. but why would I use it that way everywhere when there is a way to automate it? – pneuma Jan 22 '22 at 14:59
  • Next.js doesn't support nested layouts like react-router, but you can use a combination of [Custom App](https://nextjs.org/docs/advanced-features/custom-app) and [route](https://nextjs.org/docs/advanced-features/custom-app) awareness to conditionally render the contents of users/index in users/[userid]/index. – kausko Jan 22 '22 at 17:04
  • 2
    You may want to look into [optional catch-all dynamic routes](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes). It provides a way to handle both `/users` & `/users/1` paths on the same page. – juliomalves Jan 23 '22 at 11:36

0 Answers0