Next.js App vs Pages Router - Which One is Better?

Next JS app router versus pages router which one is better and which one should you pick for your next project? We will compare the two and find which one is better!

#nextjs #react #javascript #frontend

⏰ Timeline
00:00 - 00:29 Intro
0:30 - 1:36 React Server & Client
Components in App Router
1:37 - 2:15 Routing system
2:16 - 5:14 Caching Mechanism
5:15 - 5:48 Learning Curve
5:49 - 7:33 My experience building with the two routers
7:34 - 8:07 Should you pick
app router vs pages router?
8:08 - 9:57 Transition from app router to pages

🔗 RESOURCES:
💌 Frontend Newsletter:
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.

☎️ Book a 1:1 coaching session with me

🐤 Find me here

[hassanzafar]

you explained all the concept very well. i hope i ace my interview which is scheduled tommorrow.I am feeling confident and well-prepared, thanks to your thorough explanations

[siddhartha-]

2:16 You explained the point well, Ankita. When I was learning Next.js, I found it very confusing. I even deployed a project with cache-related errors and did not get the expected performance.

[dev.raghuvanshi]

last week i completed one project based on app router. app is better than page for better handling of sub-components.

[dilkhush-raj]

App router was tricky at first, but now I get it.
I have a question about how to make page transitions faster. When I switch to a different page, it takes a few seconds to change because it is dynamic (shows data based on user) and thus user clicks on link multiple time because they are unsure that it worked or not. I have tried using Suspense, which helped a bit, but is there anything else I can do?

[saralightbourne]

you know what you are actually so amazing i subscribed🥰

[rajlaxmisalokhe]

Ma'am can you please make a video of explaining dynamic routes and how to run them

[RakeshBitling]

Hi Ankita I have one query. I have nextjs application which has old version 12.3.4 having react 17 react-dom 17 codebase. Now I want to migrate to latest nextjs version 14+. Old version having page based routing was in place which is very old 2 years ago codebase with me in that codebase Material UI also version 4 resides in. So please guide me steps to migrate latest version with less code changes if required.very confused.

[Kulkarniankita]

Are you ready to move to app router from pages router? What do you think of the two? Let's discuss!

[sanjaybalnad]

Was page router serverless by default?

[ranakaleem]

Your nextjs course on udemy is not coming..why?

[treyrader]

rule of thumb: the more side effects an app has, the more likely there will be fleas