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