Bellhopは、移動をシームレスで楽しいものにすることを目的とした技術系スタートアップです。また、米国で最も急成長している引っ越し会社の1つでもあります。私たちの会社が成長し続けるにつれて、信頼できるWebフレームワークの上に構築していることを確認する必要があります。そのため、私たちのWebチームは最近Next.jsに移行することを決定しました。

アプリケーションの移行は決して簡単ではありませんが、そのメリットはそれだけの価値があると考えています。

現在の設定

現在のWebアプリケーションは、プログレッシブ静的サイトジェネレーターであるReactStaticと呼ばれるフレームワーク上に構築されています。React Staticを使用すると、最初のランディングページをすばやく提供しながら、クライアントで一度単一ページアプリケーションに変換することで、ページ遷移を高速化できるというメリットを享受できます。これにより、初期読み込み時間が短く、ページ遷移がシームレスになり、パフォーマンス、SEO、セキュリティが向上するという、両方のメリットが得られます。

残念ながら、ライブラリのサポートが減少しているため、チームは別のより安定したソリューションに移行する必要がありました。

私たちが行くところ

Next.jsは、Node.js上に構築されたオープンソースフレームワークとして2016年にリリースされました。それ以来、フロントエンド開発用の主要なJavaScriptフレームワークの1つに成長し、現在はReact Framework forProductionとして知られています。フレームワークは、サーバー側のレンダリングや静的生成などの最適化でReactを拡張します。

Next.jsは、高速更新やパフォーマンスの向上などの機能に貢献しているFacebookやGoogleなどの大手テクノロジー企業と協力して、Vercelのチームによって管理されています。

さらに、GitHub、Netlify、Hulu、Uber、Ticketmasterなどのトップテクノロジー企業、そして現在はベルボーイでも使用されています。

Next.jsの好きなところ

Next.jsには、私たちが名前を付けることができるよりも多くの機能があり、常に新しい機能が出てきています。しかし、ここに私たちが最も興奮しているもののいくつかがあります。

• ハイブリッドSSGおよびSSR。ページをビルド時または実行時にレンダリングするかどうかをページごとに選択します。
• インクリメンタルスタティックレネガレーション（ISR）。指定された時間が経過した後にページを再検証します。つまり、サイト全体を再構築せずに静的ページを更新できます。（これは、それがどのように機能するかを示すビデオです。）
• Next.jsアナリティクス。ユーザーの実際のデバイスでサイトがどのように機能しているかを確認します。
• APIルート。APIエンドポイントを簡単に追加して、認証、フォーム送信、外部サービスへの安全なアクセスなどを処理します。
• ネクストライブ。チームとリアルタイムで共同作業します。（これはまだリリースされていませんが、リリースされるのを楽しみにしています。）

Vercelでのホスティング

Next.jsへの移行に伴い、ホスティングをAWSS3からVercelに移行します。

Next.jsアプリケーションのホスティングに関しては、Vercelは非常に簡単です。他のプラットフォームはNext.jsサポートを提供しますが、VercelはNext.jsアプリケーションをホストするように構築されているため、常に他の誰よりも早く新機能をサポートします。

Vercelには、ホスティングプロバイダーに期待されるすべての機能が満載ですが、いくつかの追加の利点もあります。

ここにいくつかあります：

• 実体験スコア。パフォーマンスダッシュボードを表示して、アプリケーションを最適化します。
• 組み込みのGraphCMS統合。アプリケーションをGraphCMSと簡単に統合できます。（この機能はまだ開発中ですが、作業中であることに興奮しています。）
• Next.jsを管理するチームからのサポート。それ以上に良くなることはありません！
• URLをプレビューします。本番環境にデプロイする前に、機能ブランチをプレビューします。

これがベルボーイにとって何を意味するのか

では、これらすべてがベルボーイとお客様にどのようなメリットをもたらすのでしょうか。さて、Next.jsへの移行がプラスの影響をもたらすと私たちが感じるいくつかの方法があります。

• より良い開発者エクスペリエンス（DX）。Next.jsは、高速更新、APIルート、自動ポリフィル、ファイルシステムルーティング、プレビューモードなどの機能を備えており、客観的に優れた開発者エクスペリエンスを提供します。
• より良いユーザーエクスペリエンス（UX）。また、ユーザーはISRなどの機能の優れたエクスペリエンスの恩恵を受け、最新の情報をすばやく取得できます。
• 成長するための安定したプラットフォーム。安定したプラットフォームは、ユーザーのダウンタイムが少ないことを意味します。
• 新しい機能をより迅速に展開します。成長するフレームワークとツールと開発者の広大なエコシステムにより、チームは機能を迅速に出荷できるようになります。
• 独自のスタックを所有します。この動きにより、私たちのチームはスタック全体の所有権を拡大し、他のチームが自分たちの影響力の大きいプロジェクトに集中できるようになります。
• 新しい才能を簡単に取り入れることができます。Reactを知っているほとんどの開発者はNext.jsも知っています。つまり、新しいエンジニアをより迅速にオンボーディングできます。
• 私たちが最前線にいることを保証します。フレームワークに常に新しい機能が追加されているため、チームがWeb開発で発生するすべての新しいことに簡単に適応できるようになります。

資力

Next.jsについてもっと知りたいですか？以下のリソースを確認してください。

• Next.jsドキュメント
• React開発者としてNext.jsを学ぶ必要がある理由
• 素晴らしいNext.js
• Next.jsチュートリアル