今日から始めるNext.js #1～開発環境構築編～

こんにちは、ナオツです。 長らく時間が空いてしまいまして申し訳ございません、、 これから不定期ですが、少しづつまたアップしていきます！

さて、以前Next.jsについて3回に渡りその注目性や有用性を解説しました。

• フロントエンドで「Next.js」を選ぶ理由①
• フロントエンドで「Next.js」を選ぶ理由②
• フロントエンドで「Next.js」を選ぶ理由③

今回ははじめての方でもNext.jsを理解できるよう、環境構築からやっていきます。

環境構築で結構つまづく人いらっしゃいますよね。

僕もその一人です。笑

環境構築がめんどくさくて新しいスキルを学習するのが億劫になることもありますよね。

僕もその一人です。僕だけですか？？笑

それでは環境構築しながら、Next.jsやReactについての理解を深めていきましょう。

Next.jsとReactのメリットおさらい

環境構築の前にさらっとおさらいです。（飛ばしてもかまいません）

上記で紹介した記事にもありますが、Next.jsはReactをさらに使いやすくしたフレームワークです。

「Next.jsができる」ということは「Reactの案件にも参加できる」ということです。

Next.js単体での案件数は増えてきてはいるものの、全体から見るとそれほど多くはないのが現状です。

しかしReactの案件は現在引く手数多で、仕事に困ることはないし、月80万 などの単価高め案件が豊富です。

つまりフロントエンド業界で「Reactができる」ということは 月80万の案件に参加できる資格がある ということです。

また、スタートアップ企業ではReactでなくNext.jsを選択することが多く、Reactで作られた既存のサービスもNext.jsに置き換える事例が増えてきているようです。

さらにReactはフロントのデファクトスタンダードであるといっても過言ではないので、この先Reactを越える新しい技術が世に出てきたとしても、

その技術はReactをベースにReactを改良したような設計になることが考えられます。

つまり、Reactを身に着けておけば新しい技術への移行も比較的簡単になると考えられます。

Linuxで開発環境を構築しよう

Next.jsの開発環境を構築するには、Linux環境が必須です。

実際にサイト公開するにあたり利用するサーバーは十中八九Linuxになります。

Windowsのコマンドプロンプトを用いても出来ないことはないですが、いざサイトを公開する際に「開発環境では動いていたのに、公開サイトでは動かない！」といった問題が少なからず発生します。

実際の公開サイトに用いるサーバーを 「本番環境」 と言いますが、 「開発環境と本番環境は同じ状況にすべき」 というのが後々の問題を引き起こさない秘訣です。

Windowsの場合はWSL2をインストールして、Linux環境を構築しましょう。

10分でできるWSL2インストール手順はこちら

このサイトでは、WSL2上にインストールしたUbuntuで開発環境を構築していきます。

Homebrewのインストール

Homebrewとは、開発で用いる様々なソフトウェアを簡単にインストールするためのツールです。

Macで開発されている方は当たり前のように使っていますが、WSL2上のLinuxでも当然使えます。

Next.jsをインストールするにあたり必要なnode.jsはHomebrewを用いてインストールしてしていきます。

Homebrewを使わなくてもインストールすることはできますが、こだわりがなければHomebrewを使いましょう。

Homebrewを使っていれば、何か困ってググるときにMacでHomebrewを使っている関連記事も参考にできます。

これを 「ググラビリティの精度を高める」 と僕は呼んでいます。

ググったときにすぐに必要な情報に出会える。

これが開発をスムーズに進めるためのコツです。

Windows Terminalを開いてUbuntuを起動し、Homebrewをインストールしましょう。

インストール方法はこちら

Homebrewインストール後の手順

Homebrewのインストールが完了すると、実行結果の最後の方に下記のように表示されています。

$ echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/{ユーザー名}/.profile
$ eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"

ここでは２つのコマンドを実行せよ、と指示されていますので順番に実行してください。 ※{ユーザー名}の部分には、ご自身のlinuxユーザー名が表示されています。

/home/{ユーザー名}/.profileというファイルは、お使いの環境によってはあったりなかったりします。

ない場合は、代わりに/home/{ユーザー名}/.bashrcに変更してください。

workspaceを作ろう

アプリケーションを実装していく上で、開発用のディレクトリを作成しておきましょう。

僕はよく/home/{ユーザー名}の下にworkspaceというディレクトリを作成します。

$ cd ~
$ mkdir workspace

余談ですが、cd ~で、どのディレクトリにいても/home/{ユーザー名}に帰っくることができます。 基本的にはこういった成果物については/home/{ユーザー名}配下に作成することが多いので覚えておきましょう。

node.js関連のインストール

Next.jsのインストールにはnode.jsのインストールが必要です。 まずはnode.jsのサイトを覗いてみましょう。

node.js公式サイト-リリース一覧

リリース一覧のページには、様々なバージョンのnode.jsが存在することがわかるかと思います。

node.jsに限らずですが、プログラムがアップデートすれば、

• 出来ることが増える
• 今まで出来たことが非推奨・もしくは廃止になる

ということが必ず発生します。

現時点（2021/6/26）で最新のversion 16で動いていたアプリケーションが、version 15では動かなくなる、なんてことも可能性としてはあるのです。

version 16でブログサイトを作っていきますが、別の仕事でversion 15が必要なことだってありえます。

つまり複数のバージョンを管理して使いこなせる必要があるわけですね。

それを実現できるのが nodenv です！

anyenvのインストール

nodenv ちゃうやん！というツッコミが聞こえてきますが、nodenvのインストールを楽にしてくれる anyenv というパッケージをインストールしていきます。

今回は nodenv のインストールが目的ですが、node.jsだけでなくrubyやGo言語にもrbenvやgoenvといった複数バージョン管理用のプログラムが用意されています。

これらを包括的にインストール可能にしてくれるのが anyenv です。

それではhomebrewを使って anyenv をインストールします。

brew install anyenv

関連するパッケージのダウンロードが始まりますので、しばしお待ちください。

インストールが完了したらログに従って下記のコマンドを入力しておきましょう。（homebrewと同じ要領です）

$ echo 'eval "$(anyenv init -)"' >> /home/{ユーザー名}/.profile
$ eval "eval "$(anyenv init -)"

nodenvのインストール

それではanyenvを使って nodenv をインストールしましょう。 といっても下記のコマンドを実行するだけです。

$ anyenv install nodenv

インストールが完了したら、下記コマンドで/home/{ユーザー名}/.profileを再度読み込み直します。

$ exec $SHELL -l

nodenvがインストールされているかどうか、チェックするためにインストール可能なnode.jsの一覧を表示させてみましょう。

$ nodenv install --list

実行するとnode.jsのバージョン一覧がズラッと表示されるはずです。

これでnodenvのインストールは完了です。

node.jsのインストール

遠回りした気がしますが、ようやくnode.jsのインストールです。 といっても下記のコマンドを実行するだけです。

$ nodenv install 16.4.0

※今回は現時点で最新のバージョン「16.4.0」を指定していますが、当然過去のバージョンも指定可能です。

インストールは数秒で完了するはずです。

元々nodenvで複数のnode.jsを管理することができるので、nodenvが使用するversionを指定する必要があります。

$ nodenv global 16.4.0

これでシェル全体でnode.jsのデフォルトversionが「16.4.0」に設定されました。 下記コマンドを実行してみましょう。

$ nodenv versions
* 16.4.0 (set by /home/{ユーザー名}/.anyenv/envs/nodenv/version)

といった結果が返ってくるかと思います。 今は1行しか表示されませんが、nodenv install xxxとほかのバージョンをインストールすることで、今何のバージョンがインストールされていて、global設定（シェル全体の設定）はどのversionなのかを知ることができます。（「*」がついているのがglobal設定）

yarnのインストール

さて、node.jsをインストールするとnpmコマンドが使えるようになります。

$ npm -v
7.18.1

npmはnode.jsのパッケージ管理マネージャーです。

実際にアプリケーションを作る際はゼロからプログラミングすることは皆無だと思って良いです。

その代わりにある程度実装されているパッケージと呼ばれるプログラムをいくつか組み合わせて、足りない部分だけ実装する、という方法がほとんどです。

当然パッケージ自体にもversionが存在します。

そこで活躍するのがパッケージマネージャーであるnpmです。

今は安全にnpmを使用できるのですが、数年前はnpm自体の脆弱性が問題視されていました。

そこでnpmに代わるパッケージマネージャーとしてyarnが利用できます。

近年のアプリケーションは前述の流れからyarnでパッケージ管理していることが多いので、ここでもnpmではなくyarnを利用していきたいと思います。

yarnはhomebrewからインストール可能です。

$ brew install yarn

インストールが完了したら、下記のコマンドを実行してyarnのインストールがうまくいっていることを確認しましょう！

$ yarn -v
1.22.10

これで準備完了です！

Next.jsのインストール

それではNext.jsのひな形をyarnコマンドでインストールしてみましょう！ 言語はJavaScriptではなくTypeScriptで実装しますので、下記のコマンドでインストールしていきます。

$ yarn create next-app --typescript

※/home/{ユーザー名}/workspaceで実行

コマンドラインの対話形式ですので、質問に答えていきます。

? What is your project named? › naotsu-blog(アプリケーションの名前を自由に入力)

入力するとyarnのパッケージインストールが始まります。

インストールが完了すると下記のようなログが最後に表示されているかと思います。

Success! Created naotsu-blog at /home/naotsu/naotsu-blog
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd naotsu-blog
  yarn dev

Done in 416.20s.

この通りに実行してみましょう。

$ cd naotsu-blog
$ yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

yarn devを実行すると上記のようなログが表示されますので、ブラウザからhttp://localhost:3000にアクセスしてみましょう。

こんな画面が表示されれば成功です！

まとめ

いかがだったでしょうか？ 基本的にはコマンドをポチポチ実行するだけでNext.jsの開発環境は構築できます。 次回はGitやVS Codeなどを絡めて実際にプログラムコードを触っていきましょう！