ここしばらくRails一本槍でやってきたのだけど、ここに来てRailsエンジニアの需要が減っているのか、単価が下がり気味です。なので、他の技術スタックも勉強しておこうと、Next.jsの勉強を始めることにしました。

## node.jsのアップデート

Next.jsはnode.js上で動作していますが、node.jsは割と頻繁にアップデートをしています。私も途中で気づいたのですが、入っていたnode.jsのバージョンが古くてNext.jsが動かせませんでした。なので、あらかじめnode.jsを最新にしておくのが良さそうです。

node.jsの環境管理はnを使うと簡単です。

![img](/mosaic-code.jpg)

これで最新版のnode.jsが入りました。(nを入れていない方は、`n インストール`などで調べてみてください)

引き続き、Next.jsアプリを作成します。

## Next.jsアプリの作成

![img](/mosaic-code.jpg)

いくつか質問がありますが、アプリ名は`next-test`、それ以外はデフォルトを選んでおきます。

アプリ名のフォルダ以下に新しいNext.jsアプリが生成されます。

## 開発環境での動作検証

特に何もしなくとも、これで動く状態になっています。`next-test`フォルダに移動し、

![img](/mosaic-code.jpg)

と入力すると、`localhost:3000`でアプリが動作していることを確認できます。

## Vercelにデプロイ

Next.jsアプリは、いとも簡単にVercelにデプロイできます。

まず、上記のフォルダをGitHubにアップロードしておきます。（ここは流石に省略します）

Vercelのサインアップについても簡単なので省略しますが、私はGitHubアカウントでVercelにサインアップしました。いつものVercelに許可しても良い？の認可画面が出ますが、それにOKするとサインアップは終了します。

サインアップ後、Add Projectを選んだ後、「Continue with GitHub」を選び、さっきアップロードしたNexs.jsのリポジトリを選択します。

すると、Vercel内で自動的にビルド、デプロイが行われ、ものの数分でデプロイ（世界中から見られる状態）になりました。

## CI/CD

VercelにはCI/CDが標準でついていて、上記のリポジトリに変更をpushすると勝手にCI/CDが走り、本番環境が書き換わるようになっています。こちらも検証しましたがあまりに何もせずに動いてくれたので拍子抜けでした。

## カスタムドメインの割当

オリジナルのドメインを割り当てるのも簡単です。（自分が管理するドメインがある前提です）。

例えば、hogehoge.exampleというドメインを持っている場合、next-test.hogehoge.exampleというDNS名にVercelのホストを割り当てるには、AWSの場合Route53を使って`next-test`に`CNAME`の`cname.vercel-dns.com.`を割り当てたうえ、Vercelのカスタムドメインのところに`next-test.hogehoge.example`と入力するだけです。

SSLの証明書はVercelの方で自動発行してくれるようで、何もする必要がありませんでした。

## まとめ

Next.jsの勉強というよりVercelの勉強みたいになってしまったのですが、あまりに簡単すぎてびっくりしました。この記事の最初から最後までに要した時間は5分ほどです。

FunctionsやMongoDBを使うとなると色々大変になってくるのだと思いますが、ひとまずこんなすごいものがホビー用途限定とはいえ無償で使えてしまうのは恐ろしいですね。

この環境を使ってNext.jsの勉強を始めてゆきたいと思いますが、本日のところはこれくらいにしておきます。

ここしばらくRails一本槍でやってきたのだけど、ここに来てRailsエンジニアの需要が減っているのか、単価が下がり気味です。なので、他の技術スタックも勉強しておこうと、Next.jsの勉強を始めることにしました。

## node.jsのアップデート

Next.jsはnode.js上で動作していますが、node.jsは割と頻繁にアップデートをしています。私も途中で気づいたのですが、入っていたnode.jsのバージョンが古くてNext.jsが動かせませんでした。なので、あらかじめnode.jsを最新にしておくのが良さそうです。

node.jsの環境管理はnを使うと簡単です。

```sh
$ sudo n install latest
```

これで最新版のnode.jsが入りました。(nを入れていない方は、`n インストール`などで調べてみてください)

引き続き、Next.jsアプリを作成します。

## Next.jsアプリの作成

```sh
$ npx create-next-app@latest
```

いくつか質問がありますが、アプリ名は`next-test`、それ以外はデフォルトを選んでおきます。

アプリ名のフォルダ以下に新しいNext.jsアプリが生成されます。

## 開発環境での動作検証

特に何もしなくとも、これで動く状態になっています。`next-test`フォルダに移動し、

```sh
$ npm run dev
```

と入力すると、`localhost:3000`でアプリが動作していることを確認できます。

## Vercelにデプロイ

Next.jsアプリは、いとも簡単にVercelにデプロイできます。

まず、上記のフォルダをGitHubにアップロードしておきます。（ここは流石に省略します）

Vercelのサインアップについても簡単なので省略しますが、私はGitHubアカウントでVercelにサインアップしました。いつものVercelに許可しても良い？の認可画面が出ますが、それにOKするとサインアップは終了します。

サインアップ後、Add Projectを選んだ後、「Continue with GitHub」を選び、さっきアップロードしたNexs.jsのリポジトリを選択します。

すると、Vercel内で自動的にビルド、デプロイが行われ、ものの数分でデプロイ（世界中から見られる状態）になりました。

## CI/CD

VercelにはCI/CDが標準でついていて、上記のリポジトリに変更をpushすると勝手にCI/CDが走り、本番環境が書き換わるようになっています。こちらも検証しましたがあまりに何もせずに動いてくれたので拍子抜けでした。

## カスタムドメインの割当

オリジナルのドメインを割り当てるのも簡単です。（自分が管理するドメインがある前提です）。

例えば、hogehoge.exampleというドメインを持っている場合、next-test.hogehoge.exampleというDNS名にVercelのホストを割り当てるには、AWSの場合Route53を使って`next-test`に`CNAME`の`cname.vercel-dns.com.`を割り当てたうえ、Vercelのカスタムドメインのところに`next-test.hogehoge.example`と入力するだけです。

SSLの証明書はVercelの方で自動発行してくれるようで、何もする必要がありませんでした。

## まとめ

Next.jsの勉強というよりVercelの勉強みたいになってしまったのですが、あまりに簡単すぎてびっくりしました。この記事の最初から最後までに要した時間は5分ほどです。

FunctionsやMongoDBを使うとなると色々大変になってくるのだと思いますが、ひとまずこんなすごいものがホビー用途限定とはいえ無償で使えてしまうのは恐ろしいですね。

この環境を使ってNext.jsの勉強を始めてゆきたいと思いますが、本日のところはこれくらいにしておきます。

node.jsのアップデート

続きを読むには単価診断を受けてください（30秒）