I suppose no one has any idea : )

i am facing the same problem. have u found any solution?

Well, the last time I read the docs I remember that modals only show up when you’re navigating to a page on a soft navigation, meaning you’re using a <Link> component or router.push()

If you do a hard navigation, either via typing the URL by hand on the browser or clicking a traditional link that takes you there, or a <a> tag it will not show the modal

Intercepting routes are a Next.js feature, Next.js can only intercept the route if the request comes from Next.js APIs ( like I said <Link> and router.push).

What Next.js does under the hood is hiding the new URL behind the current URL, it’s masking it behind the scenes so you don’t realize that the modal it’s actually a new page, if you refresh it’ll fallback to the original view, which is the full page.. maybe I wasn’t clear enough lol

^^^ Forgot to reply to your message, you won’t get the notification so I’m replying to it now haha my bad

thanks 😄 ❤️ actually i had opened this issue and waiting for the response 😄 😄

u were clear and that's what i know

so this way of creating modals is not always usefull

which strategy do you prefer? having modals logic in global state or opening it with url? "?modalOpen="true"

i also forget to reply 😄

It’s not a way of creating modals, I like to see it just a progressive enhancement NEXTJS does for you to improve some use-cases and user experiences.

I like the URL method, that way if you share the URL you get the modal right away. But if it’s a modal you only want to show for some specific interaction you could simply keep it in state

Or both, synchronized. You can use a library called “nuqs” is great.

If you’re using server components stick to URL, for client stuff you can use nuqs since it works via hooks and state

^^^

thanks i did not know about nuqs. btw do you know any article how to create good architecture of next js app?

I’ve been trying to find the definitive one, so far I’ve been following practices from different approaches I see in GitHub open source repos

yes i do the same.

Yea so far I prefer keeping things tied and close to each other, wait I have a screenshot of a project structure I liked

each route folder contains its own internal
_actions
_components
_hooks
When they’re specific for that route

i see that and you have globally used components outside the app right?

Yes exactly, my personal dev tools for example, ShadCn UI components, sometimes the page wrappers (like a <div> that takes children and set ups a max width)

For providers like theme provider or tanstack query provider or auth provider you can make a file
providers.tsx next to the root layout (layout.tsx) and simply make it take children, to keep the providers layer clean and away from the layout.tsx so it doesn’t look bloated haha

good idea. tanstack is like react query right?

Yes, tanstack query is react query, the name changed

The core library name changed, the specific package you install for react apps is still called react query

have u ever used swr?

i just wanna know why people prefer react query over it

🇬🇪

I’ve never used SWR, I really like React Query tho

I think it’s just because it’s more popular and it’s got more built in tooling and the API allows to you do more stuff

If you wanna learn React Query I suggest you read TKDodo blog posts, it’s the core maintainer of the library, makes GREAT content and digs into the inner details and implementations

https://tkdodo.eu/blog/ these ones right?

Yes exactly