Next.js Codebase Analysis <> create-next-app <> Folder Structure
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. Email: ramu.narasinga@gmail.com
Tired of AI-generated code that works but nobody understands?
I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.
Your codebase. Your patterns. Enforced.