Next.js+shadcn/uiのインストールと基本動作のまとめ
開発環境（ローカルPC）にNext.js 15とshadcn/uiをインストールして、基本の動作を確認
初回公開日
最終更新日
Next.jsとshadcn/uiをインストールしていきます。
プロジェクトを始める前にやる作業なので、何度も行うのですが、忘れがちなので、いつも使っているツールも含めて備忘録として記載しておきます。
ローカルPCの環境は、appleシリコンのmacOSになります。
標準ターミナルとVScodeでの作業しています。
nodeとnpmをインストールしていない場合は、これのインストールから始めます。1.（事前準備）nodeのインストール
macOSではHomebrewを利用してインストール方法もあるのですが、少しバージョンが古いことがあるので、私はいつも「n」という管理ツールを利用しています。
「n」のインストール
zsh
1curl -L https://bit.ly/n-install | bashインストールが完了したら、一度シェルをリロード：
zsh
1source ~/.zshrc # もしくは source ~/.bash_profileNode.js のインストール
zsh
1sudo n lts動作確認
zsh
1node -v
2npm -vエラーが出ずにバージョンが表示されれば成功！
もし node -v が command not found になる場合は、パスの問題かもしれないので以下を実行：
zsh
1export PATH="/usr/local/bin:$PATH"
2
3source ~/.zshrc # zsh の場合
4source ~/.bash_profile # bash の場合これで準備完了です。
2.Next.jsをインストール
new-appという新規プロジェクトを/xxxx/xxxx/project/new-appというディレクトリに作成するものとします。まずは親ディレクトリとなる
/xxxx/xxxx/projectへ移動します。zsh
1cd /xxxx/xxxx/project下記のコマンドを実行：
zsh
1npx create-next-app@latestzsh
1Need to install the following packages:
2create-next-app@15.2.4
3Ok to proceed? (y)
4
5##上記で(y)を入力してエンターで下記の質問が返ってきます。
6## 最初のプロジェクト名がディレクトリ名になるので作りたい名称を入力します。
7## 他は基本はデフォルトの選択でいいと思いますが、お好みでNo/yesを選択します。
8
9? What is your project named? › new-app
10? Would you like to use TypeScript? › No / Yes
11? Would you like to use ESLint? › No / Yes
12? Would you like to use Tailwind CSS? › No / Yes
13? Would you like your code inside a `src/` directory? › No / Yes
14? Would you like to use App Router? (recommended) › No / Yes
15? Would you like to use Turbopack for `next dev`? › No / Yes
16? Would you like to customize the import alias (`@/*` by default)? › No / Yes
17
18## 質問へ回答するインストールが始まります。
19
20Success! Created new-app at /xxxx/xxxx/project/new-app再度に
Success! と表示されたらNext.jsのインストールは完了です。この記事の執筆・編集担当
DE
松本 孝太郎
DELOGs編集部/中年新米プログラマー
ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。