NextJS Parallel Routes Explained with a Simple Example
ฝัง
- เผยแพร่เมื่อ 27 มิ.ย. 2024
- 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
sir, you don't know, but many students in india are watching your html and css tutorial
thank you for it sir ,
Next.js is getting harder every day. I bet it will be even more challenging tomorrow.
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.
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.
This concept is exhausting.
Will stick with the components for now 😅
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 😊 🇮🇳💖🇺🇸
Thank you!
Can't wait for the modal video. Thank you for your time!
Hi dave Thank you for all these beautiful videos. Thanks a million❤️
Another good explanation. Thanks!
You're welcome!
I'm just liking the great man's videos.
Thank you!
we need a production grade project from you sir
Wow great features please create a one more video on it with the use cases of this parallel routing. Thank you
I second that. The feature looks awesome, but I'd like to see it used in more real world scenarios
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.
3:36 Feeling great to be a part of 27.1%
Thanks! Could you show a tab groups example?
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.
Great example use case!
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.
Interesting! I use both route parameters and search parameters frequently.
Can you do one on how I can use nextjs 15? Thankyou
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.
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.
Sir i subscribed your channel
Welcome!
What would you use the “default” for I am having a hard time understanding its use. Great video overall.
Thanks - I show one example in this video where the default is rendered. It is a fallback.
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?
I would need to understand your structure better, but yes, you could take that approach.
Can you make. A video for writing e-commerce app using next js 14
Great to know how it works but what problem does it actually solve? I’ve yet to see anyone make the case.
Thanks for a great tutorial, just have a question: is it possible to make parallel routing with diffrerent nextjs projects for example localhost:3000 and localhost:3001, localhost:3000 has sidebar of dashboard and localhost:3001 apper in dashboard if we navigate to it but sidebar stays from localhost:3000.
No, the parallel routes must be within the same project.
Dave we want a new videoor whole full project with yhe new nextjs 15rc futures. Is that possible?
Let's wait until it's a stable release 🙂
@@DaveGrayTeachesCode yeah totally right
Is parallel routes similar to computer architecture like multy core parallelism?
Probably only in the way they both do something in parallel
❤
the default part got me confused honestly.
I feel like this is just over complicating things for no reason... What is the advantage of this compared to using standard suspense boundaries?
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.
@@DaveGrayTeachesCode Okay thank you for the reply
Next 14 will work with this 😂?
Yes
I'll stick to using components, this is taking it too far imho 😅