ブログ記事
- create-next-app
- Next.js
- セットアップ
- ターミナル
- Cursor
- プロジェクト作成
create-next-appを現在フォルダへ直接作成する方法
"Next.jsプロジェクトを新規フォルダではなく、現在のフォルダに直接作成したいときは`npx create-next-app@latest .`が使えます。空でないフォルダでの注意点と、実際の手順を実務ログをもとに解説します。"
Next.jsで新しいプロジェクトを始めるとき、npx create-next-app@latestを実行すると、通常はプロジェクト名のフォルダが新しく作られます。しかし、すでにフォルダを作成済みで、その中に直接ファイルを展開したい場面もあります。たとえばGitHubで空リポジトリを作ってクローンしたあと、そのフォルダの中でそのままセットアップしたいケースなどです。
筆者もtoolarc.jpのサイト構築時、事前に用意していた作業フォルダの中にcreate-next-appでそのままファイルを展開したいと思い、.（ドット）を指定する方法を確認しました。この記事では、現在のフォルダに直接プロジェクトを作成する方法と、空でないフォルダで実行するときの注意点をまとめます。
今日の結論
- プロジェクト名の代わりに
.（ドット）を指定すると、現在のフォルダに直接作成できます- フォルダが完全に空でなくても、内容によっては実行できる場合があります
- 既存ファイルと衝突する場合は、警告表示や処理の中断が発生することがあるため、実行前に中身を確認しておくと安心です
- 実行後は
npm run devでの起動確認までを1セットにすると手戻りが減ります
なぜ現在フォルダに直接作成したい場面があるのか
通常のnpx create-next-app@latest my-appのようにプロジェクト名を指定する方法では、実行後に新しいフォルダが作られます。ですが、GitHubで空リポジトリを作ってクローンしたあとや、README.mdや.gitignoreだけを用意した作業フォルダがすでにある場合、二重にフォルダを作らずそのまま展開したい場面があります。こうしたときに使うのが.（ドット）指定です。
create-next-appを現在フォルダに作成する手順
- 対象フォルダでターミナルを開きます
npx create-next-app@latest .を実行します- プロンプトでTypeScript / Tailwind CSS / ESLintなどの構成を選択します
- 既存ファイルがある場合は、衝突の可能性があるファイル一覧が表示されるので内容を確認します
npm run devを実行して起動確認をします
空でないフォルダで実行するときの注意点
現在のフォルダに.で作成する場合、Next.js側は既存ファイルとの衝突をチェックします。README.mdや.gitignore、.gitフォルダ程度であれば問題なく進められることが多いですが、package.jsonなど名前が重複するファイルがすでにある場合は、衝突する可能性のあるファイル一覧が表示され、そこで処理が止まることがあります。
事前に「フォルダの中身をできるだけ最小限にしておく」「大事なファイルはバックアップを取っておく」の2点を意識しておくと、想定外の上書きを避けやすくなります。衝突が表示された場合は、該当ファイルを一時的に移動してから再実行するか、素直に空のフォルダで作成してからファイルを移動する方法に切り替えるのも一つの手です。
チェックリスト：実行前後で確認したいこと
| 確認項目 | 見るポイント |
|---|---|
| フォルダの中身 | README.md／.gitignore程度か、他に重要ファイルがないか |
| コマンド | npx create-next-app@latest .（ドット指定になっているか） |
| 衝突表示 | 実行時に衝突の可能性があるファイル一覧が出ていないか |
| 選択構成 | TypeScript／Tailwind CSS／ESLintなど、プロジェクトに合わせた選択になっているか |
| 起動確認 | npm run devでエラーなく立ち上がるか |
まとめ・次に読む
.（ドット）指定を知っておくと、すでに用意したフォルダを二重に作らずにNext.jsプロジェクトを始められます。サイト公開までの一連の流れは、以下のHub記事でまとめて確認できます。
- Hub記事：AI初心者がゼロからWebサイトを公開するまでにやったこと・詰まったこと全部まとめ
- 同日公開：npm run buildを毎回実行する理由｜本番ビルド落ちを防ぐ
- 同日公開：Obsidianで✅を入力する方法｜絵文字パネルで簡単入力
- 同日公開：AIブログ記事の作り方｜source.md→Claude初稿→Cursor公開
Next.jsやcreate-next-appの仕様・挙動はバージョンによって変わることがあります。本記事は執筆時点（2026-07-01）の情報に基づいています。重要な判断をする際は、Next.js公式ドキュメントもあわせてご確認ください。