When Did NextJS Routing Become so Advanced??!

These 2 advanced routing features have been added in NextJS 13. Knowing how to properly use intercepting and parallel routes TOGETHER makes for nice use cases and an improved UX.
-- my links
My GitHub: github.com/joschan21
Discord: / discord

[@Saltertv]

Looks like a great way to over-engineer my app! Informative video as usual :)

[@joshtriedcoding]

YES! :D Appreciate you man.

[@somerandomchannel382]

great idea terrible user experience most production sites use params and query to handle modals. so you can reload the page, and still load the modal

[@harshjaiswal3947]

This might be useful for SEO in case of product listing pages where you want the users to have a look at the product in a modal from within the listing page because you dont want them to leave the page but at the same time you also want to have dedicated pages for each product for search engines to crawl

[@nirjoyhasanantor3149]

Thanks for creating video in this topic love your videos

[@joshtriedcoding]

Appreciate ya man

[@tolotrarabefaly1333]

Thank you so much for explaining these concepts. I've actually stumbled upon those concepts in the documentation, yet I really couldn't get the point of using them. Now, with the advanced use case you showed, those things start to make sense to me now.

[@joshtriedcoding]

Yeah was curious myself, someone asked me to talk about these and I couldn't come up with a cool use case either. They mentioned the login and it fit so well

[@Darren-uk5ih]

Thanks for shedding some more light on how this all works with the new routing. This actually how Prodcthunt works when you click on a product from the home page, which IMO makes sense UX wise in that usecase. This can possibly even fit an e-commerce usecase. AFAIK trying to implement this using the "pages' directory required way more setup/code/hacking to achieve and I remember this being a requested feature in some GH issue from the community. The concept/pattern may take some time to grok but instead of it looking at it as "over-engineering" , I think we should look at it as just another way to give better experiences to end users (UX) or stakeholders (SEO/analytics, etc). At the end of the day it's just a tool and like with any other tool its there if you ever need it. Just glad Josh was able to simplify this with some diagrams, thanks, cheers!

[@iAmTheWagon]

Amazing. I’ve been waiting for anyone to make a video on this. I haven’t been able to figure out how to get intercepting to work with [slug] SSG routes. For example I have a page of products that are dynamically created from an api call and statically generated at build time. I want a modal to open when the products are clicked instead of navigating to a separate page and still have the ability to link to the product. Excited to see the full tutorial. I hope this will be addressed. 🙏

[@joshtriedcoding]

Interesting. Sounds like a very specific use case. I actually tried getting it to work the other way around, as far as I know, the docs explain it with a dynamic route. Looking into it for the long-form, cheers man

[@iAmTheWagon]

@@joshtriedcoding Yeah bruv. Idk if it’s something I’m misunderstanding or if it can’t be done. I think the docs could use a bit more info.

[@dnbull]

This is possible. I had to do this recently. Open an item > render item/[id] but it doesn't navigate. The trick here is to make sure you have `default.tsx` file.

[@nickderaj]

You could add params to the URL? e.g. [BASE_URL]/shop/clicked?product_id=12345 Then whether you open it in the modal or directly it should work right?

[@deniserodriguez3233]

You explained that so much better than the documentation. There’s just too many gaps in the examples they provide. Thank you!

[@MDKhan-ww5tp]

You are my guide you work like a charm what we ask you just like answer it i have never seen a man like you Love your videos

[@joshtriedcoding]

Thanks champ

[@codewithmirko1651]

I had the same thing in an ecommerce app i did in react a while ago! If i remember i was just using a different component for the modal login with the same code of the actual login page! Very interesting concept! Definitly need to play with it to grasp it better though! So far this next 13 looks really good imo as far as dx goes! 😊 Thx a lot for all these videos, really helpful amd clear despite the tricky concepts explained 💪

[@joshtriedcoding]

This really was a tricky one to explain and also to visualize on the thumbnail. A very cool challenge to do properly. Appreciate you man

[@raymondmichael4987]

Your drawings helps a lot to get the bigger picture; I’m waiting for the long video 😊 Greetings from Tanzania 🇹🇿

[@joshtriedcoding]

Really appreciate the feedback. That's why I do these. Great to hear it's actually a good idea

[@tarasdashkevych]

Interesting topic. Thank you for sharing it and showing how to use it 👍

[@vibray0]

Amazing way to break it down, it really helped. Thanks!

[@mharley3791]

Josh, great vid. Would love to see an actual coding demo of this concept

[@nwylynko]

Got this setup for my startup a couple weeks ago, it works well, and in my opinion is a good user experience. DX isn’t perfect as hot reload does a full hard reload a lot so goes to the page and doesn’t stay on the modal, but that’s minor. The file system for it is the worst, I think the modal should be co-located with the actual page, but that has issues too.

[@Douwab]

Really cool video like always! If I could change only one little thing, I would have liked to see the source code of the actual example after seeing it. I am pretty sure I understood all of it but just to have a mental image of what it looks like concretely, would have been better for me! Otherwise I love the flow of the video, going from general introduction, to more detailed into an actual example. Now let's try this in a test project! :D

[@joshtriedcoding]

Yeah having a minimal demo is a great idea. Really appreciate the feedback.

[@Brocollipy]

Wow great job explaining that. Many thanks.

[@fouadchahd2969]

what a great new soluton i have seen it before on instgram web, and wondered how they did it

[@nested9301]

Can i i know why we need that api folder where u create http verbs when u can directy acces databases with prisma in the server components?

[@CanRau]

Great video 🎉 I got it working couple of days ago after my comment tho currently I’m missing a way to not intercept links in certain scenarios like for example on mobile where a modal might be less desirable

[@nepcen]

I need some help . I want to pass some data between pages. for example, "/users" and "users/[id]". There is user list in /users page and /users/[id] page is a user detail page. Currently, i am fetching data with id but is ther any way to pass the user data while navigation?

[@alext5497]

I wonder how this works in the underlying React frame. Does it just cooy the component and paste it in 2 places?

[@dipupoawe9318]

Hey Josh, could you share a video of how you could use a standalone backend with NextJs and still benefit from server side rendering and all. My main question is how to share the token between the client's browser and the NextJS server. The NextJS server would need the token in order to make a request to my custom backend but the token isn't sent as a cookie

[@rahimco-su3sc]

hi josh !! there is some libraries such as react query and material ui that has to be in a react context provider which requires ussing "use client" ; so should we avoid ussing these libraries in next js 13 inorder to not lose the power of server components ?

[@joshtriedcoding]

No, not at all. You can definitely use these. Easiest way is to create a Provider component as a client one and wrap all children inside your root layout in it. In this provider, you can specify all the context you need. For code examples visit my github on either similarity-api or realtime-redis-chat, I think it's in both of 'em. If not, next long-form will definitely do this too

[@StephenJ-vo8mf]

hello. please what snippet did you use in next js to generate the layout component ? when you did lc, the layout was generated

[@StephenJ-vo8mf]

dude!!!! reply this comment man

[@prashlovessamosa]

Hey Josh always wait for your videos.

[@joshtriedcoding]

Appreciate you man. Means a lot.

[@muhafizahmed9964]

Hey josh i want your help i want the intersection routes to work only whem my website is on desktop but when my website is on phone i dont want intersection routes to happen. So now what to do?

[@omtechofficial]

I didn't expect this... But really means a lot... I got way better understanding now... Thanks a lot... But what default.js... and if there's folder/page.js inside model and than i access it through the URL... What will come... Intercepting routes is clear to me

[@helamaewerton6860]

I was struggling to solve how to redirect to other pages on ssr as the redirect object does in GetServerSideProps

[@ProtectedClassTest]

A perfect example of javascript going full circle, were back on AngularJS days.

[@amershboul9107]

your content in amazing man !! keep going

[@joshtriedcoding]

Cheers dude

[@escrkh]

I’m using with intercepting route but after refresh it turn to dynamic route how to disable it? I want it turn to intercepting route like first click.

[@aimonislam8007]

Is important to use app folder? Can we use it our own /pages dir something like custom app! If possible how to do?

[@JoseWaldier]

Is there any open-source project that applies this concept? Thank you Josh you are one of the best developers in this community. Keep it up bro

[@reubence_]

Great Video Josh!

[@naveedalirehmani4135]

I am experiencing this particular error. In my case, I was able to intercept a route and render a modal. However, the browser says this page does not exist when I hard refresh. Directly accessing the page via a link tag works, but a hard refresh results in a not found error. this is only happening when I implement the intercepting logic.

[@iPankBMW]

u need to use a file called "default.tsx" which returns null to make the page not display 404.Recomended by Nextjs docs in "Parallel routes" section. But its still buggy.

[@nikolakikanovic9740]

What happens if you click the "Sign In" button, which opens a modal, and instead of refreshing, you use Chrome's back button? Or, even better, what if instead of a modal with a sign-in form, you have an image slider (I forgot what it's called) and you slide through it twice and then press Chrome's back button?

[@iPankBMW]

Nextjs recomends to use router.back() to close the module. It work well if u are clicking on the buttons in the module to close it. But if i click "Back button" on browser it self or the back button on my mouse, it triggers back button twice, making the page to navigagte back twice...Im using nowdays popular ui library Shadcn ui Dialog (modal)...

[@nxshipon6470]

Thank you brother

[@bilbobeutlin3405]

Could be intresting for A/B testing aswell

[@kylemoran455]

This is interesting. Not really sure how useful it'd be for day-to-day apps outside of signin. Maybe some more examples of this would help me understand. Also curious about how this preforms vs the usual modal methods + code size. Lots of questions, cool video!

[@jaspreetmaan121]

in a instagram or twitter like app, where clicking on a post opens in a modal and refreshing takes it to a new page

[@omidsoleimani3817]

great video, PLEASE make a video about nextJs data fetching, when to use what! Fetch() with method POST / revalidate / preload() / cache() / ....

[@joshtriedcoding]

Check out my favorite way of data fetching here: kzbin.info/www/bejne/hp6znHR3qsSEfJY

[@ShayansCodeCommunity]

I am so excited!

[@joshtriedcoding]

that's good man

[@dileepa-mn2to]

you deserve more subscribers bro

[@sukritsaha5632]

Hey can you make a detailed video on Parallel and Intercepting routes?

[@mdabdurrahman7626]

Love from Bangladesh. always follow you as my idol 💝💝

[@joshtriedcoding]

Appreciate you man

[@denissorn]

Any particular reason to have a modal as a page instead of displaying it as a component?

[@joshtriedcoding]

Modals demand client-side interactivity for closing and opening them, this allows you to keep the client bundle smaller by allowing for server-only behavior

[@bogdimail]

There is one thing that is not mentioned in the Nextjs docs about the parallel routes and that is they only work in the topmost level dir and that's only in the "app" folder. If you have a nested folder the parallel routes won't work in there. So app/nested/@modal won't work but, app/@modal will.

[@iPankBMW]

But what if I want only the "/login" to be a modal and not a separate page? A modal that's above all other content, even on a hard reload or when accessing via a shareable link. I don't want the "/login" to be a separate, complete page. It's a poor user experience when a user sees two different views for the same thing. I understand that in some cases it can be good, but not for what I aim to achieve. In my actual project, I have "/pets", and there's a button that navigates to "/pets/create-pet". I need the "/pets/create-pet" to always appear as a modal above the "/pets" content. How do I achieve that?

[@raihan7422]

this is the video i really need for, i search it before but with keyword "shallow routing", it's kinda confuse me

[@joshtriedcoding]

Cheers

[@nodirbekrajabov4487]

How to use i18n in nextjs 13 app

[@williamdevonshire356]

cool

[@ozzyfromspace]

lol I've been using intercepting routes for a while and didn't even know it

[@razdingz]

bro u smart guy , when make that nextjs course with advanced features, including the fetch() and using the vercel storage , u know for us broke ass guys trying to learn and get money which will enable getting "honey"

[@frazuppi4897]

can't you just open a modal when you click the button? I am confused

[@joshtriedcoding]

The benefit of this approach is keeping everything server-side. Modals demand client-side interactivity, potentially bloating your client bundle. If there is no heavy-lifting involved, client components work just fine too

[@frazuppi4897]

@@joshtriedcoding got it :) Thanks

[@greendsnow]

IN -ter- CEPTION Like the movie.

[@joshtriedcoding]

hahah I wonder if you can intercept the interception modal. That would be wild stuff

[@webscrapeco]

Next video make Excalidraw DARK MODE JESUS I'M GOING TO STAB MY EYES OUT.

[@thiruvengadam96]

Make a video regarding lucia auth!

[@Shubham-yc6nz]

Thanks. Waiting for full stack course 😍 hope so it will be free 🙈 or super low price

[@khaledsanny4817]

NUXT is goat 😂 Next too though

[@agsrf6479]

Why would you want to show different things everytime a user refreshes a page? Isn't that unpredictable behavior and bad for UX?

[@joshtriedcoding]

Showing different things is completely optional, you can show the same component in both cases, or as I do, with very small variations. The benefit here is keeping things server-side, reducing client bundle size. Another awesome use case are little previews of something you click on, as you sometimes see in online stores

[@agsrf6479]

@@joshtriedcoding Oh that makes a lot of sense.

[@vickoalan]

Please don't forget Rest API in Next Js 13.4 ,

[@yilmazbingol4838]

what is the benefit of this?

[@ilan117]

Hallo Josh ❤ can we the code somewhere ?

[@ash1kh]

File based routing exist since nuxt 2 era. And now next suddenly found it 😅. Still they need to figure out auto import and a bunch of other magic 😅😅. So primitive.

[@andrewforrester6713]

I get it. I don't hate it. But I feel like it's too much magic

[@joshtriedcoding]

Understandable, it is very abstract

[@mma93067]

If only react-router added back the feature to use memoryRouter within browserRouter, we wouldn’t need this piece of over-engineering

[@runonce]

This was the missing piece for nested routes IMO.

[@airixxxx]

I find linking the router to folders very restricting, if you need to change the name of a route you need to make the change in several places whereas the React router you could have all your routes in one place, change once and update in every place of the app, also you can arrange your directories in any way you need.

[@AhmadMughal1]

Exactly my problem with this approach

[@nilsandresen97]

Drizzle when?

[@erickmoya1401]

NextJS is too much to even care.

[@furycorp]

Its all designed to lock your app into NextJS and Vercel

[@joshtriedcoding]

You can deploy NextJS anywhere you want these days, even self-host if that's your thing

[@2gbeh]

I'm lost

[@theoDSP]

That's messed up. Two different screens on the same URL. Really bad for UX.

[@meriofrog]

It is not the same URL. The URL actually updates in your browser, you just show a different UI. It was actually said in the video if you paid a bit more attention. Edit: 3:48

[@raihan7422]

i think modal in twitter use this method a lot, so it's not bad user experience

[@user-mz7tx7tq1q]

Next.js is now just adding up useless crap and making the working process harder and harder