404 Page Not Found Problem in Parallel Routes

How many people have you heard, "You will need an empty page.tsx", "should I put to each route an empty page.tsx?" and if I have 3, 10 ... n of parallel routes?

Nhaaa..
To hell with parallel routes, I prefer to directly import a component into the layout and through the usePathname contextualizes the content of the modal right?

No, there is no more wrong thing. And also if you can reason it this way the solution you simply didn't need a page with a navigation independent of another “slot” and you confused the purpose of the parallel routes/slots with a simple separation of components of a layout/page.

Next JS parallel routes don't work

When you decide to create a new slot, or n slots, you are literally saying that you want to develop in parallel 1 ... n layouts/page.tsx, from this you already understand how thoughtful a choice it must be.

Problem behind default.jsx

So you need for example a @modal that when you navigate in it doesn't affect the navigation of the home page that is underneath, but at the same time in case of refresh to the current modal navigation url or trivially at the first load we have to tell all our slots how they have to compose themselves at each url segment.

That's why in most cases, as in a modal, the most important thing to do is a default.tsx at the first segment level, so that the development perspective is reversed. That is, write only the segments that we want the modal to action and not think about putting empty all the ones where it is not used.

Problem behind catch all [[...all]]

Get this error You cannot define a route with the same specificity as a optional catch-all route ("/" and "/[[...all]]"). weird because it is parallel route

app
├── @modal
│   └── [[...all]]
├── layout.tsx
└── page.tsx

Unfortunately, there has not yet been a direct explanation/solution to this problem, but it can simply be solved by writing it in the same but more extensive way as follows

app
├── @modal
│   ├── [...all]
│   └── page.tsx
├── layout.tsx
└── page.tsx

I hope this has been of some help to you on the level of conceptual clarification, if not I am available in the comments