Next.jsのプロジェクトを作成し、画面を表示させるまでをまとめてみた。

プロジェクトを作成する

まず、何はなくともプロジェクトを作成しないことには何も始まらない。 プロジェクトを作成するコマンドは以下の通り。

npx create-next-app@latest

すると、プロジェクト名を聞かれるので好きな名前を設定する。 ※ここではnext-sampleとした

? What is your project named? › next-sample

プロジェクトの設定をいろいろ聞かれるので、目的に応じてYes/Noを選択していく。

? 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

ひと通り選択し終えたらプロジェクトの作成が開始される。 しばらく待って、以下のような表示がされたらプロジェクトの作成完了。

Success! Created next-sample at /ディレクトリ/next-sample

デフォルトのトップ画面を表示させる

先ほど作成したプロジェクトのディレクトリに移動する。

cd next-sample

サーバーを起動させる

npm run dev

何事もエラーなく立ち上がったらhttp://localhost:3000にアクセス。 以下の画面が表示される(はず...)