Dans cet article, nous analysons comment create-next-app valide le nom de votre projet.

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

Avez-vous essayé de nommer votre projet avec des espaces lorsque vous utilisez la commande create-next-app ? si vous l'avez fait, il n'autorisera pas d'espaces dans votre projet car il suit certains principes lorsqu'il s'agit de nommer votre projet.

Alors, quelles sont ces règles de convention de dénomination ?

validateNpmName fonction

Si vous cochez ceci create-next-app/index.ts, il appelle une fonction nommée validateNpmName. Ceci est importé de helpers/validate-pkg.ts

Cette fonction est simple, appelle une fonction nommée validateProjectName qui est importée de validate-npm-package-name.

La documentation indique que si un nom est valide, vous récupérerez l'objet ci-dessous :

{
 validForNewPackages: true,
 validForOldPackages: true
}

Qu'est-ce qui rend un nom valide ? vérifions à nouveau la documentation. La documentation fournit ces règles de dénomination :

1. la longueur du nom du package doit être supérieure à zéro

2. tous les caractères du nom du package doivent être en minuscules, c'est-à-dire qu'aucun nom en majuscule ou en casse mixte n'est autorisé

3. le nom du package peut être composé de tirets

4. le nom du package ne doit contenir aucun caractère non sécurisé pour les URL (puisque le nom finit par faire partie d'une URL)

5. le nom du package ne doit pas commencer par . ou _

6. le nom du package ne doit contenir aucun espace

7. le nom du package ne doit contenir aucun des caractères suivants : ~)('!*

Le nom du package

8. ne peut pas être le même qu'un module principal node.js/io.js ni un nom réservé/sur liste noire. Par exemple, les noms suivants ne sont pas valides :
   
   — http
   
   - flux
   
   — node_modules
   
   — favicon.ico

9. la longueur du nom du package ne peut pas dépasser 214

Voici les règles que vous devez garder à l'esprit lorsque vous nommez votre projet Next.js.

À propos de nous:

Chez Think Throo, nous avons pour mission d'enseigner les concepts architecturaux avancés de base de code utilisés dans les projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et créez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Nous fournissons également des services de développement Web et de rédaction technique. Contactez-nous à [email protected] pour en savoir plus !

Références :

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