未経験からのNext.js入門『TypeScript』|環境構築

はじめ #

Next.js の環境構築をするために npm が必要なので、事前に公式サイトからNode.jsをインストールしておいてください。

何をインストールすればいいかわからない場合は推奨版をインストールしてください。

今回最新の推奨板である v14.16.0 を使用して環境を作成していきます。

create コマンド実行 #

next.js は環境構築してくれるコマンドが npm パッケージに存在しています。

ですので、npx コマンドからそのコマンドを実行するだけで簡単にプロジェクトを作成することができます。コマンドは以下の通りです。

npx create-next-app next –typescript

npx create-next-app コマンドで next という名前のプロジェクトを作成しています。

今回は TypeScript による開発を想定しているので、–typescript オプションを付与しています。

dev コマンド実行 #

create コマンドを実行したら、プロジェクトが出来上がっているかと思います。

ここまで出来たらあとは簡単です。以下コマンドを実行して、http://localhost:3000 を確認してください。

npm run dev

以下ページが表示されていることを確認してください。

以上です。