Next.js App Router Parallel Routes: Explained With Project

Подписаться 19 тыс.

Просмотров 2 тыс.

50% 1

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, RU-vidr, 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

Опубликовано:

23 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 16

@arunbm123 Месяц назад

yes I learnt something new Thank You..

@tapasadhikary Месяц назад

Great, I am glad.

@rohitdasu 3 месяца назад

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

@tapasadhikary 3 месяца назад

Glad you liked it! ❤️

@Dontknow741 24 дня назад

BEST EXPLANATION

@tapasadhikary 23 дня назад

Thank you

@Anguraj92 3 месяца назад

Thank you sir

@tapasadhikary 3 месяца назад

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

@swaponsaha8111 3 месяца назад

so nice dada

@tapasadhikary 3 месяца назад

You are most welcome, Swapon 👍

@user-qz9qk8pm2p Месяц назад

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 😀