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

#webdev #javascript #nextjs #react

In the previous article, I talked about projectPath error handling.

In this article, I will explain the following code snippet:

// let's log this and see what is that values its got
  const resolvedProjectPath = path.resolve(projectPath)
  const projectName = path.basename(resolvedProjectPath)
  console.log("resolvedProjectPath", resolvedProjectPath)
  console.log("projectName", projectName)

  const validation = validateNpmName(projectName)
  if (!validation.valid) {
    console.error(
      `[TEST]::Could not create a project called ${red(
        `"${projectName}"`
      )} because of npm naming restrictions:`
    )

    validation.problems.forEach((p) =>
      console.error(`    ${red(bold('*'))} ${p}`)
    )
    process.exit(1)
  }

The [validate-prop]:: in validate: prop below, I could not find it when I executed the build with invalid project name.

if (!projectPath) {
    // Read more about prompts here: 
    // https://www.npmjs.com/package/prompts
    const res = await prompts({
      // onPromptState is a function available at
      // https://github.com/vercel/next.js/blob/canary/packages/create-next-app/index.ts#L25
      onState: onPromptState,
      type: 'text',
      name: 'path',
      message: 'What is your project named?',
      initial: 'my-app',
      // validates ensures to follow npm package name guidelines
      // availabe here: https://www.npmjs.com/package/validate-npm-package-name
      validate: (name) => {
        const validation = validateNpmName(path.basename(path.resolve(name)))
        if (validation.valid) {
          return true
        }
        return '[validate-prop]::Invalid project name: ' + validation.problems[0]
      },
    })

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

I have updated the console.error with [TEST] and let’s provide an invalid project name and see if this [TEST] is ever logged due to invalid project.

Build the project and execute npx create-my-app INVALIDPROJECTNAME

Conclusion

I wonder what is the purpose of validate property in prompts when this validation error is handled outside of that block. hmm… interesting.

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