Shadowing Practice: Best NextJS Folder Structures | Beginner - Intermediate - Advanced - Learn English Speaking with Video

A lot of people struggle with organizing their Next .js apps.

They tell themselves that they will eventually organize their project, but all that means is that they will end up having a components folder with 100 different files.

And what's the problem with that?

Well, if you ever want to build a website that has any chance of scaling, then you have to understand how to properly structure your projects.

And this is exactly what I will be teaching to you in this video.

We will go over three different folder structures for the same app, from beginner to advanced.

And if you already have a website up and running, I have a question for you.

Do you ever feel like your cloud platform is holding you back?

Maybe you've hit limits on collaborators, run into surprise builds, or wasted time juggling multiple services just to get one app online.

It's frustrating and it slows down your team.

And that's where today's sponsor, Savala, comes in.

It's an all -in -one platform with no artificial limits.

Unlimited collaborators, unlimited parallel builds, and no restrictive tiers, so your team can scale without worrying about paywalls.

And the best part is that Sevala runs on Google Kubernetes engine in 25 regions for extremely world -class reliability.

Plus, it bundles everything you need under one roof.

That means managed databases, object storage, instant preview apps, and advanced pipelines, all with usage -based pricing so you only pay for what you use.

And also, Sevala is backed by Kinsta.

That means that you're going to get enterprise -grade security and real developer support when you need.

So if you're interested in checking out their easy -to -use platform and actually start building,

try Savala today by clicking the link in the description and you will get $50 in free credit.

Again, thank you so much Savala for sponsoring this video and let's dive in.

Okay, so before I show you guys the beginner, intermediate and advanced folder structure, we built this app over here.

It's a mocked website using Next .js.

And we built the same app using all of the different folder structures.

So you guys can more easily understand the difference between them.

And what this is, is a simple events, community events planning app.

So you can obviously create different events.

And users can go ahead and click on those events, see the events, and RSVP if they want to, they can see the list of different events, and so on.

So this is just a simple website, it has different parts of it, different aspects.

There's like your profile page, there is the events tab, create event page, and there's also some marketing stuff like the about page and the FAQ.

So I think this example will be good because it will exemplify what a real production website would look like, right?

There's going to be routes that are authenticated, like the profile routes and the create events routes.

There's going to be some routes that are for marketing, like I said, and the way you structure that in your project is going to differ a lot.

So this is what we built.

Now let's get into the beginner folder structure.

And here it is.

This is how I would structure a beginner Next .js project.

Now I want to start every single one of these examples

that I'm going to be showing you guys with explaining to you guys when I would recommend you to use this.

So I would recommend you to use a beginner folder structure like this one.

If either you are a beginner, of course, by the name or if you are any other type of developer

that is building a small project

or maybe just trying to spin up an MVP in one or two days and your main purpose is to ship fast.

So what a lot of people get confused with is they see this as being a beginner folder structure, right?

And they imagine that this is just for beginners.

But no, this can also be the folder structure you use for building applications

that you just simply want to develop faster, right?

And I don't see a problem of that at all.

This is how you create an X .js project.

And this is probably what you're most used to, because most YouTube tutorials will have a similar folder structure.

So what am I talking about here?

What is the bulk of this folder structure?

So obviously, we have here a app folder, right?

And this app folder, what you would do is you would keep all of your routes in each of their individual folders.

So keep it simple, create the routes inside of the app folder, create the different pages, and maybe you'll have route groups, like I have here the dashboard route,

which has inner routes of inside of them, as you can see, but each of them simply have a page of .tsx inside of them,

maybe a layout, and all of them would be probably server components.

Now, that means that if you ever need any client functionality, like any kind of client components,

you would put them in this generic and general components folder.

And here you would put all of the different components that aren't routes in your project, including, for example, stuff related to forms,

maybe a button that is a client component, right, because you need an on click, and even your nav bar as well.

So keep it simple, put all of them over here, not much organization, obviously.

these components are used in this routes over here.

Some of them may be only used once.

But we're keeping them all inside of there because that's easier for us to quickly know where our stuff is.

Also, we would probably see a shared lib folder.

So we would have here some helpers, like if you're going to have a database, you might have a function for a file with some database information here, I'm literally just providing mock data.

But you might have a fetters file, right?

Some some way for you to deal with how you're fetching your data, some utility stuff, like the class name function that you have from till we merge, stuff like that.

And it would all exist here.

And you would just reuse it whenever you need inside of your project.

Now you would also have an API, right?

That API would exist in this API folder, it would just have simple routes that you would create post and get requests inside of it.

And then obviously call them directly inside of your application.

Now, the core idea here is being fast, right?

So this is what most people think of when they think of an X .js app, right?

There's an app folder with routes.

There is a components folder with UI.

There's a lib folder for helpers.

Maybe there's a types folder using TypeScript.

And there's always obviously a middleware.

In this case, we're just having a simple middleware here, nothing really big.

But this is what you would picture.

And this is good because it's easy, it's familiar, everyone knows, and it's really easy for you to just quickly spin up an MVP for maybe a project that you're launching,

validate your idea, see what people think, and get feedback.

Or if you're a beginner, this is also really good

because you can practice with thousands of examples out there of people doing the exact same thing as you, and you will actually eventually get better and be able to make the decisions on your own.

Now, there's some pros and cons that I want to address here.

For example, the main pro is that this is super easy to learn, fast to build, and there's basically no folder structure, right?

It's just minimal amount of folders and organization.

Now the cons is that obviously, this gets really messy as your features grow.

Why?

Because picture this, we have this component over here, right?

The event card.

Now let's see where this component is called.

This component is called only in the events list, right it's only called here now why do we put this in this components folder

because usually if you want to reuse it it's a card right you could

but right now we're not doing that

but as our project grows imagine in the future you just kept adding more components to this components folder

100

and eventually this components folder has like 100 components 100 different files

101

and you don't know where this event card is

102

when you're looking for it to use it

103

or maybe you're even in this events list component

104

and you see this

105

and you're like oh where is this I mean you can obviously click here

106

but you get a bit lost right it's good to have

107

everything contained parts of your website be divided by different purposes in them

108

and you'll see

109

that more as we progress in the different folder structures also this is extremely hard for you to test

110

because everything is so grouped together that nothing is in isolation so it's difficult for you to actually predict the behavior.

111

And if you're against testing, I'm a big against sometimes, you know, sometimes some testing is good, some testing is bad.

112

But I think that if you're going to put out a production level app, I think some testing needs to happen.

113

And in a beginner project, you don't have to worry about that at all.

114

So that's why not having stuff in isolation and having stuff just grouped together is totally fine.

115

Now let's get into the intermediate structure.

116

This structure immediately, as you might notice, is a bit different.

117

There's way more folders than we had before.

118

There's some stuff, for example, there's testing in here.

119

But we'll get to that in a second.

120

I want to first talk about when I would recommend using this.

121

And I would say that this is probably the stage in which most people will be in.

122

Other than the beginner, I would say like if you're if you're trying to produce an app and publish it for people, this is probably what you would see.

123

So I would use this if you are trying to actually grow an app.

124

It doesn't have to be a huge app.

125

It doesn't have to be a huge product.

126

It could be maybe a team of even two people, two to six people.

127

I would use this if you're building a website which has way more pages than normal.

128

So we have here an app folder.

129

And because we have more pages, you see we have a lot more routes over here.

130

Each of them might even have individual internal routes.

131

We are actually organizing them.

132

Now, some people don't like putting parentheses for folders in Next .js, also known as route groups, because they're not really routes,

133

they're just for organization purposes.

134

Well, I think it's super useful.

135

Like, if you're going to have a lot of different parts of your website, you want to organize them together.

136

So like, every route related to authentication will be put inside of the auth route group.

137

Every route that is part of the dashboard, so like the events, the host, the profile will be part of that.

138

And everything related to marketing, such as the pricing page, maybe the FAQ, the about page will be part of the marketing route group.

139

So that's one of the biggest parts of the intermediate project, a lot of focus and organization.

140

And the main idea with this folder structure is to add very clear boundaries.

141

So for example, we have, you know, you guys know already what the app folder is, right?

142

Just to render your routes, you guys know what the API folder is, right?

143

Just to make server routes.

144

But then what would we do with this?

145

So as you're building your app in an intermediate folder structure, you would create all of your database auth business logic inside of this server folder.

146

And for each of them, you would abstract it by creating a folder for each specific type of service.

147

So I have here an auth folder for everything related to that.

148

Then you can have a DB folder, right?

149

I would personally, if you're building a more intermediate project, probably use some sort of good,

150

reliable database and some sort of ORM to support that database, which in this case, I would always recommend Prisma,

151

have a huge course on it if you guys want to check it out on YouTube for free.

152

But I love Prisma, and I would probably use something like that.

153

I don't have all the configuration files here as well.

154

Then I would also recommend that you use some sort of server state manager, right?

155

Something in the realms of, for example, React query, something like that.

156

And for that, you would probably want to organize your API requests in whichever way

157

that makes sense to whichever framework you're using.

158

Since I just mentioned 10 stack query, there's obviously the concepts of mutations and the concept of queries.

159

So I would organize my mutations and queries maybe in a way like this.

160

And obviously there's also the services.

161

If you have any type of backend services, any type of vendors that you guys are dealing with in your project, such as Stripe, all that kind of stuff,

162

you might put them here as well.

163

Now, this is just the backend.

164

This is how you would organize your backend.

165

But when you're building your front end, on top of the different routes that you have over here, the routes have inside of them different features, right?

166

The homepage might have 10 different features inside of it

167

that should all exist in a different part of the project because they all are independent.

168

So the features is used for creating user facing and user interacted pieces of UI.

169

So these over here would probably contain a mix of some small UI plus server actions.

170

So like the RSVP feature is a feature, right?

171

It has a UI, right?

172

It has the maybe the part of the website where you can RSVP.

173

And then it has obviously all the stuff that comes with it, like the backend interactions that you would need to make and so on.

174

There's also the events, which is way bigger because this whole thing is all about events, right?

175

Create an event, reading an event, editing an event, all that kind of stuff would exist in a folder like this.

176

That could involve some server actions that would exist here, or that might involve some UI that would exist here, like that event card that I mentioned in the previous folder structure.

177

And also any hooks that you might want to reuse throughout this individual feature.

178

So this is the main idea.

179

We are dividing our UI of our project into folders

180

that will group everything related to it together so that it's way easier for us to know.

181

Now, if we go ahead and see the event card component, right?

182

If we were to, now we're reusing it in many places, but if I were to go over here and see it appearing on this page, right, I saw this event card over here,

183

I knew I would probably know immediately that it is part of the features folder in the events folder in the components, and then there's the event card.

184

So that's the main idea here.

185

Now, one thing as well, I would say this are smaller, but obviously, we would have the same live folder that we had before.

186

And also, if you're building an intermediate project, I would highly recommend giving a lot of time into thinking about caching in order for you to optimize your,

187

obviously your API requests, make your website load faster.

188

With Next .js, that is a big issue.

189

So I would recommend spending time on that.

190

And then there's some other stuff that are more like not a requirement.

191

I like a UI folder, right?

192

And this is different from, for example, the UI folders we have on the features, because these are more generic components that you just reuse.

193

Like every time you have a button that you need to use in your project, you create a button component that is unique to your project

194

so that you don't have to rewrite the same logic multiple, multiple times.

195

An empty state is another one.

196

There's going to be multiple scenarios in your app where you're fetching data and maybe there's no data there, and you have to account for that case.

197

In both cases, you want to put a unique empty state that will appear in your app.

198

Maybe it's a little image.

199

maybe it's a text, whatever you want, and just reuse it like that.

200

And all that will exist inside of the shared UI folder.

201

Now the main pro for this specific folder structure is that out of the three, in my opinion, is the most fun to play with

202

because I think it isn't too messy and it isn't too strict, right?

203

So this could scale to real products, there is the ability to test.

204

So we have a logic here that is abstracted enough that you can isolate it and test it.

205

I forgot to mention, we have here our test folder, right?

206

And there is a clearer boundary between the client and the server, right?

207

We have our server stuff and set of our routes if we need to and also in this server folder here.

208

And we have our client stuff if we need to as well, inside of the components folder.

209

And if we ever need to have any server interaction, on top of that, we have some server actions.

210

Now, the cons is that, obviously, it's more of a con related to the beginners folder structure, which is there's more folders, more conventions.

211

Because of the way you're structuring this, there might be a risk of duplications if you're not really careful with how you're establishing your boundaries, how you're establishing, like, when you're creating folders,

212

you really want to be careful with where you're creating folders, if it makes sense.

213

And I feel like this is an issue that grows even more when we get to the advanced one.

214

But it's definitely a cost that you have to pay from the benefit of having a less messy project.

215

Now, the main difference between this one and the last one is

216

that we move a lot of the logic that was existing inside of here into the features folder, into the server folder, and so on.

217

Now we get to the advanced structure and the advanced structure is uh one

218

that i don't personally recommend uh i don't personally recommend i think

219

that this is what i would expect to see in a

220

big company you know something in the realms of this not maybe not exactly the same thing

221

and that's something i wanted to tell you guys like don't

222

take everything i say to the letter you know best practices isn't an exact science

223

so if you're going to structure a project sometimes it works better for your team in a different way.

224

So if that's the case, do that.

225

So I'm just trying to gather what I have learned from building in beginner, intermediate and advanced projects from what I understand to this day.

226

So this folder structure is an advanced folder structure.

227

What I would recommend is that you only use this kind of stuff if you see benefit in it.

228

And usually you will see the benefit in building something like this if you have a big product and a big team.

229

So something that maybe have multiple surfaces, maybe multiple parts of the app,

230

maybe even subsites to your app that they're not related.

231

A project that would involve complex iterations, would involve maybe a complex backend, stuff like that.

232

And the core idea here that I structured is the idea of having entities,

233

features, processes, and widgets.

234

Now those four over there, the names don't really matter.

235

But these names are known in the industry, and they take shape in different ways.

236

But this structure follows this way.

237

And this project, you would obviously create your routes the same way as we mentioned before, the exact same routes, you would put them over here.

238

And this is all that this would be just create the routes.

239

Now, inside of those routes, there's different parts of them.

240

And those parts of them are distributed and organized throughout the entities, features, processes, and widgets.

241

Now, what are they?

242

Well, the entities is the raw data and rules.

243

Now, we'll start with the features.

244

The features is related to what the user can do.

245

So in this app, there's a lot of things that the user can do.

246

Like, for example, the user can create an event.

247

They can pay stuff.

248

They can RSVP to an event they can search stuff.

249

And these are small abilities that are glued to a UI that glues a UI with data often through,

250

for example, a server action in order to make that ability be usable by the user.

251

So that's what a feature is.

252

And here you can clearly see that we have here the create events feature, the host payouts feature, the RCP event feature and the search feature.

253

Now, in the events project, I didn't like manually create the folders or the files for each of these folders,

254

because the example project that we used over here, wouldn't fully match what this folder structure looks like, but it's still running through here.

255

Now, this is what the features folder is.

256

Now the entities folder is a bit different.

257

This is the raw data your app knows about.

258

So like, this would involve simple shapes and rules like what is the event look like?

259

What is the model of it?

260

What is the RCP look like?

261

What does the user look like?

262

And by model, I usually mean like, you maybe define some interfaces,

263

define how parts the fields of what an event is relates to a user, stuff like that.

264

And this would be really useful as well, because it would mainly be used for stuff like reusable TypeScript types.

265

Now, the The widgets folder is, in my opinion, the most important one, because this one is where you create the UI.

266

So there is pieces of the UI that you would consider a widget.

267

Now, what is a widget?

268

Now, a widget is a name given to reusable UI blocks.

269

So not a small feature, but like a huge block.

270

So if you think of YouTube, for example, YouTube has the recommendation feed, right?

271

There's a bunch of videos showing up on the right when you're watching YouTube.

272

So that feed appears multiple times on this app.

273

And that isn't just one component.

274

That's actually like a block of components, a block of UI with multiple things,

275

including the video recommendations, the ability to scroll through it, the titles of the videos, stuff like that.

276

And whenever YouTube needs to just put that at a different page, you can just reuse that widget.

277

So that's what a widget would be.

278

And it's reusable blocks of UI that you just copy and drop at different screens.

279

They will show things that they don't own any big logic or any routing, but they are pieces of UI that you can rely on and put whenever you need to.

280

Now, the last one is the processes.

281

Now, the processes, it really doesn't matter like it depends on

282

which project you're building i added here because usually

283

if you're building an advanced project you would need to have some behind the scenes job

284

so this is kind of like stuff

285

that you can run on a schedule cron jobs nothing related

286

to ui stuff like sending emails every day for a notification cleaning data syncing with services all

287

that kind of stuff you would definitely have something like this especially the sending email stuff, you might want to run that in the schedule.

288

And I would put that background processes inside of this folder.

289

Now, the rest of this would be similar to what we've mentioned on the intermediate, there's going to be a test folder.

290

And in here, you would do different types of testings, right?

291

So that's a big thing that you do in big companies.

292

There's integration testing, there's unit testing, and there's end to end testing.

293

So if you're not familiar with each of them.

294

Basically, the most basic explanation I can give you is unit testing,

295

you force test what you expect from different endpoints, different functions, stuff like that, and you manually mock the data.

296

Integration testing, you actually make API requests and you test what the result is.

297

And end -to -end testing is sometimes not that common, depending on the type of app you have,

298

but it's basically when you validate that the entire app is working from the front end to where the data is stored, all that kind of stuff.

299

There's also snapshot testing because this is a front end application, which you could do it as well.

300

I'm going to close this.

301

I usually, this is more of a backend testing kind of stuff, but if you are interested in testing the front end, I would do it in the widgets folder or whatever,

302

whichever UI folder you have, I would do it more specific to each file.

303

Now, the main pro here is that this would scale.

304

And also, it's good for team ownership.

305

So like, if you're working in a company, right, that has multiple teams, each team would own a different part of this project,

306

everyone will be coding on the same project, right, because this is the front end of the website, it's not like it's a each person can create their own micro service,

307

and then they can own the whole service with the front end, everyone has to share the same code base.

308

But even though you're sharing the same code base, you will own different parts of it, like different widgets, different features, stuff like that.

309

And this allows for more easily doing that.

310

It also, again, has strong boundaries, which makes it easier for you to test.

311

And there's some performance patterns built into it as well.

312

Now, some of the cons is that it has a steep learning curve, there's a lot of abstraction, and a lot of spending time organizing your project and stuff like that,

313

which is just more boilerplate.

314

And this is 100 % an overkill for most apps because you don't need to have...

315

If you're building an app alone, you don't have to organize it so much just because no one else will be...

316

You know where everything else is.

317

Unless you're building for other people, you don't have to do this.

318

But I like to imagine

319

that I think it might be useful for some of you

320

who hasn't worked on an advanced project yet to at least have an idea of how it would look like.

321

Now...

322

Should you immediately go ahead and change all your projects to match the folder structures that I mentioned?

323

No, 100 % not.

324

If you build a project with a beginner folder structure to validate your app, it could take you one to two days for you to actually merge it.

325

If you build a project with a beginner folder structure, just to quickly validate your app, you could then take one or two days to just move

326

that into a more advanced folder structure that makes it more organized.

327

You don't have to do that since the beginning.

328

Now, that's basically it.

329

I really hope you guys enjoyed this video.

330

If you enjoyed the video, please leave a like down below and comment what you want to see next.

331

Again, thank you so much, Savala, for sponsoring this video.

332

Really appreciate it.

333

If you guys want to check them out, please click the link in the description and I'm sure you guys will enjoy their product.

334

Now, if you want to see any specific video of mine, please leave a comment down below and let me know.

335

I'll respond to as many comments as possible and thank you so much for watching and I see you guys next time.

336

Thank you for listening.

✨ Recommend Video

257 sentences

Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project

University StudentsBusiness English+1

29 sentences

Amazon Athena explained in 120 seconds💡

University StudentsBusiness English+1

364 sentences

My Vibe Coding Workflow (Step by Step Workflow)

University StudentsBusiness English+1

What is the Shadowing Technique?

Shadowing is a science-backed language learning technique originally developed for professional interpreter training and popularized by polyglot Dr. Alexander Arguelles. The method is simple but powerful: you listen to native English audio and immediately repeat it out loud — like a shadow following the speaker with just a 1–2 second delay. Unlike passive listening or grammar drills, shadowing forces your brain and mouth muscles to simultaneously process and reproduce real speech patterns. Research shows it significantly improves pronunciation accuracy, intonation, rhythm, connected speech, listening comprehension, and speaking fluency — making it one of the most effective methods for IELTS Speaking preparation and real-world English communication.

Shadowing technique: read the full step-by-step guide →

Shadowing Practice: Best NextJS Folder Structures | Beginner - Intermediate - Advanced - Learn English Speaking with Video

Learn Next.js Parallel Routes In 16 Minutes

Design a File Upload Service Like a Senior Engineer

The easy way to keep your repos tidy.

Sofeast PCB Video Series Introduction

The future unfolds! How to optimize Android apps for adaptive layouts

Mini Project - Implementing a Simple Web Identity Federation Application

How to ACTUALLY Get a DevOps Job in 2026

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

TIA Portal 101: The Beginner's Guide to Starting a New Project

Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project

Amazon Athena explained in 120 seconds💡

My Vibe Coding Workflow (Step by Step Workflow)

About This Lesson

What is the Shadowing Technique?