この投稿ではNext.js v12 + TypeScriptのプロジェクトの雛形を生成するまでの流れを簡潔に説明します。
要件
- Node.js 12.22.0以上の環境が必要
プロジェクトの雛形を生成する
npm
コマンドまたはyarn
コマンドでプロジェクトの雛形を生成します。
npx create-next-app@latest
# または
yarn create next-app --typescript
プロジェクト名を聞かれるので、適当に名前をつけます。
このコマンドを実行すると必要なパッケージのインストールも行われます。
開発サーバーを起動する
雛形が生成されたら開発サーバーを起動します。開発サーバーの起動はyarn dev
コマンドです。
cd my-app
yarn dev
最後にhttp://localhost:3000
にアクセスし、次の図のようなWelcomeページが表示されていれば、雛形の生成は完了です。