Next.js Discord

Discord Forum

Master/Detail layout using parallel routes

Answered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
Hello!
I'm trying to make an account page, that shows some basic account info when we go to /accounts/[id], but then we can display some more information by going to /accounts/[id]/documents or /accounts/[id]/options.
The point is I want to keep displaying the basic info next to the documents or options.

I used parallel routes and managed to get what I want with the following structure:
app
  - accounts
    - [id]
      - page.tsx
       - default.tsx
       - @details
         - default.tsx
         - documents
           - page.tsx
         - options
           - page.tsx


But my problem is I need to have the same code in accounts/[id]/page.tsx and accounts/[id]/default.tsx, otherwise I only have my basic info in one of the cases, not both (cases being I display details or not).

Did I do something wrong and/or is there a better way?
Answered by aardani
put <Summary/> in /[id]/layout.tsx
return empty in /[id]/page.tsx
then <Documents /> in /[id]/documents/page.tsx
then <Options /> in /[id]/options/page.tsx
View full answer

13 Replies

like a simple wireframe of the three routes
Masai LionOP
Yes of course, something like that.
aardani
put <Summary/> in /[id]/layout.tsx
return empty in /[id]/page.tsx
then <Documents /> in /[id]/documents/page.tsx
then <Options /> in /[id]/options/page.tsx
Answer
aardani
lmk if there are concern regarding this setup
Masai LionOP
OK so that matches an other version I tried. In this case parallel routes are not adequate then.
Thanks !
aardani
yeah, parallel routes are if you want to show more components
for example to show different version of this thing
for each of the three routes
Masai LionOP
Yes, I guess I lost myself 😅
This is part of an experiment where I play with all recent features of Next to better understand them, as the real projects I work on still use the pages directory.
aardani
of course
thats what i do too
Masai LionOP
👍🏼