[Next.js] 始まる

2022-04-01 hit count image

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

概要

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

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

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

ブログリスト

このブログポストはシリーズで作成されています。次は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 first app

完了

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

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

アプリ広報

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

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

Posts