Blog
Next.js Codebase Analysis <> create-next-app <> index.ts explained

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

From the previous article, where you execute the create-my-app, you will find that create-my-app executes ./dist/index.js which is basically a minified version of create-next-app/index.ts. Let’s understand the code inside index.ts

What begins it all:

Open create-next-app/index.ts and go to the bottom of the file. You will see the following snippet:

run() .then(notifyUpdate) .catch(async (reason) => { console.log() console.log('Aborting installation.') if (reason.command) { console.log(` ${cyan(reason.command)} has failed.`) } else { console.log( red('Unexpected error. Please report it as a bug:') + '\n', reason ) } console.log() await notifyUpdate() process.exit(1) }) 

run() begins it all. I used to think using .then with catch is old fashioned but looks like it is okay to use .then, it does not always have to be async/await.

Let’s understand what the code means from function names before jumping into their definition.

I will add the meaningful comments next to line of code, so it is easy for you to follow.

run() // On successful execution of run(), call // notifyUpdate. Not sure what notifyUpdate does yet. .then(notifyUpdate) // you have a reason why catch failed, // I tend to put error as variable name, // It makes sense to label it as reason .catch(async (reason) => { console.log() // Log explains installation is aborted // How often do you log when you encounter failure? console.log('Aborting installation.') // This is specifically looking for command prop // Specificity matters when it comes to error logging if (reason.command) { console.log(` ${cyan(reason.command)} has failed.`) } else { // There is a catchall as well // Nice! console.log( red('Unexpected error. Please report it as a bug:') + '\n', reason ) } console.log() // Notify update even when the installation is aborted // This makes me wonder if it is worth writing .then() // But promises do not execute if you don't put .then() // Learnt it the hard way that one time when I was calling a // promise without .then() and // started questioning my progamming abilities because I forgot // to initailise a promise with .then() // How often do you question your programming abilties? await notifyUpdate() // useful links: // https://stackoverflow.com/questions/5266152/how-to-exit-in-node-js // https://nodejs.org/api/process.html#process // This exits the node process with a failure process.exit(1) }) 

Cyan, red are from a package called picocolors, found on top of index.ts import.

import { cyan, green, red, yellow, bold, blue } from 'picocolors' 

Conclusion:

I will add meaningful comments next to code, but I might improvise if I find a better way to explain the code. We looked at index.ts, it all begins with run(). Interesting choice of function name run instead of init. I liked the variable name for catch parameter, instead of error, it is reason. error is what I usually name the parameter of catch.

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