Next.jsの勉強

2

2024年03月14日 1:49

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

node.jsのアップデート

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

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

img

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

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

Next.jsアプリの作成

img

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

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

開発環境での動作検証

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

img

と入力すると、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-testCNAMEcname.vercel-dns.com.を割り当てたうえ、Vercelのカスタムドメインのところにnext-test.hogehoge.exampleと入力するだけです。

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

まとめ

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

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

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

# Next.js
2

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。

目次を見る