create-next-app validates your app name using this package

In this article, we analyze how create-next-app validates your project name.

validate: (name) => {
const validation = validateNpmName(basename(resolve(name)))
if (validation.valid) {
return true
}
return ‘Invalid project name: ‘ + validati…


This content originally appeared on DEV Community and was authored by thinkThroo

In this article, we analyze how create-next-app validates your project name.

validate: (name) => {
 const validation = validateNpmName(basename(resolve(name)))
 if (validation.valid) {
   return true
 }
 return 'Invalid project name: ' + validation.problems[0]
},

Have you tried naming your project with spaces in it when using create-next-app command? if you have done so, it won’t allow spaces in your project because it follows certain principles when it comes to naming your project.

So what are these naming convention rules?

validateNpmName function

If you check this create-next-app/index.ts, it calls a function named validateNpmName. This is imported from helpers/validate-pkg.ts

Image description

This function is straight forward, calls a function named validateProjectName that is imported from validate-npm-package-name.

Documentation says that if a name is valid, you will get the below object back:

{
 validForNewPackages: true,
 validForOldPackages: true
}

What makes a name valid? let’s check the documentation again. Documentataion provides these Naming rules:

  1. package name length should be greater than zero

  2. all the characters in the package name must be lowercase i.e., no uppercase or mixed case names are allowed

  3. package name can consist of hyphens

  4. package name must not contain any non-url-safe characters (since name ends up being part of a URL)

  5. package name should not start with . or _

  6. package name should not contain any spaces

  7. package name should not contain any of the following characters: ~)(‘!*

  8. package name cannot be the same as a node.js/io.js core module nor a reserved/blacklisted name. For example, the following names are invalid:

    — http

    — stream

    — node_modules

    — favicon.ico

  9. package name length cannot exceed 214

These are the rules you should keep in mind when naming your Next.js project.

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

We also provide web development and technical writing services. Reach out to us at hello@thinkthroo.com to learn more!

References:

1. https://github.com/vercel/next.js/blob/canary/packages/create-next-app/index.ts#L162

2. https://github.com/vercel/next.js/blob/canary/packages/create-next-app/helpers/validate-pkg.ts#L13

3. https://www.npmjs.com/package/validate-npm-package-name

4. https://github.com/npm/validate-npm-package-name/tree/main




This content originally appeared on DEV Community and was authored by thinkThroo


Print Share Comment Cite Upload Translate Updates
APA

thinkThroo | Sciencx (2024-10-15T20:52:04+00:00) create-next-app validates your app name using this package. Retrieved from https://www.scien.cx/2024/10/15/create-next-app-validates-your-app-name-using-this-package/

MLA
" » create-next-app validates your app name using this package." thinkThroo | Sciencx - Tuesday October 15, 2024, https://www.scien.cx/2024/10/15/create-next-app-validates-your-app-name-using-this-package/
HARVARD
thinkThroo | Sciencx Tuesday October 15, 2024 » create-next-app validates your app name using this package., viewed ,<https://www.scien.cx/2024/10/15/create-next-app-validates-your-app-name-using-this-package/>
VANCOUVER
thinkThroo | Sciencx - » create-next-app validates your app name using this package. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/15/create-next-app-validates-your-app-name-using-this-package/
CHICAGO
" » create-next-app validates your app name using this package." thinkThroo | Sciencx - Accessed . https://www.scien.cx/2024/10/15/create-next-app-validates-your-app-name-using-this-package/
IEEE
" » create-next-app validates your app name using this package." thinkThroo | Sciencx [Online]. Available: https://www.scien.cx/2024/10/15/create-next-app-validates-your-app-name-using-this-package/. [Accessed: ]
rf:citation
» create-next-app validates your app name using this package | thinkThroo | Sciencx | https://www.scien.cx/2024/10/15/create-next-app-validates-your-app-name-using-this-package/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.