Next.js Codebase Analysis <> create-next-app <> Folder Structure

#opensource #nextjs #react #webdev

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.

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)

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

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