[Next.js] 始まる

概要

今回のブログポストでは React フレームワークであるNext.jsをインストールして使う方法について説明します。また、生成されたプロジェクトのフォルダと役割について説明します。

Next.js: https://nextjs.org/

Webpackを設定して React を始まる方法や、create-react-appを使って React プロジェ k つおを生成する方法については以前のブログポストを確認してください。

ここで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/1.nextjs

ブログリスト

このブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。

Node のインストール

Next.js を使って React プロジェクトを開発するためには Node のインストールが必要です。各 OS に合わせて Node をインストールします。

macOS

Homebrewはマックにパッケージをインストールしたり、管理するマック専用のパッケージ管理者です。Homebrew を使ってマックに必要なパッケージを簡単にインストールすることができます。次のコマンドを実行してHomebrewをインストールします。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールしたら、次のコマンドを実行してうまくインストールされたか確認します。

brew --version

もし、バージョンが見えない場合、ターミナルを終了して、再び起動して実行してみます。すでに Homebrew がインストールされた方は下記のコマンドを実行してNodeをインストールします。

brew install node

Windows

ウィンドウズではChocolateyと言うパッケージマネージャーを使います。管理者権限でCMDまたはPowershellを開いて、下記のコマンドを実行してChocolateyをインストールします。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

インストールが完了されたら、次のコマンドを実行してインストールができたか確認します。

choco –version

Chocolatey のバージョンが表示されない場合は、CMD または Powershell を終了して再び実行します。Chocolatey がインストールされたら下記のコマンドを実行してNodeをインストールします。

choco install -y nodejs.install

create-next-app のインストール

React フレームワークであるNext.jsを使うためにはcreate-next-appをインストールする必要があります。次のコマンドを使ってcreate-next-appをインストールします。

npm install -g create-next-app

インストールが完成されたら、次のコマンドを実行してcreate-next-appがインストールされたか確認します。

create-next-app --version

問題なくインストールされたら、下記のようにcreate-next-appのバージョンが表示されます。

12.0.10

Next.js プロジェクト生成

次はインストールしたcreate-next-appを使って Next.js プロジェクトを生成してみましょう。

npx create-next-app my-app

上のコマンドを実行すると下記のように Next.js プロジェクトが生成されることが確認できます。

|-- pages
|-- public
|-- styles
|-- .eslintrc.json
|-- next.config.js
|-- package.json

このようにcreate-next-appを使って生成した Next.js プロジェクトのフォルダとファイルは下記のような役割をします。

public: create-next-app で開発する Next.js プロジェクトの Static ファイル（イメージファイルなど）が保存されるフォルダです。
pages: Next.js プロジェクトで画面に表示されるページを保存するフォルダです。
pages/index.js: index ページ(/)に該当するファイルです。
pages/_app.js: 全てのページに共通で使えるコンポーネントです。全てのページにレイアウトなどを設定する時使います。
styles: スタイルファイル(css)を保存する時使うフォルダです。
styles/globals.css: 全てのページに適用されるスタイルファイルです。
styles/Home.module.css: index.js ファイルで使うスタイルファイルです。
.eslintrc.json: 静的コード分析ツールであるESLintの設定に関するファイルです。
next.config.js: Next.js プロジェクトに関する設定ファイルです。
package.json: 開発に必要なライブラリを管理するファイルです。

プロジェクト実行

create-next-app で生成した Next.js プロジェクトのpackage.jsonファイルを開くと次のような内容が確認できます。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},

次は create-next-app で生成した Next.js プロジェクトで使えるスクリプトです。

dev: Next.js プロジェクトを開発モード(development mode)で実行します。
build: Next.js プロジェクトをproduction modeでビルドします。
start: Next.js プロジェクトを productoin mmode で実行します。
lint: Next.js で基本的に設定された ESLint の設定を使って ESLint を実行します。

新しく生成された Next.js プロジェクトを実行するため次のコマンドを実行します。

npm run dev

上のコマンドがうまく実行されると、ブラウザでhttp://localhost:3000が自動で開いて、下記のような画面が表示されます。

完了

今回のブログポストではcreate-next-appを使って Next.js プロジェクトを実行する方法について解説しました。皆さんも今から create-next-app を使ってもっと簡単に React プロジェクトを始めてみてください。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

[Next.js] 始まる

Next.jsを使ってReactプロジェクトを生成して実行する方法について説明します。

目次

概要

ブログリスト

Node のインストール

macOS

Windows

create-next-app のインストール

Next.js プロジェクト生成

プロジェクト実行

完了

アプリ広報