Next.js Codebase Analysis <> create-next-app <> index.ts explained — Part 1.1

In the previous article, we looked at what begins the project creation process, it was run(). In this article, we will understand what run() is made of.

I will add the meaningful comments next to each line of code that needs explanation. I will also do this explanation in parts, as I want to make little contributions everyday. Discipline over motivation.

run() — part 1:

I did not mention this before, but index.ts has 519 lines of code. I do not know if there is a coding style guide where they set a limit to the number of lines a file can have. This observation is something I picked while I was scouring the Github wilderness which is full of hidden cool patterns waiting to be discovered by the passionate FOSS enthusiasts.

Open create-next-app/index.ts and navigate to the run() function.

run() function has 308 lines of code, but I will try to understand and explain at least 15–25 lines each day. Well, this might take a long time to finish understanding how next.js repo works and it is okay. My goal is to understand and learn different strategies and techniques so I can effectively improve my coding skills and learn from elite devs. I believe, there is no better way unless you are personally mentored by the next.js authors.

Please make sure you follow comments as that is where I add the explanation, find it easy for my train of thoughts.

async function run(): Promise<void> {
// a Conf object creation with projectName.
// We do not know what Conf does yet and it is okay.
 const conf = new Conf({ projectName: 'create-next-app' })
// My first thought, where did the program come from?
// Let's find out by looking outside the run() function.
// We skipped Conf class but the program variable cannot be skipped.
// I know for a fact it is a global variable.
if (program.resetPreferences) {
   conf.clear()
   console.log(`Preferences reset successfully`)
   return
 }

Program — part — 1

// Commander is a package for CLI available here:
// https://www.npmjs.com/package/commander
// packageJson is from import on top of the file
// import packageJson from './package.json'
// I personally never had to import anything from package.json, 
// I guess you can do it.
const program = new Commander.Command(packageJson.name)
// https://www.npmjs.com/package/commander#version-option
 .version(packageJson.version)
// https://www.npmjs.com/package/commander#command-arguments
 .arguments('<project-directory>')
// https://www.npmjs.com/package/commander#usage
 .usage(`${green('<project-directory>')} [options]`)
// https://www.npmjs.com/package/commander#action-handler
 .action((name) => {
   projectPath = name
 })

Conclusion:

Part 1.1 leads to run() — part 1, program — part 1 and adding the comments next to each line of code does a good job in explaining my train of thought. I will stick to it.

The code with comments is available here: https://github.com/TThroo-Dev/opensource-codebase-analysis/commit/edac99a9dd8b57e47d19561e4f746dae59898bc3

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