Next.jsで学ぶReact講座 #1Next.jsのセットアップ

しまぶーさんが、Next.jsについての動画を出してくれていました。

今後WEBエンジニアとして活躍していくのに、Next.jsを学んでおいておいた方がいいと思うので、まずは、この動画に沿って学んでいきます。

前回は、Next.jsで重要な部分について書きました。

今回は、Next.jsのセットアップを行っていきます。

ゴールと全体の流れ

最終的に以下の画面に到達しました。

以下の流れで、Next.jsのセットアップを進めました。

1. node.jsのバージョン確認
2. コマンド入力
3. 設定項目の選択
4. テスト環境の起動

node.jsのバージョン確認

公式サイトに、14.6.0以上のNode.jsが必要と書かれていたので、バージョン確認しました。

16.18.1だったので、そのまま進めました。

Mac:Downloads shibatahiroshitaka$ node -v
v16.18.1

コマンド入力

yarn create next-app を入力しました。

Mac:Downloads shibatahiroshitaka$ yarn create next-app
yarn create v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.4".
info To upgrade, run the following command:
$ brew upgrade yarn
success Installed "create-next-app@13.0.5" with binaries:
      - create-next-app

設定項目の選択

プロジェクト名や、TypeScriptが必要かどうかなどを聞かれたので、選択していきました。

✔ What is your project named? … my-react
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
Creating a new Next.js app in /Users/shibatahiroshitaka/Downloads/my-react.

Using yarn.

Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom

// 省略

Initializing project with template: default 

Success! Created my-react at /Users/shibatahiroshitaka/Downloads/my-react

✨  Done in 105.50s.

my-reactという名前で、プロジェクトが作成されました。

テスト環境の起動

my-reactに移動して、yarn dev を行いました。

Mac:Downloads shibatahiroshitaka$ cd my-react
Mac:my-react shibatahiroshitaka$ yarn dev
yarn run v1.22.4
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

http://localhost:3000 をcommandを押しながらクリックしました。

そうすると、以下の画面が開きました。

次回

次回は、同じ動画の内容で、Vercelを使用したデプロイを行なっていきます。