Next.js App Router Parallel Routes: Explained With Project

Рет қаралды 2,162

Күн бұрын

Do you know the right way to build Dashboards with Next.js? How do conditionally show-hide pages in a Layout? Welcome, Parallel Routes.
Hey, welcome back to another informative video from the "Full Stack With Next.js App Router" series. I hope you enjoy this one the same way you liked the previous videos from the series.
Let's GO 🚀
I take special care to provide you the best quality. Please SUBSCRIBE to the channel to show your support. Also, could you like/comment on this video so that it reaches others? Thanks! 🫶
Timecodes
0:00 - A quick intro
00:57 - The Need of Parallel Routes
04:04 - Let's Build An App, Expenso
07:13 - Parallel Routes and Slots
08:45 - Create and Manage 3 Slots
15:54 - Let's Create a Customer Slot
17:25 - Handling Loading & Error in Slots
22:12 - Creating Routes from the Slots
26:29 - Active State & Hard Navigation
27:51 - Fallback with default.js
31:41 - The Conditional Routing
33:26 - The End Notes
The Source Code Used In The video:
- github.com/tapascript/expenso
Join tapaScript Discord
- / discord
🤝 My Links:
- Blog: blog.greenroots.info/
- Follow on X(Twitter): / tapasadhikary
- Connect on LinkedIn: / tapasadhikary
- Follow My Work on GitHub: github.com/atapas
- Follow on Facebook: / tapasadhi
Special Links:
- Are you looking for the best NextJS templates to start your project development? Download and use them for FREE: www.wrappixel.com/templates/c...
- If you are looking for the best content management system, here is something for FREE that you can rely on: app.caisy.io/app/signup/mwiyy...
👋 Like my work? Thank You. You can sponsor me from here:
- Sponsor Me: github.com/sponsors/atapas
- Sponsor my Blog: blog.greenroots.info/sponsor
About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, KZfaqr, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.
You can find more about him at tapasadhikary.com.
#nextjstutorial
#next
#nextjs14
#nextjs

Пікірлер: 16

@arunbm123 Ай бұрын

yes I learnt something new Thank You..

@tapasadhikary Ай бұрын

Great, I am glad.

@Dontknow741 Ай бұрын

BEST EXPLANATION

@tapasadhikary Ай бұрын

Thank you

@rohitdasu 3 ай бұрын

So much value in a 30mins long video. Kudos to your efforts.

@tapasadhikary 3 ай бұрын

Glad you liked it! ❤️

@Anguraj92 3 ай бұрын

Thank you sir

@tapasadhikary 3 ай бұрын

Thank you so much! You are always been extremely supportive to tapaScript 👍

@user-qz9qk8pm2p 2 ай бұрын

Every time I shifted from a route group to another route group my page is reloading. Is it possible to prevent the reloading ? thanks in advance

@tapasadhikary Ай бұрын

I need to see the code, the default behavior is no reloading.

@Beast80K 3 ай бұрын

*Thank you,* for making these video tutorials Explanation was so simple & crystal clear. I have a doubt, Sir what can be done if external API used is currently down, its not good if user keeps going from pages to pages as everything will show error occurred. How can we shift in maintenance mode or something like that ?

@tapasadhikary 3 ай бұрын

You are most welcome! Yes we can and we can do it in the error.js file itself… say if your back-end is throwing an error saying the maintenance going on, you can get that as part of the error argument in the error.js file. Based on that error message or code you can show a component that says, Maintenance mode on… You can do this on per widget/page or you can also catch it as a global error to show it on the main page. In that case, you should have a global error page co-located to the top-level layout. I hope it is clear now.

@Beast80K 3 ай бұрын

@@tapasadhikary Respected Sir, thank you once again, if possible you may make a video on this topic, as it will be helpful for beginners.

@tapasadhikary 3 ай бұрын

@@Beast80K I'll make a video on error handling in depth soon… but before that a big one coming tomorrow that we must know before we know any other topic from Next.js. Stay tuned 😀