How To Structure Your NextJS App With App Router - Intro To Routing - Route Groups - Deploy

Welcome back to the third video of the NextJS App Router series. This video will set the stepping stone to understanding many advanced concepts with the App Router.

The video covers the following:

✅ How To Create a NextJS App with App Router?
✅ Do You Need the src Folder For Your NextJS Project?
✅ What Is Routing?
✅ Why App Router Is Far Better Than The Page Router?
✅ How To Structure Your NextJS App With App Router?
✅ What Is A Route Group?
✅ How To Deploy The NextJS App on Vercel?

Let's GO 🚀

I take special care to provide you the best quality. Please SUBSCRIBE to the channel to show your support. Also, could you like/comment on this video so that it reaches others? Thanks! 🫶

Timecodes
0:00 - What To Expect From This Video?
00:58 - How To Create a NextJS App with App Router?
01:44 - Do You Need the src Folder For Your NextJS Project?
03:39 - NextJS App Router Folders and Files
04:01 - Run the NextJS App Locally? What is The .next Folder For?
05:44 - What Is Routing?
06:56 - Why App Router Is Superior To The Page Router?
10:40 - How To Create Routes and Structure Your NextJS App With App Router?
12:27 - How To Handle Components With NextJS App Router?
13:37 - What Are Route Groups? How To Create Route Groups with NextJS App Router?
16:28 - How To Deploy A NextJS App On Vercel?
19:01 - Wrapping Up & What's Next?

## ReactJS Playlist
- Learn ReactJS Fundamentally and Practically:


## 🤝 My Links:

## 👋 Like my work? Thank You. You can sponsor me from here:

## About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, YouTuber, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.

[KisConsultingGroup]

Tapa, my friend, in the last months I have bought a lot of courses on many platforms on frontend programming (JS, Next, React etc), free and paid I went through atleast 150 hours of educational content. I must say, so far in my journey to master frontend programming your videos were the most valuable and overall structured the best. To me personally you are really an unique teacher and I must say every second of your videos is filled with value unlike most of the other educational content on internet. I can see that you are putting a lot of value and energy into teaching and I just want to say I am eternally greatful for what you're doing here. You will stay remembered as the highest quality teacher I have seen so far.

[jlvbcoop]

1 week ago I started learning the app router, I already know the pages router. With your videos I will go faster and learn it better. Thank you.

[chaipanch]

Cleared a lot of misunderstanding I had while trying to figure out app router myself. Thanks a lot ❤

[ElHawary]

Just a friendly recommendation, If I'm searching for a way to specifically structure my app folders, it means I know everything you've said till 10+ minutes. Thanks for the great content.

[AnthonyObi-wrro]

I have been having problem understanding and differentiating the differences between the App route and the pages Routes but your explanation made it so so simple for me. You just gained a follower and a subscriber.

[MrKwizzles]

excellent content, really appreciated all the effort!!!

[madbuddha]

Thank you so much! Earned a sub from me for sure

[nandishug]

Good Explanation regarding app vs page router

[sublimeelectrons]

2nd. been waiting for this sir @tapas. Good day!

[infinioda]

please buy a hyperX mix solocast, it only costs 4k, as your voice is high pitched, the base gets amplified with cheap mics, thanks sir

[PranjalVerma-ibgb]

How to create custom routes using App Router. With page router its pretty simple. pages/products/[slug].js would have a route /products/slug-1. How can this be implemented using App Router?

[babulakter]

Route seperation is not clear. You did a trick there, you directly write the url in the addressbar and hit, which should reload the page and it does as expected. but what if I want to go to a different group route by a button click ? should it reload ? make this things clear please.

[nargisakther]

Not clear is the concept of creating a separate folder for each component in the component folder. Can you please explain? And one more thing, is it better to make the component folder into the src folder rather than the app folder, what do you think about it?

[nandishug]

Small query: in which nextjs version app and page router

[SumitSingh-wzwt]

But in case feedback components is used somewhere else also then where should i place feedback components