Neste artigo, analisamos como create-next-app valida o nome do seu projeto.

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

Você tentou nomear seu projeto com espaços ao usar o comando create-next-app? se você tiver feito isso, não permitirá espaços em seu projeto porque segue certos princípios quando se trata de nomear seu projeto.

Então, quais são essas regras de convenção de nomenclatura?

função validarNpmName

Se você verificar create-next-app/index.ts, ele chamará uma função chamada validNpmName. Isso é importado de helpers/validate-pkg.ts

Esta função é simples, chama uma função chamada validProjectName que é importada de activate-npm-package-name.

A documentação diz que se um nome for válido, você receberá de volta o objeto abaixo:

{
 validForNewPackages: true,
 validForOldPackages: true
}

O que torna um nome válido? vamos verificar a documentação novamente. A documentação fornece estas regras de nomenclatura:

1. o comprimento do nome do pacote deve ser maior que zero

2. todos os caracteres no nome do pacote devem estar em letras minúsculas, ou seja, não são permitidos nomes em letras maiúsculas ou com letras maiúsculas

3. o nome do pacote pode consistir em hífens

4. o nome do pacote não deve conter caracteres não seguros para URL (já que o nome acaba fazendo parte de uma URL)

5. o nome do pacote não deve começar com . ou _

6. o nome do pacote não deve conter espaços

7. o nome do pacote não deve conter nenhum dos seguintes caracteres: ~)('!*

8. o nome do pacote não pode ser igual a um módulo principal node.js/io.js nem um nome reservado/na lista negra. Por exemplo, os seguintes nomes são inválidos:
   
   - http
   
   - fluxo
   
   - node_modules
   
   —favicon.ico

9. o comprimento do nome do pacote não pode exceder 214

Estas são as regras que você deve ter em mente ao nomear seu projeto Next.js.

Sobre nós:

No Think Throo, temos a missão de ensinar os conceitos avançados de arquitetura de base de código usados ​​em projetos de código aberto.

10x suas habilidades de codificação praticando conceitos de arquitetura avançados em Next.js/React, aprenda as melhores práticas e crie projetos de nível de produção.

Somos código aberto - https://github.com/thinkthroo/thinkthroo (Dê-nos uma estrela!)

Nós também fornecemos serviços de desenvolvimento web e redação técnica. Entre em contato conosco em [email protected] para saber mais!

Referências:

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