It’s pretty cool for sure. Do you know if you can invalid in server actions doing invalidatePath(“/route/@other”). Like can we just invalidate the parallel routes?
lol it's funny how this is frustrating cuz this is my whole life working with libraries like this. For example, storybook has tons of issues all the time esp with tailwind, if you try drizzle-orm you'll be encountering tons of things you wish were like this or that or aren't documented yet, next 13 has compatibility issues with this and that. Jest is really not good with ESM stuff. Welcome to the world of problems 24/7 lol. That said... you've also encountered issues and shared your experiences with AWS Amplify so you've had your fair share too, and we're thankful that you shared those struggles
i faced some issues with parrallel routes as well. they would be perfect for my usecase but that will have to wait till they are stable. what you can try is creating another routegroup that wraps your parallel routes and put a layout in there that holds the main ( in my case the navbar) (app) > layout[with main] >> @left (hack) > layout, loading | @right (hack) > layout, loading
Whats the difference between plain components and parallel routes? couldnt we simply have LeftComponent, and use it in the layout.js? Is it because we want to have fetching features (like Loading/Error etc)?
I wonder if "beta' would have been a better description of the app router at this point? Looking at the issue report, It looks like this bug was discovered in the "pre-production version" of the app router (13.3.5-canary.12) and wasn't reported until May 4th which was after the release cut of version 13.4 (13.4 was released on May 4th, so that build happened prior). Regardless, if there is a better solution it should appear in the issue report, I would hate to think that other "solutions" are being documented elsewhere causing even more confusion. That's just me though. Keep an eye on their docs as the folks at next.js iterate their documentation weekly or bi-monthly. This "workaround" should show up there unless they have a patch ready to release on the next patch release date (which I have no privy to that knowledge). I'm loving these little tutorials you are presenting as well. I've seen a few other youtubers tackle the big points of the app router, but it seems (from my perspective) that you are the only one demonstrating all the little nuances of the app router. Please keep it up and thank you.
I am too digging into next app router and your videos a so great, it is like a friend who doing like what I do and he's sharing what he learned with me
I've had the same (sort-of) issues with the Nextjs documentation lol. I was particularly working with React Context, followed their instruction down to the tee, and it still did not work. Turns out I had to make a Reddit post asking about the problem to even have it working properly as intended.
I've got the exact same issue, and we're running into this in production. Horrible. @WebDevCody the 404 you get for "/another/page.tsx" is gone if you remove the "(group)" hack in the parallel routes. But then you won't get the individual loading files. It's a bad DX :(
i found the same thing something happens for all the routes following the parallel route like the "another" route you made , mine appears for seconds and throw 404 i have same folder structure with '@dashboard' and a route of 'create' but seems that "create" route dosn't work
I am not getting why parallel routes in itself is useful unless used together with interceptors .. or can someone help. me I say this because if the sole purpose is to handle the loading and error states then we can use the suspense on a giant component in the page without using the parellel routing .. can someone please help me know if I am making any sense and shed light to what exactly makes this feature unique
I was having (different) issues while trying to create a modal route.. I resolved it by adding a default.tsx component that returns null in the @ folder
THANK YOU! I wasted about 30 minutes figuring out what went wrong. I read about default.tsx but I wasn't sure what exactly it does and why my error is related to that. Thanks!
I faced the same problem, I solved it by putting the same content in page.tsx and default.tsx. I didn't see the issue not-found or blank page after I did that, I just got the content is rendered twice
Did you try to get rid of props.children and just make it children only like it is in the root layout? It is pretty weird because pokemon/other should work the way you have set it up, perhaps like you said yourself it can be a bug. Great video, tbh I haven't touched parellel yet. Might give it ago, currently working with an pagination setup with Prisma where it takes 30 documents from the DB, that does also cache it with Redis and it gives some issues to implement and is very slow or need to load everything in at once through an transaction, dunno. It is vague because I don't understand it properly myself.
@@WebDevCody Every version has countless bugs, just see the amount of minor + patches versions in each version. I don’t remember other videos if you also experienced bugs but in this video I see 2, I think this is extremely reasonable quantity before questioning if something is production ready. Again, I understand your frustration, and I’d be too if trying to use such a cool feature
Personally I expect in a production environment, at least, the features that are explained in docs works properly, bugs can happens, I mean, it will happen, but still, stuff that docs says it works, if doesn't, it's annoying
thank you for making this video, i mentioned the parallel routes stuff in your previous video and I knew that you are going to make a video for it 🤠
It’s pretty cool for sure. Do you know if you can invalid in server actions doing invalidatePath(“/route/@other”). Like can we just invalidate the parallel routes?
lol it's funny how this is frustrating cuz this is my whole life working with libraries like this. For example, storybook has tons of issues all the time esp with tailwind, if you try drizzle-orm you'll be encountering tons of things you wish were like this or that or aren't documented yet, next 13 has compatibility issues with this and that. Jest is really not good with ESM stuff. Welcome to the world of problems 24/7 lol. That said... you've also encountered issues and shared your experiences with AWS Amplify so you've had your fair share too, and we're thankful that you shared those struggles
i faced some issues with parrallel routes as well. they would be perfect for my usecase but that will have to wait till they are stable.
what you can try is creating another routegroup that wraps your parallel routes and put a layout in there that holds the main ( in my case the navbar)
(app) > layout[with main] >> @left (hack) > layout, loading | @right (hack) > layout, loading
Whats the difference between plain components and parallel routes? couldnt we simply have LeftComponent, and use it in the layout.js? Is it because we want to have fetching features (like Loading/Error etc)?
I wonder if "beta' would have been a better description of the app router at this point?
Looking at the issue report, It looks like this bug was discovered in the "pre-production version" of the app router (13.3.5-canary.12) and wasn't reported until May 4th which was after the release cut of version 13.4 (13.4 was released on May 4th, so that build happened prior). Regardless, if there is a better solution it should appear in the issue report, I would hate to think that other "solutions" are being documented elsewhere causing even more confusion. That's just me though.
Keep an eye on their docs as the folks at next.js iterate their documentation weekly or bi-monthly. This "workaround" should show up there unless they have a patch ready to release on the next patch release date (which I have no privy to that knowledge).
I'm loving these little tutorials you are presenting as well. I've seen a few other youtubers tackle the big points of the app router, but it seems (from my perspective) that you are the only one demonstrating all the little nuances of the app router. Please keep it up and thank you.
I am too digging into next app router and your videos a so great, it is like a friend who doing like what I do and he's sharing what he learned with me
If there are still bugs in nextjs app directory, then why they say that it's production ready and stable?
It's ready for people to find bugs in production.
@@Flash136 lol
I've had the same (sort-of) issues with the Nextjs documentation lol. I was particularly working with React Context, followed their instruction down to the tee, and it still did not work. Turns out I had to make a Reddit post asking about the problem to even have it working properly as intended.
thanks for mentioning the bug and also provide a related github issues
did you ever try to put the page.js of the another folder into a (hack) folder?
I've got the exact same issue, and we're running into this in production. Horrible.
@WebDevCody the 404 you get for "/another/page.tsx" is gone if you remove the "(group)" hack in the parallel routes. But then you won't get the individual loading files. It's a bad DX :(
i found the same thing something happens for all the routes following the parallel route like the "another" route you made , mine appears for seconds and throw 404 i have same folder structure with '@dashboard' and a route of 'create' but seems that "create" route dosn't work
Did you find anything
Cause inside [slug] directory the outside layout.tsx can't use @slot from the main root
extension for your file file tree to show like that??
I am not getting why parallel routes in itself is useful unless used together with interceptors .. or can someone help. me I say this because if the sole purpose is to handle the loading and error states then we can use the suspense on a giant component in the page without using the parellel routing .. can someone please help me know if I am making any sense and shed light to what exactly makes this feature unique
While i was deploying the app it throw the fetch error in production it works fine in localhost don't know why .it was showing fetch + prerender error
I was having (different) issues while trying to create a modal route.. I resolved it by adding a default.tsx component that returns null in the @ folder
hi can you send me github link i am unable to figure out how to make this intercepting route thing work
@@pradeepbisht3397 it's a private repo sorry, and I'm using parallel routes, not intercepting routes anyway
THANK YOU! I wasted about 30 minutes figuring out what went wrong.
I read about default.tsx but I wasn't sure what exactly it does and why my error is related to that. Thanks!
I faced the same problem, I solved it by putting the same content in page.tsx and default.tsx. I didn't see the issue not-found or blank page after I did that, I just got the content is rendered twice
is there a benefit of using parallel routes instead of server components with suspense?
It gives you the flexibility to invalidate the routes individually I think
Good job babe!
Which VSCode theme do you use?
Bearded theme
Did you try to get rid of props.children and just make it children only like it is in the root layout? It is pretty weird because pokemon/other should work the way you have set it up, perhaps like you said yourself it can be a bug. Great video, tbh I haven't touched parellel yet. Might give it ago, currently working with an pagination setup with Prisma where it takes 30 documents from the DB, that does also cache it with Redis and it gives some issues to implement and is very slow or need to load everything in at once through an transaction, dunno. It is vague because I don't understand it properly myself.
if you dont make a default.js inside both slots you wont be able to render another because there would be nothing in the same level.
I read recently in docs that this is the solution
"nothing in the same level", what do you mean by that? thanks
Your loading components are just functional components that return html, you have them marked as async?
Oh the loading.tsx ones? Yeah they don’t need async. Maybe that’s my issue?
Route groups is not a hack solution but they do need to update the documentation on parallel routes about that...
Apparently that intercepting route also has some bugs
Try adding default.tsx and return null as a fallback to avoid 404
default.tsx in root directory or inside [slug] ?
Oh cool, so now Next can do the thing that remix does
it has been fixed now with 13.5 version. but using segment and slut is still unsupported need to fix
Edit your comment bro and change the 'slot' spelling 😅
Yeah, its fixed now.
Try to add that props.left and props.right inside the RootLayout
Having the same issue here
Yeah, just wasted a day trying to make it work.. Could be powerful, but currently annoying
Man I am glad I don't do webdev anymore. Everything is made more complex than it has to be.
you have to add default page for every parallel routes and it will works fine.. thanks me later
Is that documented?
@@WebDevCody dont know actually i saw that on a youtube video .thats how he fix that
This doesn't work and I've tried all possible variations on this today. (I'm on Next 14.1.0)
NextJS is a mess at this point, a lot of bugs since the app router moved out from beta..
I pretty sure there are many bugs.
Do you think the NextJs team has the ability to create advanced features beyond the existing ReactJS features? 😲
What type of advanced features?
@@WebDevCody Parallel rendering is one of the advanced features combined with html response stream
Hi 👋🏼 cam you make your videos down right not top
also the dev server is too slow
I understand your frustration, but production ready doesn’t mean bug free.
Sure, but how many bugs can exist before it isn’t production ready?
@@WebDevCody Every version has countless bugs, just see the amount of minor + patches versions in each version. I don’t remember other videos if you also experienced bugs but in this video I see 2, I think this is extremely reasonable quantity before questioning if something is production ready.
Again, I understand your frustration, and I’d be too if trying to use such a cool feature
Personally I expect in a production environment, at least, the features that are explained in docs works properly, bugs can happens, I mean, it will happen, but still, stuff that docs says it works, if doesn't, it's annoying