What are my thoughts on next.js app router vs pages router

Ranting at its very best.

What is vscode theme name?

Why don't you just change the page.tsx file name inside all of your folders? I think that's the point of this new approach to the folder structure

Yeah i tried converting my t3 pages directory to app directory and it wasn't a pleasant experience. There is much less community support upgrading the the app directory at this time. I'm going to stick with pages directory until app directory gets more momentum. Not worth the loss of dev velocity at this time for me. Will revisit in the future, as pages directory will be supported for many major releases for several years.

hey cody just want to tell you, you can stil search all of the files even though all of them have page.tsx, you can type command shift 5, and it will search the folder name, and the file will come.

Personally i loved the page.tsx name, made me see that this is the main file route for whatever folder, but yeah everyone can have different opinions, its dope how we have the option between pages and app router though.

What are your thoughts on UI component libraries with server components? I've heard most don't work because of client state that's usually backed into many of the components.

From where do you clone these projects? Or are they always project that you creat from scratch?

I been realize that workig with pages directory is much easier for me. That's why now i learn nuxtjs 😀

Honestly this new version of Next feels like a hacked version of Angular

I struggle a bit with server components and i18n, maybe I switch back to pages until all the libs catch up.

Don’t use app route😂
I am using app route and keep founding error. There are many conflicts with ui/js libraries and SSR. Eg. Chakra ui Color mode, dompurify, etc.

What’s the extension that shows the colored bar for the opening and closing tags?

I played a bit with app directory as well and here are some subjects that to me are a bit messy :

- I was hyped with the "loading/page/error" setup but in a real production case scenario, this is a mess. when you have multiples Api call on the same page. You wouldn't want to wait for all of them before showing the page. Since i've been using Astro, i've tried to emulate the "island architecture" and organize my code in component rather than "pages".
- When using a component lib ( Chakra for the most part) you almost have to tag everything as client, loosing the SSR capibilities of Next.

Maybe i'm using Next wrong, but i wouldn't really use this solution for heavy project. But I love to use it for POC or rather small project.

I guess it comes down to making the right decision depending on the project, you cant really have only on stack above everything else :)

With the mess that RSC looks like it will be, I tried out svelte and solid over the weekend and I must say they're looking pretty good. Both solutions feel so much less convoluted and less error prone.

I suggest you to look at Remix framework 👍

The name convention is a bit weird indeed but really when you will realistically have 5 open pages at the same time. Usually when you develop you focus on a page at a time plus the related components of that page with a loading and error tsx. So I don’t see that as a huge problem.

You're not a fan because you're not working on a single page at a time. Why do you ever need to open more than 2 pages??

Remember that app pages are twice as slow as regular pages in benchmarks. I'll stick to pages for that reason. I don't wanna increase my server costs just for some async components.

I have difficulty learning use-client. How does it work if I use "use-client" then initially it is rendered as SSR then after its been rendered will it turn into client or what ?

Anyone noticed the hot reloading in next 13 is a mess and way too slow?

Documentation till now is absolutely trash, imo, sadly

Just started learning Next with app router without never touching pages router. No problem with file namings and such, but data fetching seems to be quite a piece to learn. Coming from basic Vite/React app and separate apis, so now I’m quite confused, for what should I use the api folder 😅

I think tRPC still should be used in App Router cause the structure that it gives you like creating public or protected procedures or validation with zod or the middleware is quite hard to implement by yourself and it gives you them with clean syntax.

Great video but honesty, once we start using it more! You will see and understand the benefits from it. Am using it for like 6 months ish?? And it’s so powerful! What I do see though is that u basically use use client in all your pages which does make it user rendered instead of server side. I also see that you have set revalidate = 0 in your main layout which is going to force your whole project to fetch on request time instead of build time or revalidate in increments! Keep up the content though, love it ❤

it takes a while to learn, but i'm all for it!

still waiting for some more vue content.....

I don't like the nextjs's built in api. It is simple and that's also what it is made for - for simple cases. But if you have a huge projekt it won't scale architecture-wise.

Just let us use "my-custom-name-ignored-by-next-js.page.tsx" naming inside app directory

Haha I saw your tweet about page.tsx 😆 I agree with your points

your theme looks cool theme name?

Hey , please im having issues with docker seeing the way i import components in next with @/ till i use relative paths it works. Do you have a solution for this ? Thanks ! 🙏🏾

So they're just two ways of doing the same thing, with slight differences between them

My hold off for the app directory is that I’d like to have an electron app but nextron does not support nextJS 13 yet.

The "page.tsx" thing came for a reason, that's Next13, now provides different boundaries: Error Boundaries, Suspense, layouts, and templates, which's a trade-off of course
If they add an option where you can use both: pages' and app's approaches for creating pages, it would be cool

P.s. The app directory is away better, in my opinion 😅

Yeah, I'm watching from a distance but I'll wait until the ecosystem has matured before jumping in too hard.

What is the current tech stack u would recommend right now? like including your choice of framework, UI library, database, middleware, state manager etc..

regarding trpc, i remember someone mentioning from another video (can't remember which, might have been theo's) about a library called ts-rest.
I haven't tried it yet (even now), but i did check i out and at first glance it looks like it makes much more sense that trpc and might even work with the app directory for type safety.

---
btw, i'm still kinda new so i'm not sure if i'm asking the right question but,
what do you think about the tradeoffs that come with SSR by default?
If i'm understanding this correctly, the potential for reducing client-side JS is a lot but in return you have to make a lot of server-side calls.
Well, server-side calls aren't bad per se but, most hosting providers charge based on number of api calls or bandwidth (usually both).

so i imagine, in general, less JS but more api calls, so i'm not sure if this would be more or less expensive.

Can you make a vid on your thoughts about mongodb vs supabase?

I’m a huge fan of yours sir.❤ please reply 🙏

Having seven "page.tsx" open at the same time and trying to navigate back and forth is going to give me a brain aneurysm

Off topic, but what's your vscode icon pack?

The multiple `page.tsx` is what will stop me using this new thing

I prefer the app router and layouts