【React学習 #8】Next.js 環境構築

はじめに

この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。

やりたいこと

Next.js + TypeScriptの開発環境を構築していきます。

参考

Next.js ドキュメント

動作環境

• PC：Macbook
• CPU：Intel
• OS：MacOS Ventura 13.4
• Node.js v20.3.1

環境構築

以下のコマンドを実行してNext.jsの環境を構築します。

$ npx create-next-app@latest

実行すると以下のように対話形式でプロジェクトの設定をすることができます。

Need to install the following packages:
  create-next-app@13.4.7
Ok to proceed? (y) y
✔ What is your project named? … next-ts-sample-app
✔ Would you like to use TypeScript with this project? … No / Yes　--> Yes
✔ Would you like to use ESLint with this project? … No / Yes --> Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes --> No
✔ Would you like to use `src/` directory with this project? … No / Yes -->Yes
✔ Use App Router (recommended)? … No / Yes --> Yes
✔ Would you like to customize the default import alias? … No / Yes --> Yes
✔ What import alias would you like configured? … @/*

全ての質問に答えるとインストールが始まります。

開発サーバを実行

プロジェクト直下に移動し、開発サーバを起動します。

$ npm run dev

開発サーバが起動したらブラウザでhttp://localhost:3000/にアクセスします。

最後に

コマンド一つで簡単にNext.jsの環境を作成できました。
次回以降はNext.jsについてどんどん学習していこうと思います。