NEXT.jsとは

Next.jsは、Reactベースのフレームワークです。
サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）、さらにクライアントサイドのルーティングにも対応し、SEOに強く、高速なパフォーマンスが特徴です。

記事を書いた時点でのバージョン

• node.js：20.17.0
• npm　 ：10.8.2
• NEXT.js：14.2.13
• Tailwindcss：3.4.1
• TypeScript：5.6.2

NEXT.jsプロジェクトの作成

ターミナルで以下のコマンドの実行をする

npx create-next-app@latest

対話式でインストールが進んでいくのでプロジェクトに合わせて選択してく
今回は名前を「next-ts-tailwind-example」としました。

✔ What is your project named? … next-ts-tailwind-example
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use src/ directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/

インストールの確認

インストールが完了し下のようなものが表示されればインストールは完了です。
以降はVScodeを使っていきます。

Success! Created next-ts-tailwind-example at インストール先のパス

ターミナル上で以下のコマンドを打つかVScodeで直接インストール先のディレクトリを開く

cd インストール時に入力したディレクトリ
code .

以下のコマンドで開発用のローカルサーバーを立ち上げます。

npm run dev

> next-ts-tailwind-example@0.1.0 dev
> next dev

　▲ Next.js 14.2.13
　- Local:        http://localhost:3000

　✓ Starting...
　✓ Ready in 1225ms

画像のように表示されたらURLの部分をcommandを押下しながらクリックすればブラウザで確認できると思います。
windowsの場合はおそらくctrlだと思います。

画像のようになっていればインストールは無事に完了です。
画面はバージョンよって変わると思います。

Tailwindやeslintはプロジェクト作成時に一緒に入れてしまえばいい感じに設定してくれます。

終わりに

今回の作業はここまでです。
インストールするだけなので特に問題は起こらないと思います。
NEXT.jsを使ってこのブログを作った時に躓いたことを何回かに分けて書いていこうと思います。
今回はその第1弾としてプロジェクトの作成までを書いてみました。

参考