見出し画像

Jamstackの鉄板フレームワークNext.jsって、何だ？

しかたこうき🎥動画制作✖️軽めのWeb開発

こんにちは。UPLIFT/合同会社 知的・自転車代表のしかたこうきです。

弊社は、動画制作と軽めのWeb開発の会社です。このnoteでは、弊社がWeb領域で注力しているJamstackについて説明しています。

Jamstackについて調べていると、よくNext.jsという名前を目にすると思います。

既に多くのサイトやシステムで取り入れられており、Jamstack界隈では人気のフレームワークとなっています。

この記事では、Next.jsとは何か、その人気の秘密や優れた機能について詳しく紹介します。

そもそもNext.jsとは

Next.jsを紹介する前に、Reactについて説明しましょう。ReactはFacebook社（現Meta社）によって開発された、JavaScriptのフロントエンドフレームワークです。

そして、Next.jsは、React製のフルスタックフレームワークとなります。Reactはフロントエンドのみのフレームワークですが、Next.jsはそれに加え、サーバーサイドの処理も可能です。

そのため、Next.jsではサーバーサイドレンダリング（SSR）が可能で、SEOに優れるサイトやアプリを構築することができます。

また、Next.jsでは高速でスムーズなページ遷移を実現できるため、ユーザーエクスペリエンスを向上させることができます。

これはプリフェッチと言って、現在表示されているページに存在するリンクを解析し、そのリンク先を遷移する前に読み込んでおく機能です。

ユーザーは通常の画面を見ているだけですので、見た目上には何の変化もありません。

しかし、次にそのページのリンクのどれかをクリックすると、既に読み込まれていた次のページがすぐに表示されます。

これにより、非常に高速でスムーズなページ遷移を実現可能となっています。

Next.js×Vercelの親和性

Vercelは、クラウドプラットフォームを提供する企業です。

Vercelは、高速でスケーラブルなWebアプリやサイトを構築するためのサービスを提供しています。

Vercelは、サーバーレスのアプリケーションや静的サイトを作成するためのツールを提供しています。

Vercelは、CDNを利用することで、高速なページロードを実現しています。 Vercelは、開発者やデザイナーが、迅速かつスムーズにWebアプリやサイトを構築できるように、さまざまな機能を提供しています。

またVercelは、Next.jsを開発し、サポートもしており、Next.jsで作成したWebアプリやサイトをVercelでデプロイすることができます。

Next.jsはVercelが提供するサービスですから、Vercelでホスティングすると非常に相性が良いことが知られています。画像最適化やAPIRoutesといった、Vercelでホスティングする前提の機能も搭載されています。

従って、Vercelでのホスティングを検討する場合は、まず第１候補としてNext.jsの採用を考えるべきでしょう。

Next.jsを選ぶ際のポイント

Next.jsを選ぶ際のポイントはいくつかあります。

本当にNext.jsの採用が正解かどうか

プロジェクトによっては他のフレームワークの方が適している場合もあります。ですので、プロジェクトの要件を細かく検討し、本当にNext.jsがいいのか、それとも他のフレームワークを採用すべきなのかは、じっくり判断する必要があります。

特にサーバーサイドレンダリングが必要かどうかは、サーバー要件やフレームワークとの兼ね合いで重要になりますので、必ず確認しましょう。

Next.jsで実装可能なスキルや経験を持っているかどうか

このプロジェクトを社内のメンバーにアサインするなら、そのメンバーがNext.jsを使いこなせるかどうか、外部のベンダーに依頼するなら、Next.jsでこのプロジェクトを完成させられるかどうか。それに必要なスキルや経験を持ち合わせているかどうかが重要になります。

プロジェクトに必要な機能と、それを実装するスキルを把握し、Next.jsがそれを満たせつつ、チームのスキルや経験でNext.jsを扱えるかどうかを確認することが重要です。

Next.jsでの開発の流れ

Next.jsでの開発の流れとしては、

  1. プロジェクトのセットアップ

  2. コンポーネントの作成

  3. ページの作成

  4. データの取得と表示

  5. ページの遷移とリンクの設定

  6. フォームの処理

  7. サーバーサイドの処理

  8. デプロイ

があります。これらは主に制作開発側のタスクになりますが、発注側も理解しておいた方が良い情報ですので、詳しく説明します。

Next.jsプロジェクトのセットアップ

Next.jsでのWebアプリやサイトを開発するには、まずはプロジェクトをセットアップする必要があります。 この段階では、Next.jsを使用するための設定や、必要なライブラリやツールをインストールします。

コンポーネントの作成

Next.jsでは、再利用可能なコンポーネントを作成することができます。 コンポーネントは、HTMLやJavaScriptを組み合わせた単位です。 コンポーネントを作成することで、同じようなコンテンツを複数のページで使用することができるようになり、開発スピードが上がります。

ページの作成

Next.jsでは、Reactを使用してページを作成することができます。 ページは、URLと対応するコンポーネントから構成されます。 Next.jsでは、React Routerを使用することで、URLを指定することで、対応するコンポーネントを表示することができます。

データの取得と表示

Next.jsでは、APIを使用してデータを取得することができます。 取得したデータを、Reactのステートやプロパティを使用して保存し、必要に応じて表示することができます。

ページの遷移とリンクの設定

Next.jsでは、React Routerを使用することで、ページの遷移を実現することができます。 リンクを設定することで、ページを遷移することができます。 Next.jsでは、Linkコンポーネントを使用することで、クリックされたときに対応するページに遷移するように設定することができます。

フォームの処理

Next.jsでは、フォームを作成することができます。 フォームを作成することで、ユーザーからの入力を受け付けることができます。 Next.jsでは、Reactのフォームコンポーネントを使用することで、フォームを作成することができます。

サーバーサイドの処理

Next.jsでは、サーバーサイドの処理も可能です。 サーバーサイドでの処理には、Expressなどのサーバーサイドフレームワークを使用することができます。 サーバーサイドの処理が可能になることで、フロントエンドだけではできなかった複雑な処理や、データベースとの連携を行うことができます。

デプロイ

Next.jsでは、Vercelを使用することで、簡単にデプロイすることができます。

Vercelは、Next.jsのオフィシャルホスティングサービスであり、Next.jsをデプロイするための最適な環境を提供しています。

Vercelを使用することで、GitHubやGitLabなどのgitリポジトリと連携して、自動的にデプロイすることができます。

また、VercelのCDNを使用することで、高速なページロードを実現することができます。

デプロイは一度設定すると、次回以降はCI/CDが働くので、Gitのリモートリポジトリにプッシュするだけで、自動的にデプロイしてくれるようになります。

Vercelには、プレビューブランチという機能もあり、mainブランチ以外のブランチがリモートリポジトリにプッシュされると、ランダムなサブドメインを付加して、本番環境とは異なるテスト・ステージング環境を生成します。

こちらは非公開環境にすると、関係者のみがチェックできるセキュアなテスト環境をすぐに作ることができ、大変便利です。

Vercel以外のデプロイ先選択肢としては、Netlifyなどが挙げられます。

また、AWSやGCPといったメガクラウド環境にデプロイすることも可能です。ただ、その場合はメガクラウドに応じた設定が必要になりますので、メガクラウドの知識が求められます。

VercelやNetlifyは、メガクラウドに比べると、設定項目が少ないので、なれてしまえばすぐにデプロイが可能となります。

Next.jsで実現できるサイトやシステムの例

Next.jsを利用することで、様々なサイトやシステムを構築することができます。

その中でも、Eコマースサイト、スマートフォンアプリのフロントエンド、ブログサイトなどが挙げられます。

Eコマースサイトでは、商品のカテゴリや商品詳細ページ、カートや決済などのアプリケーションを構築することができます。

また、スマートフォンアプリのフロントエンドでは、ネイティブアプリに近いユーザーエクスペリエンスを提供することができます。

さらに、ブログサイトでは、記事の一覧や記事詳細ページ、カテゴリなどを構築することができます。

すでに存在するNext.jsを実際に利用したサイトやシステムの事例

Next.jsを実際に利用しているサイトやシステムの事例として、Airbnb、Netflix、Nikeが挙げられます。

Airbnbでは、ホテルや民泊の取り扱いに特化したサイトを構築しています。

Netflixでは、動画配信サービスのWebアプリを構築しています。

また、Nikeでは、スニーカーやアパレルの取り扱いに特化したサイトを構築しています。

このように、Next.jsを利用することで、様々なサイトやシステムを構築することができます

また、Next.jsを利用することで、ネイティブアプリに近いユーザーエクスペリエンスを提供することもできます。

Next.jsを採用するサイトやシステムを発注する時の注意点

Next.jsを選んだ企業の担当者は、Next.jsの特徴やメリットを理解し、開発の流れを把握する必要があります。さらに内製する場合であれば、デバッグやトラブルシューティングの方法を知っておくこと、必要なスキルを持ったチームを組むこと、プロジェクトのマネジメントを徹底すること、必要に応じてドキュメントやコミュニティを参照することが重要です。

また、Next.jsはVercelとの統合が深く、Vercelでのデプロイも簡単にできるため、Vercelの利用をまず第一に検討するべきでしょう。 さらに、Next.jsではサーバーサイドレンダリングが可能であり、SEOに優れるサイトやアプリを構築することができます。

しかし、プロジェクトによっては他のフレームワークの方が適している場合もあるため、プロジェクトに必要な機能を把握し、Next.jsがそれを満たせるかを確認することが重要です。

既に前述しましたが、Next.jsは、高速でスムーズなページ遷移を実現できるフルスタックフレームワークであり、サーバーサイドレンダリングが可能です。

これらの特徴は、Eコマースサイトやスマートフォンアプリのフロントエンド、ブログサイトなどで威力を発揮します。

自分たちが求めているサイトやシステムの要件が、Next.jsの強みとマッチしているかしっかり把握することが大切です。

まとめ：Next.jsは魅力的な機能が豊富なフルスタックフレームワーク

Jamstackでサイトやシステムを構成するとき、どうしても静的サイトベースで考えてしまったり、その場合はSEOの弱さをどう補うかを考えてしまいがちです。

しかしNext.jsはその弱みをうまくカバーする機能を多数搭載しており、SSRやISRによるSEO対策、高速なページ遷移を実現するプリフェッチ、サーバーサイド処理の機能など、痒い所にしっかり手が届く有能なフレームワークといえます。

今の所、VercelはNext.jsの開発を積極的に進めており、それもあってNext.jsを安心して採用する企業や技術者も多い印象です。Reactベースということもあって、情報も多数揃っているので、これから新規導入する際の障壁もだいぶ低いと思います。

Jamstackでサイトやシステムを構築する場合は、鉄板構成の１つになるので、Jamstack検討の際は、ぜひNext.jsも採用候補の一つに加えてみてください。



頂いたサポートはクリエイター活動の主に機材費・出張費に充てます！　より良い作品アウトプットのためにご協力よろしくお願いします！