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

#webdev #javascript #nextjs #react

In the previous article, we looked at conf. In this article, we study more code from index.ts

As we advance to next lines of code, the following is what you will understand

if (typeof projectPath === 'string') {
    projectPath = projectPath.trim()
}

Where is projectPath coming from?

It is a global scoped variable in index.ts. projectPath is set in action callback as shown below:

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 // Here
  })

Let’s console.log it and see what its got.

There is no logged information about projectPath. What are we doing wrong? Your next immediate action is checking the documentation for Commander package and specifically, you are looking for action handler.

Here is a better example: https://github.com/tj/commander.js/blob/master/examples/thank.js

If you want to name your nextjs app as part of command npx create-next-app` you can change it to npx create-next-app my-app or you can configure the name as part of prompts. More on prompts in the upcoming articles.

Conclusion:

We understood how the projectPath is set and found that it’s primary purpose is to set a name for nextjs project.

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