どうも、nippa です。
フロントを触り始めるために、Next.js を利用しようと思っています。
今回は Next.js + Typescript の環境構築方法を紹介します。
環境
- macOS 11.6
1. create-next-app を利用した構築
今回は create-next-app を使って、環境を構築します。
# npmの場合 npx create-next-app@latest --typescript # yarnの場合 yarn create next-app --typescript
実行方法は以下の通りです。
# npmの場合 npx dev # yarnの場合 yarn dev
デフォルトであればlocalhost:3000で起動されます。
2. create-next-app コマンドをインストールして、環境構築
テンプレートを使う場合に便利なので、インストールしておいても良いかもしれません。
# npmの場合 npm install --global @create-next-app # yarnの場合 yarn global add @create-next-app
create-next-app でのテンプレートを指定して、環境を構築できます。
create-next-app [プロジェクト名] --typescript --template [テンプレート名]
テンプレート一覧はここから確認できます。
テンプレートを利用しない場合は、テンプレートオプションを利用しないか、値をdefaultにしてください。
テンプレートによっては development のパッケージがインストールされないものがありますので、package.jsonを確認の上、以下をインストールしてください。
# npmの場合 npm install --save-dev typescript @types/react @types/react-dom @types/node # yarnの場合 yarn add --save-dev typescript @types/react @types/react-dom @types/node
next の起動は、
# npmの場合 npx dev # yarnの場合 yarn dev
で起動して、デフォルトであればlocalhost:3000で起動されます。
3. 手動で必要なパッケージをインストール
# npmの場合 npm install next react react-dom # yarnの場合 yarn add next react react-dom
packege.jsonは自身で修正が必要です。
感想
next.js の環境構築方法をざっとまとめてみました。
create-next-app とテンプレートを利用するのが便利かと思います。
next.js はこれからなので、是非使ってみてください！
ではでは、また次回。
