この記事では、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

この関数は単純で、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 の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、本番レベルのプロジェクトを構築します。

私たちはオープンソースです — 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-パッケージ名

4. https://github.com/npm/validate-npm-パッケージ名/tree/main