Next.js 皆さん使われていますか？
社内でも Next.js をどんどん使っていこうという機運が高まっているので、自分もそろそろ覚えなきゃと感じてきています。
新しい技術になれるには、手を動かすしかない！ということで、Next.js のプログラミングをするための環境構築方法として、Github Codespaces を使う方法について書いていこうと思います。
この記事は誰向け？
- Next.js を触ったり、勉強したいけど、環境構築がだるくて二の足を踏んでいる人
- Next.js を使うための環境を簡単に手に入れたい人
- Github Codespaces を使い始めたい人
今すぐ！入門したいなら
とりあえず Next.js 触りたいとか Next.js のチュートリアルで学習してみたいという人は、
Github Codespaces という機能を使うと、すぐにプログラミング作業に取りかかれます。
Github Codespaces とは
コンテナベースの開発環境を github が管理するクラウドへデプロイできるサービスです。
- 有料、codespaces の起動時間で課金される
- ただし、月 60h までは無料で使える
👇詳細はリンク先で👇
Github Codespaces を使えば、ものの数分、下手したら1分程度でプログラミングが開始できます。
まずは Github Codespaces がどのように使えるかご説明します。
リポジトリへアクセス
まずは次のリポジトリにアクセスしてください。
リポジトリのページを開くと、見慣れたいつものリポジトリの画面が表示されるかと思います。
以下のスクショの通り、右上のボタンから、Create codespace on main というボタンをクリックしてください。
これで、環境構築が開始されます。
クリック後、暫く待つと、、、
1分ほどで Next.js の開発に必要なすべてが揃った環境が作成されました！
この環境は、コンテナベースの Linux で、UIとしてはブラウザ上で表示される VS Code です。
このあとはお好きなように色々ファイルを編集・追加・削除してもらえれば、Next.js のウェブアプリが開発できます！
VS Code なので、開発で活用できる拡張を入れてもいいですし、ターミナルを開けばそこは Linux の世界なので、各種コマンドをインストールして、開発作業を効率化させても良さそうですね！ちなみにディストリビューションは Debian なので、apt コマンドが使えます。
(この辺は、コンテナベースなので、ベースイメージを変えたりして色々環境をカスタマイズすることが可能。詳細は前述の公式ドキュメントを参照ください)
開発作業が終わったら、stop することで余計な課金も防げる。繰り返しになりますが、月 60 h の起動時間が利用可能です。(Codespaces のマシンスペックによっては、この無料利用可能時間が短くなるので注意)
以上が、Github Codespaces を利用した Next.js の環境構築となります。
既存のリポジトリを利用する形なので、Github のページ上のボタンをクリックするだけで作成することができました。
もう少し詳しく知りたいという場合は、リポジトリを用意するところからの手順を以降に記述するので、読みすすめてください。
Next.js 用の Github Codespaces を自分で準備する
Github Codespaces は devcontainers という技術というか仕様？を利用して環境構築を行っていますが、
私達開発者も、自分のPCなどの環境で、その devcontainers を使い、自由に開発環境の構築が行えます。
詳細は割愛しますが、devcontainers はコンテナを開発環境とするための仕組みです。コンテナを利用するので、自分のPC上に直接プログラミング言語等インストールする手間が必要なくなります。
また、コンテナの性質上、どのホストでも同じように起動・動作します。開発チームで devcontainers を標準的に利用すれば、開発者ごとに開発しているアプリの動作が変わるといったことがなくなることでしょう。
devcontainers についてさらなる詳細は以下をご確認ください。
前提
自分で Github Codespaces を用意するためには、以下の前提を満たしている必要があります。
☑ Github アカウントを持っていること。
☑ ローカル環境に VS Code がインストールされていること。
☑ Docker desktop がインストールされていて、起動していること。
☑ Dev Containers の VS Code 拡張がインストールされていること。（↓のリンクのもの)
流れ
- ローカルで適当なフォルダで VS Code を開き、devcontainers の設定と devcontainers の起動を行います。
- Next.js を 起動した devcontainers にインストールします。
- ローカル上で Next.js が動くことを確認したら、それを GitHub の任意のリポジトリにプッシュします。
- 最後に GitHub で Codespaces を作成します。(これはすでに説明した内容)
構築していく
まず、ローカルの任意の場所で適当なフォルダを作成します。空の状態で大丈夫です。
そのフォルダで、code . など実行し、VS Code を開きます。
そしてコマンドパレットで、Dev Containers: New Dev Container... を実行します。
続いて、開発環境として利用するコンテナの種類を設定します。
Next.js は Nodejs で動いているので、Node.js かつ Typescript が利用可能なコンテナの種類を選択しました。
その後は、Create Dev Container を選択すると、devcontainers の作成が始まります。
devcontainers を作成するとき、コンテナイメージを pull するところから始まるので、少し時間がかかるかもしれません。
しばらく待つと、自動で画面が開き、devcontainers に接続された状態になります。
パット見だと、通常の VS Code と代わりないので、これが本当にコンテナ内なのかよくわかりませんが、
一応ターミナルを開くと、コマンドプロンプトがローカルPC(ホスト) のものとは違うことが確認でき、
uname -a などのコマンドを叩くと、ローカルPCではないことがわかります(ローカルPC上のコンテナであるということ)
ちなみに、VS Code から離れて、ターミナルアプリなどを開いて、ローカルPCのシェルにアクセスし、 docker ps コマンドを叩くと、以下のような結果になり、devcontainers を作成したことによって、確かにコンテナが作成されていることが確認できます。
docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
92635d5285b0 mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye "/bin/sh -c 'echo Co…" 6 minutes ago Up 6 minutes loving_haibt
ローカルPC上で、devcontainers が起動できたので、その中で、Next.js をインストールします。
devcontainers に接続した VS Code のターミナルから、以下を実行すればインストールできます。
これは普通に Next.js のドキュメントからコピっただけのコマンドです。
npx create-next-app@latest
上記の様に、インストールが完了しました。
続いて、作成された Next.js のフォルダに入って、開発サーバーをテストしてみます。
# フォルダに入る
cd codespaces-example-nextjs-in-typescript/
# 開発サーバー起動
npm run dev
上記コマンド叩くと、以下のように自動でポートフォワーディングが行われ、VS Code からブラウザからその開発サーバーにアクセスするかプロンプトされるので、 Open In Browser すると・・・・
Next.js のデフォルトページが開くことが確認できました！
今度は、同じことをリモートの GitHub Codespaces でやります。
そのために、Github Codespaces で利用される .devcontainer フォルダと一緒に作成された .github フォルダを git 管理に commit します。
まずは VS Code のターミナルで ls すると、以下のようになっていることを確認。
$ ls -lart
total 20
drwxr-xr-x 2 node node 4096 Feb 27 10:41 .devcontainer
drwxr-xr-x 2 node node 4096 Feb 27 10:41 .github
drwxr-xr-x 4 node node 4096 Feb 27 11:08 ..
drwxr-xr-x 5 node node 4096 Feb 27 11:11 .
drwxr-xr-x 6 node node 4096 Feb 27 11:11 codespaces-example-nextjs-in-typescript
今回は、Next.js が作成してくれた、codespaces-example-nextjs-in-typescript のフォルダで git 管理を行いたいので、.devcontainer と .github をそれぞれ codespaces-example-nextjs-in-typescript 内部に移動します。
$ mv .devcontainer/ codespaces-example-nextjs-in-typescript/
$ mv .github/ codespaces-example-nextjs-in-typescript/
Next.js がインストールされるときに、git init はすでに行われた状態で、
git 管理自体は始まっているので、そこに先ほど移動したファイルを commit します。
$ cd codespaces-example-nextjs-in-typescript/
$ git add .
$ git commit -m "Add devcontainer.json"
その後、適当にリポジトリを作成します。↓のような感じです。READMEもなにもいりません。
そして、devcontainers のターミナルから、そのリポジトリに突っ込見ます。
git remote add origin https://github.com/the_name_of_your/repository.git
git branch -M main
git push -u origin main
コミットのプッシュが終わると、ブラウザでリポジトリを確認します。
.devcontainer/devcontainer.json がリポジトリに存在するので、それを github は検知し、以下のようなボタンを表示してくれます。
これは、記事の冒頭でお見せしたボタンと同じものです。
このようなプロセスで、.devcontainer/devcontainer.json のファイルを作成し、その中を適宜編集することで、開発のニーズに合わせた開発環境の構築ができるといった具合です。
同じように、クリックして、１分ほどまつと、、、
環境ができました！
最後に、実際に開発作業するとどうなるかをお見せします。
まず、以下のコマンドを GitHub Codespaces 上で実行し、Next.js の開発サーバーを起動します。
npm install
npm run dev
↓開発サーバー起動直後のターミナルの様子
app/page.tsx のファイルの内容を以下のように変更すると、、、
変更された通り表示が変更され、開発ができました！
スクショだと、変なエフェメラルなURLになっていますが、Github Codespaces 内で開発サーバーを起動すると、VS Code がそのURLを教えてくれるので、ブラウザで開いて見ることができます。
ということで、Next.js を使った開発を始めることができました！
まとめ
- devcontainer 使えば、簡単に環境構築できる。簡単に他のメンバーと共有できる。
- VS Code は devcontainer の仕組みを利用して、Github Codespaces の機能を提供している。
- 上記仕組みを使うことで、環境構築に時間をかけずに Next.js のプログラミングに着手できる。
- (いや、、まあ Node.js ぐらいみんなローカルPCにインストールしているはずだから、環境構築の手間はローカルPC上で直接やっても大したこと無いという説はありますよね。ただポータブルなのは便利)
- ちなみに、公式の Next.js Learn というチュートリアルが Next.js 習得するのに手軽で良さそうでした。Codespaces 立ち上げて、ぜひ勉強してみてください！