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にアクセス。
以下の画面が表示される(はず...)
