NextJS Parallel Routes Explained with a Simple Example

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

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

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
NextJS Parallel Routes explained with a simple example - In this video, we'll look at how to use Next.js parallel routes and follow a simple example to increase your understanding. Learn NextJS parallel routes with this tutorial.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
🔗 Source Code Example: github.com/gitdagray/nextjs-p...
🔗 My Next.js Videos: • Next.js Tutorials for ...
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
NextJS Parallel Routes Explained with a Simple Example
(00:00) Intro
(00:12) Welcome
(00:33) Next.js Parallel Routes
(01:37) Slots
(02:57) Partial Rendering
(03:55) Loading and Error UI for Slots
(05:05) Include Slots in the Layout
(06:15) Why default files are needed
(11:39) Review
(12:16) Parallel Routes now have full support
📚 Tutorial References:
🔗 Next.js: nextjs.org
🔗 Next.js Parallel Routes: nextjs.org/docs/app/building-...
Was this tutorial about Next.js Parallel Routes with a simple example helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #parallel #routes

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

23 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@sunstar8417 23 дня назад

sir, you don't know, but many students in india are watching your html and css tutorial thank you for it sir ,

@MrAlao675 23 дня назад

This concept is exhausting. Will stick with the components for now 😅

@jfhandfield 18 дней назад

Can't wait for the modal video. Thank you for your time!

@user-qj4rr1rm8i 24 дня назад

Next.js is getting harder every day. I bet it will be even more challenging tomorrow.

@DaveGrayTeachesCode 24 дня назад

I hope I'm helping make it easier for everyone 🙂. This is a good feature for some use cases. I'll be showing one combined with Intercepted routes next week.

@jaatjii7823 23 дня назад

You spent lots of hours to build this functionality, and NextJS gives it out of the box. It’s not challenging; it’s developer-friendly day by day.

@soumadip_skyy_banerjee 23 дня назад

Congratulations 🎉 on your son's achievement Mr.Gray! Lots of love from the city of joy, Kolkata, India. He has done a remarkable job inspite of all the hurdles. Kudos to him! ❤ Definitely inspired me, to never give up, even in the murkiest times of my life 😊 🇮🇳💖🇺🇸

@DaveGrayTeachesCode 23 дня назад

Thank you!

@marcinzale 23 дня назад

Another good explanation. Thanks!

@DaveGrayTeachesCode 23 дня назад

You're welcome!

@VIIITTTTTAAA 23 дня назад

I'm just liking the great man's videos.

@DaveGrayTeachesCode 23 дня назад

Thank you!

@jaatjii7823 23 дня назад

Hi dave Thank you for all these beautiful videos. Thanks a million❤️

@irfansaeedkhan7242 23 дня назад

we need a production grade project from you sir

@rammehar5531 23 дня назад

Wow great features please create a one more video on it with the use cases of this parallel routing. Thank you

@voidmind 23 дня назад

I second that. The feature looks awesome, but I'd like to see it used in more real world scenarios

@Beast80K 21 день назад

Respected Sir, *Thankyou* for this simplified example ! Sir if possible, can you please make a video on how to optimize NextJS 14 project to get good Lighthouse score, what web vitals should be focused, what things affect scores etc.

@staticwasabi 22 дня назад

Thanks! Could you show a tab groups example?

@emmanueljulius1827 12 дней назад

In my usecase, I have an a dashboard with different user roles being returned on logging in, and I have to render a different dashboard view per role. So I'm leveraging nextjs parallel routes to implement this.

@DaveGrayTeachesCode 12 дней назад

Great example use case!

@aurobindobhuyan2107 21 день назад

3:36 Feeling great to be a part of 27.1%

@podoprigoraisv 14 дней назад

Thank for the video. As for me it is very controversial feature. I've tried to implement kind of "master detail" layout but faced with drawbacks for "not found" routes and with dynamic parameters for a slot nested routes. I've rejected from this feature in favor to conditional rendering that depending upon route parameters.

@DaveGrayTeachesCode 14 дней назад

Interesting! I use both route parameters and search parameters frequently.

@joe_j 22 дня назад

Can you do one on how I can use nextjs 15? Thankyou

@yarapolana 12 дней назад

What would you use the “default” for I am having a hard time understanding its use. Great video overall.

@DaveGrayTeachesCode 12 дней назад

Thanks - I show one example in this video where the default is rendered. It is a fallback.

@togya4 23 дня назад

Dave we want a new videoor whole full project with yhe new nextjs 15rc futures. Is that possible?

@DaveGrayTeachesCode 23 дня назад

Let's wait until it's a stable release 🙂

@togya4 23 дня назад

@@DaveGrayTeachesCode yeah totally right

@sarthakagarwal8521 23 дня назад

Hi Dave, What are benefits of using different routes here instead of having lets say two server components wrapped in suspense. Then also they will work independently and have separate loading states.

@DaveGrayTeachesCode 23 дня назад

Yes, it's basically the same thing. Next.js offloads suspense to the loading UI file. Using the router instead of code to apply both suspense and error boundaries.

@cb73 22 дня назад

Great to know how it works but what problem does it actually solve? I’ve yet to see anyone make the case.

@BilalAulakh23 23 дня назад

Sir i subscribed your channel

@DaveGrayTeachesCode 23 дня назад

Welcome!

@yashchauhan5710 12 дней назад

what if you want to have an entirely different ui for settings page? for this do i have to have conditional rendering in layout file?

@DaveGrayTeachesCode 12 дней назад

I would need to understand your structure better, but yes, you could take that approach.

@KapilSharmadeep 23 дня назад

Can you make. A video for writing e-commerce app using next js 14

@aliksargsyan2782 23 дня назад

Is parallel routes similar to computer architecture like multy core parallelism?

@DaveGrayTeachesCode 23 дня назад

Probably only in the way they both do something in parallel

@alirezatt4457 22 дня назад

❤

@tonystank8105 22 дня назад

the default part got me confused honestly.

@EverydayBeing-de1qu 20 дней назад

I feel like this is just over complicating things for no reason... What is the advantage of this compared to using standard suspense boundaries?

@DaveGrayTeachesCode 20 дней назад

It's also an error boundary and uses the Next.js router. You *may* consider those advantages or not. All frameworks are opinionated in some ways. This is simply the Next.js way.

@EverydayBeing-de1qu 19 дней назад

@@DaveGrayTeachesCode Okay thank you for the reply