DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on

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

In the previous article, we looked at a few lines of run() and took a step back and moved to the variable named program.

I will explain more about program variable in this article.

Program variable explained:

// https://www.npmjs.com/package/commander#options
 // --ts option
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--ts, --typescript',
   `Initialize as a TypeScript project. (default)`
 )
 // https://www.npmjs.com/package/commander#options
 // --js option
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--js, --javascript',
   `

 Initialize as a JavaScript project.
`
 )
 // https://www.npmjs.com/package/commander#options
 // --tailwind option
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--tailwind',
   `

 Initialize with Tailwind CSS config. (default)
`
 )
 // https://www.npmjs.com/package/commander#options
 // --eslint option
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--eslint',
   `

 Initialize with eslint config.
`
 )
 // https://www.npmjs.com/package/commander#options
 // --app option
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--app',
   `

 Initialize as an App Router project.
`
 )
 // https://www.npmjs.com/package/commander#options
 // --src-dir option
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--src-dir',
   `

 Initialize inside a \`src/\` directory.
`
 )
 // https://www.npmjs.com/package/commander#options
 //--import-alias option
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--import-alias <alias-to-configure>',
   `

 Specify import alias to use (default "@/*").
`
 )
 // https://www.npmjs.com/package/commander#options
 // --use-npm
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--use-npm',
   `

 Explicitly tell the CLI to bootstrap the application using npm
`
 )
 // https://www.npmjs.com/package/commander#options
 // --use-pnpm
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--use-pnpm',
   `

 Explicitly tell the CLI to bootstrap the application using pnpm
`
 )
 // https://www.npmjs.com/package/commander#options
 // --use-yarn
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--use-yarn',
   `

 Explicitly tell the CLI to bootstrap the application using Yarn
`
 )
 // https://www.npmjs.com/package/commander#options
 // --use-bun
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--use-bun',
   `

 Explicitly tell the CLI to bootstrap the application using Bun
`
 )
 // https://www.npmjs.com/package/commander#options
 // -e
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '-e, --example [name]|[github-url]',
   `

 An example to bootstrap the app with. You can use an example name
 from the official Next.js repo or a GitHub URL. The URL can use
 any branch and/or subdirectory
`
 )
 // https://www.npmjs.com/package/commander#options
 // --example-path  <path-to-example>
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--example-path <path-to-example>',
   `

 In a rare case, your GitHub URL might contain a branch name with
 a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
 In this case, you must specify the path to the example separately:
 --example-path foo/bar
`
 )
 // https://www.npmjs.com/package/commander#options
 // --reset-preferences
 // https://github.com/vercel/next.js/tree/canary/packages/create-next-app#non-interactive
 .option(
   '--reset-preferences',
   `

 Explicitly tell the CLI to reset any stored preferences
`
 )
 // You can find more about allowUnknownOption here: https://www.npmjs.com/package/commander
 .allowUnknownOption()
 // read more here: https://www.npmjs.com/package/commander#parse-and-parseasync
 .parse(process.argv)
Enter fullscreen mode Exit fullscreen mode

Conclusion:

So, That's how they do it, really? seems so simple to add options to be accepted after create-next-app.

If you are ever dealing with accepting options from CLI for your custom nodejs package command. This is the way to go.

Stay tuned for more updates. This code with comments is available in this commit: https://github.com/TThroo-Dev/opensource-codebase-analysis/commit/9d6569073a6909f7cd41c255c61bd8f05b120b35

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

Top comments (0)