在本文中，我們分析 create-next-app 如何驗證您的專案名稱。

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

您是否嘗試在使用 create-next-app 指令時使用空格命名項目？如果您這樣做了，您的項目中將不允許有空格，因為它在命名您的項目時遵循某些原則。

那麼這些命名約定規則是什麼呢？

validateNpmName 函數

如果您檢查此 create-next-app/index.ts，它會呼叫名為 validateNpmName 的函數。這是從 helpers/validate-pkg.ts

這個函數很簡單，呼叫一個名為 validateProjectName 的函數，該函數是從 validate-npm-package-name 導入的。

文件說，如果名稱有效，您將得到以下物件：

{
 validForNewPackages: true,
 validForOldPackages: true
}

什麼使名稱有效？我們再檢查一下文件。文件提供了這些命名規則：

1. 套件名稱長度應大於零

2. 套件名稱中的所有字元都必須是小寫，即不允許使用大寫或大小寫混合的名稱

3. 套件名稱可以由連字組成

4. 套件名稱不得包含任何非 url 安全字元（因為名稱最終是 URL 的一部分）

5. 套件名稱不應以 .或 _

6. 套件名稱不應包含任何空格

7. 套件名稱不應包含以下任何字元：~)(‘!*

8. 套件名稱不能與node.js/io.js核心模組相同，也不能與保留/黑名單名稱相同。例如，以下名稱無效：
   
   — http
   
   - 溪流
   
   — 節點模組
   
   — favicon.ico

9. 包名長度不能超過214

這些是命名 Next.js 專案時應牢記的規則。

關於我們：

在 Think Throo，我們的使命是教授開源專案中使用的高階程式碼庫架構概念。

透過在 Next.js/React 中練習高階架構概念，提升您的程式設計技能，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

我們也提供網路開發與技術寫作服務。請透過 [email protected] 與我們聯絡以了解更多資訊！

參考：

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