You take any project, folder and file organisation matters. In this article, I will explain the folder structure of create-next-app

If you look at the create-next-app package, it has 2 folders and 5 files. Fortunately, we are not dealing with that many files for now.

create-next-app folder structure

This does look like a package generated using npm init.

File structure

Helpers — Contains helper functions

Templates — Templates used to generate your next.js app folders and files

Readme.md — Readme file, worth checking it out

Create-app.ts — It mainly has a function called createApp. This is where the magic happens

Index.ts — This calls the createApp from the above file.

Package.json — You know what this file is about.

Tsconfig.json — Interestingly, this file’s last committed date is 3 years ago (evident from the image above)

Conclusion

create-next-app file structure is not that complicated. Who would have thought it just uses templates and creates a folder.

So far, we just looked at folder location and structure. In the upcoming articles, I am going to add comments next to each line of code where ever it makes sense to understand the code.

I am building a platform that explains best practices used in open source by elite programmers. Join the waitlist and I will send you the link to the tutorials once they are ready.

If you have any questions, feel free to reach out to me at ramu.narasinga@gmail.com

Get free courses inspired by the best practices used in open source.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github —  https://github.com/ramu-narasinga

My website —  https://ramunarasinga.com

My Youtube channel —  https://www.youtube.com/@ramu-narasinga

Learning platform —  https://thinkthroo.com

Codebase Architecture —  https://app.thinkthroo.com/architecture

Best practices —  https://app.thinkthroo.com/best-practices

Production-grade projects —  https://app.thinkthroo.com/production-grade-projects