SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Vercel+Next.jsを活用したWebアプリケーション開発入門

手軽に高速にWebサイトを公開! Webホスティングサービス「Vercel」の概要と使い方

Vercel+Next.jsを活用したWebアプリケーション開発入門 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Vercelが対応するフレームワーク

 Vercelは30を超えるさまざまなフレームワークに対応しています。Next.jsとは特に相性が良いです。Next.jsはVercelが中心となってGoogleやFacebookと一緒に構築したReactフレームワークだからです。

VercelとNext.jsの組み合わせがお勧め!

 VercelとNext.jsを組み合わせた場合の大きなメリットとして、Incremental Static Regeneration(ISR)があります。

 Next.jsでは静的ページの生成が可能で、高速な表示が可能です。一方静的ページ生成の弱点として、生成するページが多くなればなるほどビルド時間が長くなってしまうことがあります。

 例えば、10万点の商品を扱うECサイトを運営していたとして、各商品ページのビルドが1ページあたり50ミリ秒かかるとすると、すべての静的ページを生成するには2時間近くかかってしまいます。

 ISRを使えば、「ビルド時に最も人気のある1000商品のみ常に生成し、それ以外の商品はリクエストがあった場合にのみオンデマンドで生成する」といったことが可能です。この場合、ビルドはたった1分で済むことになります。

 Next.jsはもともとReactで対応していなかった、サーバサイドレンダリング(SSR)などの機能に対応すべく開発が進められました。Next.jsプロジェクトはGoogleなどの支援を受けて順調に進み、シリーズAの資金調達で2100万ドルを確保しました。

 Vercelの現CEOであるGuillermo RauchはNext.jsの原作者でもあります。Next.jsが軌道にのり、次に彼が求めたのは、開発者にとってフレンドリーであり、利用者にとっては高速で安定してNext.jsが動くプラットフォームであるVercelだったのです。

Vercelの持つ高速なエッジネットワーク

 VercelのCDNはグローバルエッジネットワークで展開しており、90の都市で週に240億を超えるリクエストを処理しており、実におよそ10ペタバイト分のデータを節約しています。これだけ大規模なネットワークにもかかわらず、99.99%のSLAで運用しています。

 エッジは日本にもあり無料プランでも利用可能です[注1]。競合サービスは日本は有料であることも多いので、うれしい点だと思います。

[注1] 2022/4/6時点での筆者が調べた結果です。公式情報ではありませんので、今後予告なく変更される場合があります。

Vercelの採用企業は80以上

 Vercelを利用している企業はMeet our customersに一覧があります。GitHubをはじめ、我々日本人にもなじみ深い任天堂やマクドナルドのロゴを確認できます。

 これらの大企業が採用するには厳しい条件があると思われますが、それらをクリアしているという実績がVercelにはあるといえるでしょう。

[コラム]Nuxt.jsとNext.jsどちらが人気?

 日本ではNext.jsよりもVue.jsベースであるNuxt.jsを使っているという方も多いと思います。実はNuxt.jsはNext.jsに影響を受けて開発されました(参考:Nuxt.jsのバージョン0.0.1リリース時に発表されたドキュメント)。

 日本ではVue.jsのほうが先に人気が出たのもあって、数年前はNuxt.jsのほうが人気がありました。しかし、Googleトレンドを確認すると、2020年後半あたりからは徐々に逆転しはじめ、Next.jsのほうが人気が出てきているように思われます。

 なお、海外では圧倒的にNext.jsのほうが人気があるようです。

次のページ
Vercelを使ってみよう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Vercel+Next.jsを活用したWebアプリケーション開発入門連載記事一覧

もっと読む

この記事の著者

山本 誠樹(サイトコア株式会社)(ヤマモト マサキ)

 サイトコア株式会社 セールスグループ パートナーテクニカルイネーブルメントマネージャー。通信系システムや会員管理サービスの設計・開発から保守まで、システムエンジニアとして様々なプロジェクトに約20年従事。近年はクラウドにフォーカスしたコンサルティングを小売・流通・電力系など業種を問わず行う。201...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15780 2022/05/24 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング