Project Structure and File Conventions in NextJs 14

In this video, we'll review the project structure and file conventions in the App router in NextJs 14.

👉🏼 New courses

👉🏼 Project source code (Github)

👉🏼 Work with me

Chapters
0:00 intro
1:20 Top level folders
1:40 Top level files
2:50 Layout
4:30 Page
5:50 Loading UI
7:45 Not found
10:50 Error boundary
13:20 Component hierarchy
14:30 Global Error boundary
15:50 Route handlers
17:00 Template
19:15 Default UI
20:30 Nested routes
30:00 Dynamic routes
21:52 Route groups
23:15 Private folders
24:10 Metadata
24:35 Recap

[Firesky]

Thank you for creating this video and please ignore the person complaining about the documentation being included in the video. You including the documentation is why your videos are so much more helpful than others. You not only teach the content but also make it easier for people to find the documents later on when they need to build off what you taught. I wish other people would include documentation like you are doing in your videos.

[hebe_lia]

Thank you so much, I really was struggling as a new person using Nextjs and this structure really will help me better comprehend the way it works.

[aymenbachiri-yhhd]

Thanks, keep posting videos like this

[clandadyt]

do you think it's possible to do a video on giving data to client props? or like passing server components to client component as children?

[Gurpreetsingh-psn]

could you please make video regarding how to manage state in nextjs14, which is better approach redux, contextapi or zustand ?. Thanks

[samanehghaempanah]

Is this structure also true for React applications?
What is the standard structure or best practice for React projects?

[avigdev]

I like the topics you present new and important topics in nextjs but rely less on their documentation but present your own things because those in the field have already read the documentation and want to hear a little more.