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
→ www.hamedbahram.io/courses
👉🏼 Project source code (Github)
→ github.com/HamedBahram/next-f...
👉🏼 Work with me
→ www.hamedbahram.io/hire
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

[@Firesky0008]

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.

[@hamedbahram]

Glad you find my approach helpful. Thanks for sharing your feedback.

[@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.

[@hamedbahram]

You're welcome, Glad it was helpful!

[@aymenbachiri-yh2hd]

Thanks , keep posting videos like this

[@hamedbahram]

Absolutely!

[@sayedalisinasadat2908]

It was really helpful , Thanks

[@hamedbahram]

Glad to hear that!

[@John-eq5cd]

Thank you!

[@hamedbahram]

You're welcome!

[@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?

[@hamedbahram]

We've had those on previous videos. But sure it can also be a dedicated video.

[@user-sy2cu3ok4e]

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

[@hamedbahram]

React context is sufficient for a lot of use cases, if not I use Zustand. Watch this video → czcams.com/video/BxohoXjbhKc/video.html

[@user-sy2cu3ok4e]

@@hamedbahram Thanks, will check this.

[@samanehghaempanah128]

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

[@hamedbahram]

Not really! This is the convention in a next app. Your React project structure depends on the tool/framework you're using.

[@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.

[@hamedbahram]

Thanks for the feedback, I'll have that in mind.

[@Firesky0008]

I highly disagree with this person. Please continue to do this and present with the documentation. It is extremely helpful to see where you got your information from. It also teaches us where we can go as well in the future to figure out and build off what you have taught.
How you are presenting is how I wish others would present as well. The documentation being included in your videos is specifically why I feel your videos are extremely helpful.

[@hamedbahram]

@@Firesky0008 Thank you! I appreciate your feedback.