in the last 4 years, this man helped me go through most of the challenges i face as as self thought programmer. Today I work for an MNC and 30%-40% of the code solutions Implemented, I learnt from WDS.
The main benefit of this is being able to use the loading and error pages within each parallel route i am guessing. For most cases its fine to just import the server components, you hust have to remember to put your own suspense/error boundaries around them
I was wondering why this would be necessary when you could just import server components. This makes sense though. I could see the benefit of having the separate loading and error pages. I am not very familiar with using suspense/error boundaries, so that is something I need to delve into.
@@chrtravels loading and error pages are just a nice abstraction over having to put in your own suspense and error boundaries so it's a nice DX improvement for people less comfortable using them. That being said, it's worth knowing how to use them yourself as Suspense in particular is usefulfor other things in react, things like lazy imports and the new 'use' hook with promises as props both work very nicely with Suspense
Thank you for explaining parallel routes in such a simple and easily understandable way. By the way, could you also explain Drizzle the way you explained Prisma in one hour?
3:37 react has type for ts that makes it simpler to define types where u want to use children so you don't need to define type for children: PropsWithChildren
Hi, thanks for the video. I have a question tho, If I create a route with parallel routes, why do I need to declare/create the parallel routes for my nested pages, maybe I want them just for the main parent , feels a bit weird :|
The conditional rendering works the same way using parallel routes or not with slightly different syntax. if(!isLoggedIn) return Vs. if(!isLoggedIn) return login. Am I missing something?
This video did a good job of _how_ these works. But I really can't tell the _why_, because the examples are so generic. Is this useful for a multi-panel layout where you navigate within the panels separately? Maybe something like a playlist + music player?
would love a talk on how to create a template app that is shared between multiple clients. With tips on how to handle 1. unique assets 2. customer side configuration 3. adding and pushing updates across all instances of this app
6:41 I know you wanted to give a good example but this isn't one, authentication should be handled in the middleware. you could have checked for user role and displayed different components
this all started for just solving the issue of having a separate loading file for each component is silly. If that is the only benefit of this. Then this is an overkill
@@albin6126 This was a lifesaver for me though. I have a header in my layout that I need to renders different things in depending on the route. This way, I can pass in the parallel route component into my Header from each subroute and have them all server rendered (mainly because I can't access full route path in layout.tsx).
Hey Kyle, I'm curious if there's a method to eliminate the loading time experienced when navigating between pages in NextJS. I'm aiming to develop a Progressive Web App, but I've noticed that NextJS fetches each page from the server based on the URL, leading to some delay. This contrasts with React Router, where page transitions are nearly instantaneous since it doesn't require fetching the new page for every navigation. Is there a workaround or solution for this in NextJS? I almost think NextJS sucks for PWA.
@@vivekkaushik9508 Do you have any insights on implementing this in NextJS? Simply specifying 'use client' doesn't work, as the app's router is designed to deliver individual pages for each specified URL. I'm looking to enable the user to download the entire app, similar to the experience with plain React where the user downloads the entire app. Any suggestions?
even if you use middle wares and auth packages on this feature you get in trouble more because slots children or any props you are passing in your layout don't work as you expected. and your route system completely make parallel bugs.
The docs aren't clear but it sounds like the parallel route has to be a server component. I have a PostList server component, that I could turn into a parallel route, however I have a PostCard, which is imported into the PostList. The PostCart is a client component. So I would not be able to use the Parallel routing on the cards themselves? It's the cards that I would want to have the loading state on.
cool video, but I've still got no idea what the use case for the settings example is - isn't it simply fixing an issue that the parallel routes created?
2:00 why would they inject HTML into the suspense component as a property. Shouldn't that be a slot instead? That seems incredibly bad to me. I can't possibly think of a legitimate reason to do it that way.
Parallel routing is powerful, but it's absolutely annoying when use it in development mode. Go through the document many times and finally find out the issue only exist in development mode from your video... thanks for your video
i dont't know im not able to use parallel route just like how you do it. it worked for the root layout, but not for the nested route. i'm using nextjs version 14.1. maybe a little help?
Anyone know if it's possible to have a wrapper layout or page to pass in props to the slots? The use case if there was interactivity outside of the parallel routes that can show/hide a particular slot from a button click.
what if i want a diffeent page and dont want to create page under each @ folder and also divide my logic like all my code for new page will be in settings > page.tsx
Tried using this feature and had to back it out because its so unstable (for the more advanced uses ) the fact it's so buggy in the tutorial only proves this
Hi Kyle how do you do the shortcut to instantly imported the red tagging(error)(wait) that is not manually imported? what is the shortcut key? Thanks in advance.
You did an amazing job explaining this. It looks like a clever way to place multiple server components in a single page, until it doesnt. It gets annoying really fast with the nested files and development mode gets super buggy. I cant believe Next is releasing this, the framework was once an example of great DX...
I am new to Next.js. To be honest, this is crazy!! The whole file-based routing system is ridiculous. It is an anti-pattern as it violates the single responsibility principle and messes up routes with file paths. Sometimes the path is a route, sometimes it isn't, and sometimes it's conditional. Take Route Groups for example. If I need to add a "shadow group" folder when the project files have already grown large, I have to check every single import path below it. It's quite like Tesla's idea of single-pedal mode where you boost and brake on the same pedal and then you crash. Parallel Routes is an even more ridiculous idea. It's overkill when you can just use if-else. I understand there must be a reason for the Next.js team to consider. Maybe the reason is important and unspoken, and the mechanism is the best they can offer now. However, it is far from a good design!
You can change the indentation of your file tree on the left in VSCode, could you please do that? The default 2px indentation is horrible and makes it hard to see what folder is inside what folder.
thank you for the great video. can you make a video demystifying internationalization in the next js 13 using app router? I'm having a hard time setting it up in a way where the default locale does not pollute the url. thanks again.
Using i18Next, super easy to set up and works great. The default locale doesn't show up in the route and next handles all routing for you so if you never have to specify locale routes, it just does it
I did not understand a thing. Isn't it true that a route sits on a separate url? 1. Why do you render everything on one page? 2, How is it possible to have a parallel routes if a route is always loaded one at a time. If you have 2 route on the same route, ut's just a plain component, not?
Thank you for the explanation on parallel routes. However, I was wondering if you could possibly show me what the code in the 'wait' function, which is located in the 'lib' folder, looks like? I would appreciate your help.
I couldn't really understand the point of parallel routes over components as they already are until 9min into this video, with the advanced nested parallel routes... but then to see it doesn't work in dev mode?... Having to restart the dev server for it to work can make the problem really obscure.
Hi Kyle, when are you going to launch the Next.js course? I'm thinking about learning Next.js and there is no better teacher in the JavaScript world than you!
This feature is completely useless. Why create users and articles as "parallel routes" when you can just import the components into the dashboard and render them there
unable apply conditional routes to home page, i guess the layout for home page is RootLayout which is a little bit different, anyone have done it before? just wondering.
The dx looks awful. Having to restart the dev server frequently is annoying, not to mention the dev glitches that I have already spent hours trying to fix thinking it was a problem with my code.
Cool, would be nice if there was away to define common children compents like loading and error. Personally i prefer this over being verbose but not going to lie running in dev mode looked absolutely horrendous!
I started using nextjs on my journey but then changed to rust+ vite on the frontend and reduce ram usage from 100~120 MB to less than 10MB, that was before the newer nextjs versions btw
@@DaviAreias learning rust as well, but doubt i will push it in my company. It just makes no sense for them, since the bottleneck are the connection speeds and our database. but I will certainly use it for my own project. Don't know about vue though, react has a great ecosystem.
Can you make a video on how to create 2 diferent set of pages with same names but for mobile and for desktop so we don't need to have code mixed can have 2 diferent routing and as a plus if theres a way to make url only show main donain feven being in pages like maindomain/blog but i just see maindomain I was trying to do sometihng likes this App [...mobile] to catch all mobile (mobile) to group all mobile and create an invisible /mobile page.tsx store page.tsx page.tsx layout.tsx inside layout my idea was create an const isMobile = window.innerWidth
Thoughts on Parallel Routing in Next 👎 too much boilerplate 👎too buggy in dev (barely usable at times) 👎not ready for prod. Next should improve the DX immediately before pushing this further
Im not really fan of this feature. Just dont overthink things. You can create this "parallel" with simple container component with less complicated pre-requirements.
I respect you and appreciate the work you put into your courses, but given the quality of the recent React & Next docs, I think it'd be silly to take a course or look elsewhere for learning these technologies.
I disagree. The documentation says how things are. The course is using it in a professional manner. There was docs on react hooks, but his course changed how to actually use them.
What's horrifying to see is how people realying only on video insted of their offical documentation - video explained everything well and it was easy to grasp but you still gotta read the docs so you know more about it. Parallel routing definitely has its uses if you're building some complex dashboard . Like the most of questions you guys are asking would literally start making sense if you just read the docs once lol.
this all started for just solving the issue of having a separate loading file for each component is silly. If that is the only benefit of this. Then this is an overkill
Vercel needs to watch this video and improve the DX here for sure
seems very DX friendly to me!
Or we can switch to Remix
in the last 4 years, this man helped me go through most of the challenges i face as as self thought programmer. Today I work for an MNC and 30%-40% of the code solutions Implemented, I learnt from WDS.
Is this the birth of the term folder/file hell ?
yes.
The main benefit of this is being able to use the loading and error pages within each parallel route i am guessing. For most cases its fine to just import the server components, you hust have to remember to put your own suspense/error boundaries around them
I was wondering why this would be necessary when you could just import server components. This makes sense though. I could see the benefit of having the separate loading and error pages. I am not very familiar with using suspense/error boundaries, so that is something I need to delve into.
@@chrtravels loading and error pages are just a nice abstraction over having to put in your own suspense and error boundaries so it's a nice DX improvement for people less comfortable using them. That being said, it's worth knowing how to use them yourself as Suspense in particular is usefulfor other things in react, things like lazy imports and the new 'use' hook with promises as props both work very nicely with Suspense
this looks horrifying, so much overhead even in this super simple example
exactly my thots
I don't agree
Next.js is going to a wrong way. It creates a lot of overhead unneccessariely
I consider it would be easier to use middleware
next is just trash now, no more simplicty just more confusino
Its being complicated day by day easier the simpler the better
Thank you for explaining parallel routes in such a simple and easily understandable way. By the way, could you also explain Drizzle the way you explained Prisma in one hour?
drizzle is most like SQL. you can learn SQL and it'll transfer over pretty seamlessly
3:37 react has type for ts that makes it simpler to define types where u want to use children so you don't need to define type for children: PropsWithChildren
Great video! Thanks Kyle as always! 👍
7:29 insert a login page inside of dashboard isn't good idea, it should have its route alone
You know what! I really love your intro slogan.
Hi, thanks for the video. I have a question tho, If I create a route with parallel routes, why do I need to declare/create the parallel routes for my nested pages, maybe I want them just for the main parent , feels a bit weird :|
Yeah, that's really odd. I always have to add a default page that returns null to counter that. 🥲
Agree, I can use it to load analytics components separately but have to put default page to encounter that issue
The conditional rendering works the same way using parallel routes or not with slightly different syntax. if(!isLoggedIn) return Vs. if(!isLoggedIn) return login. Am I missing something?
i thought so, but i think pararrel routing can be utilize if you are in server component
happy new year kyle❤
This video did a good job of _how_ these works. But I really can't tell the _why_, because the examples are so generic. Is this useful for a multi-panel layout where you navigate within the panels separately? Maybe something like a playlist + music player?
would love a talk on how to create a template app that is shared between multiple clients. With tips on how to handle
1. unique assets
2. customer side configuration
3. adding and pushing updates across all instances of this app
It is today I got it. Your channel name is real. It is not just a fancy name. You really make stuff simplified.
sounds like a video for "why you shouldn't use Parallel routes in Next.js"
Thanks you bro!
I love your channel ❤️
You are doing a great job 👍
Can you also do a simple video on subdomain routing in React/Next.js?
Would love It too
WOW. this is amazing to learn.
Thanks!
You're welcome! I am glad you enjoyed the video.
This feature is good for a dashboard with a lot of graphs that can take a while to load the data needed to render the graphs
10:40 thank you for touching on this! It's a shame this is so buggy in dev
This nextjs dark magic is overcooked
This still easy, Intercepting Routes is an headache :D Hope you can have a video for it
Looks cool. I'll try it out.
Thanks, now i can improve my code
Great video Kyle, can you make a video about i18 in app routes?
6:41 I know you wanted to give a good example but this isn't one, authentication should be handled in the middleware. you could have checked for user role and displayed different components
It's too much for nothing my friend 😅
this all started for just solving the issue of having a separate loading file for each component is silly. If that is the only benefit of this. Then this is an overkill
@@albin6126 This was a lifesaver for me though. I have a header in my layout that I need to renders different things in depending on the route. This way, I can pass in the parallel route component into my Header from each subroute and have them all server rendered (mainly because I can't access full route path in layout.tsx).
Hey Kyle, I'm curious if there's a method to eliminate the loading time experienced when navigating between pages in NextJS. I'm aiming to develop a Progressive Web App, but I've noticed that NextJS fetches each page from the server based on the URL, leading to some delay. This contrasts with React Router, where page transitions are nearly instantaneous since it doesn't require fetching the new page for every navigation. Is there a workaround or solution for this in NextJS? I almost think NextJS sucks for PWA.
PWA and SSR doesn't make sense. In order for an app to be PWA you've to make the app CSR so that client can download the entire app and run it offline
@@vivekkaushik9508 Do you have any insights on implementing this in NextJS? Simply specifying 'use client' doesn't work, as the app's router is designed to deliver individual pages for each specified URL. I'm looking to enable the user to download the entire app, similar to the experience with plain React where the user downloads the entire app. Any suggestions?
@@movoyemickele why are you even using nextjs then. That's like buying a car to go to a store 100m from your home. Use Vite instead for your purposes.
@@movoyemickele if you don't use ssr, don't use next js
@@movoyemickele just use "use client" in the parent layout file
Bro, can you teach how to setup folder, to use StyleXjs with nodejs.
Top notch developer experience.
Next.js just amazing
even if you use middle wares and auth packages on this feature you get in trouble more because slots children or any props you are passing in your layout don't work as you expected. and your route system completely make parallel bugs.
and the worst part is the bug when in development, and the behaviour become more unpredictable
You are a Next js GOD
The docs aren't clear but it sounds like the parallel route has to be a server component. I have a PostList server component, that I could turn into a parallel route, however I have a PostCard, which is imported into the PostList. The PostCart is a client component. So I would not be able to use the Parallel routing on the cards themselves? It's the cards that I would want to have the loading state on.
cool video, but I've still got no idea what the use case for the settings example is - isn't it simply fixing an issue that the parallel routes created?
what is the advantage of this? We can also use swr to load each content on page.
2:00 why would they inject HTML into the suspense component as a property. Shouldn't that be a slot instead? That seems incredibly bad to me. I can't possibly think of a legitimate reason to do it that way.
Parallel routing is powerful, but it's absolutely annoying when use it in development mode. Go through the document many times and finally find out the issue only exist in development mode from your video... thanks for your video
Hi Kyle, what about creating advanced JS / TS / React course ?
What if I don't want User Settings and Article Settings but just want /dashboard/settings with Settings folder?
use default and add nothing in it
i dont't know im not able to use parallel route just like how you do it. it worked for the root layout, but not for the nested route. i'm using nextjs version 14.1. maybe a little help?
Anyone know if it's possible to have a wrapper layout or page to pass in props to the slots? The use case if there was interactivity outside of the parallel routes that can show/hide a particular slot from a button click.
i cant even begin to imagine what this would be like in an enterprise app adopting this feature 🤣
This feature may seems useless to some ppl but along the line it comes to tackle some problems i.e intercepting routine
what if i want a diffeent page and dont want to create page under each @ folder and also divide my logic like all my code for new page will be in settings > page.tsx
What are the benefits of doing it this way? Is it faster/more performant?
Tried using this feature and had to back it out because its so unstable (for the more advanced uses ) the fact it's so buggy in the tutorial only proves this
it's useless don't use it
Like this if you appreciate Kyle's content but need to 1.5x to not follow asleep
Hi Kyle how do you do the shortcut to instantly imported the red tagging(error)(wait) that is not manually imported? what is the shortcut key? Thanks in advance.
Ctrl + . Will bring up the code actions in vscode which has many options, here you have the option to auto import the function
@@debopamgupta Many thanks bro!😁
You did an amazing job explaining this.
It looks like a clever way to place multiple server components in a single page, until it doesnt.
It gets annoying really fast with the nested files and development mode gets super buggy.
I cant believe Next is releasing this, the framework was once an example of great DX...
I am new to Next.js. To be honest, this is crazy!! The whole file-based routing system is ridiculous. It is an anti-pattern as it violates the single responsibility principle and messes up routes with file paths. Sometimes the path is a route, sometimes it isn't, and sometimes it's conditional. Take Route Groups for example. If I need to add a "shadow group" folder when the project files have already grown large, I have to check every single import path below it. It's quite like Tesla's idea of single-pedal mode where you boost and brake on the same pedal and then you crash. Parallel Routes is an even more ridiculous idea. It's overkill when you can just use if-else. I understand there must be a reason for the Next.js team to consider. Maybe the reason is important and unspoken, and the mechanism is the best they can offer now. However, it is far from a good design!
all these issues in dev mode doesn't worry anyone here ?
You can change the indentation of your file tree on the left in VSCode, could you please do that? The default 2px indentation is horrible and makes it hard to see what folder is inside what folder.
Why not using middleware for this?
how does this differ from components?
why is this a thing if you could do the same thing by conditionally rendering components that do the same thing?
thank you for the great video. can you make a video demystifying internationalization in the next js 13 using app router? I'm having a hard time setting it up in a way where the default locale does not pollute the url. thanks again.
There is a really cool library called "next-roots" that have a great i18n solution .
+1
Using i18Next, super easy to set up and works great. The default locale doesn't show up in the route and next handles all routing for you so if you never have to specify locale routes, it just does it
I did not understand a thing. Isn't it true that a route sits on a separate url?
1. Why do you render everything on one page?
2, How is it possible to have a parallel routes if a route is always loaded one at a time. If you have 2 route on the same route, ut's just a plain component, not?
Why does the course say "next.js coming soon"? Has it not been released yet?
Thank you for the explanation on parallel routes. However, I was wondering if you could possibly show me what the code in the 'wait' function, which is located in the 'lib' folder, looks like? I would appreciate your help.
probably just something like `const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))`
@@BradenKelley Your answer helped me understand it better. I appreciate your assistance.
I couldn't really understand the point of parallel routes over components as they already are until 9min into this video, with the advanced nested parallel routes... but then to see it doesn't work in dev mode?... Having to restart the dev server for it to work can make the problem really obscure.
One of the turn offs here is restarting dev server.
Well I don't have a use for the complicated parallel routing for now😊
Hi Kyle, when are you going to launch the Next.js course?
I'm thinking about learning Next.js and there is no better teacher in the JavaScript world than you!
Its in the description
It will most likely be this month
IMO, Vercel took this simple concept and made it 10x more complex.
Hello, I wanted to know if with your videos there is the possibility to put subtitles in French?
thank you !!!
You can name pages components with different names other than just "Page"?!
i love your hiar bro
I mean that the component folder in react is dead because now every pages have his folder component.
This feature is completely useless. Why create users and articles as "parallel routes" when you can just import the components into the dashboard and render them there
I have been asking myself this exact question.
probably useful with shallow routing. layout components wont remount, data wont be refetched
In NextJS app-dir each route can have it's own loading, error pages, this feature allow you to separate the logic.
Also share the layouts.
@@neociber24 what's stopping you from defining those components in their own files and just importing. No need for any special feature
Agreed. This is some over engneered bs. And buggy as hell
What is a good use case for this?
Making developers switch to vue or svelte, I guess...
@@DavidSmith-ef4eh fr
@@DavidSmith-ef4eh lol thats why I switched to sveltekit, but then switched back after a month because uk,I do not want to be a broke
Bro just rediscovered Components 😂
unable apply conditional routes to home page, i guess the layout for home page is RootLayout which is a little bit different, anyone have done it before? just wondering.
The dx looks awful. Having to restart the dev server frequently is annoying, not to mention the dev glitches that I have already spent hours trying to fix thinking it was a problem with my code.
True. Classic front end bloat
Cool, would be nice if there was away to define common children compents like loading and error.
Personally i prefer this over being verbose but not going to lie running in dev mode looked absolutely horrendous!
Great video. But I decided to skip Next JS only because the server error on each render/code change 🤧
Sounds like a code problem, not a Next JS problem ;)
That means you have an error... Next js hot loading works just fine
Way too many abstractions. This makes me so happy I’m learning HTMX!! We’ve really gone crazy with the frontend frameworks. 😅
Crazy. I wanted to switch my teams project to the new app dir structure, but I guess we'll just stay with pages forever.
I started using nextjs on my journey but then changed to rust+ vite on the frontend and reduce ram usage from 100~120 MB to less than 10MB, that was before the newer nextjs versions btw
@@DaviAreias learning rust as well, but doubt i will push it in my company. It just makes no sense for them, since the bottleneck are the connection speeds and our database. but I will certainly use it for my own project. Don't know about vue though, react has a great ecosystem.
The folder hell
learn by doing
How is this a benefit over just creating components and conditionally render them?
in this point of time, nothing.
parallel routing
Hot damn, yet another way to do the exact same thing 🤣
Can you make a video on how to create 2 diferent set of pages with same names but for mobile and for desktop so we don't need to have code mixed can have 2 diferent routing and as a plus if theres a way to make url only show main donain feven being in pages like maindomain/blog but i just see maindomain
I was trying to do sometihng likes this
App
[...mobile] to catch all mobile
(mobile) to group all mobile and create an invisible /mobile
page.tsx
store
page.tsx
page.tsx
layout.tsx
inside layout my idea was create an const isMobile = window.innerWidth
What a complete mess, I fail to see how this is simplifying my app code except bloating it. Perhaps it has uses in larger app code bases?
Thoughts on Parallel Routing in Next
👎 too much boilerplate
👎too buggy in dev (barely usable at times)
👎not ready for prod. Next should improve the DX immediately before pushing this further
Just look how many files he had to create. And we all know that creating files is the slowest part of developing :D
Is the purpose of this to increase app performance or just to improve the dev experience?
Great. I always wanted to restart my env after a change. Nextjs is really pushing things further...
Though NextJS makes me give weird names to my files...I like weird names better within JS code in strings
Im not really fan of this feature. Just dont overthink things. You can create this "parallel" with simple container component with less complicated pre-requirements.
This looked cool until the advanced routing section. DX took a nosedive at that point, should've left the feature off until the DX is baked
I respect you and appreciate the work you put into your courses, but given the quality of the recent React & Next docs, I think it'd be silly to take a course or look elsewhere for learning these technologies.
No offense, but this is a stupid comment. A lot of people prefer to learn by watching videos.
I disagree. The documentation says how things are. The course is using it in a professional manner. There was docs on react hooks, but his course changed how to actually use them.
What's horrifying to see is how people realying only on video insted of their offical documentation - video explained everything well and it was easy to grasp but you still gotta read the docs so you know more about it. Parallel routing definitely has its uses if you're building some complex dashboard .
Like the most of questions you guys are asking would literally start making sense if you just read the docs once lol.
NEED MORE FILES
Why it's so much overly complex
this all started for just solving the issue of having a separate loading file for each component is silly. If that is the only benefit of this. Then this is an overkill
Why can't we just render components rather creating parallel route