Next.jsの概要 & 構築
背景
実務ではReactを使っているのですがNext.jsのキャッチアップも触ってみたいと思ったので、内容を書き留めておきたいと思いました。
本記事では、Next.jsに関する情報をまとめていきます。
内容は易しめです。
ReactとNext.jsの違い
Next.jsは、Reactをベースにサーバーサイドからクライアントサイドまでを統合的に開発できるWebアプリケーションフレームワークです。
React
Reactは、コンポーネントベースでのUI設計や、仮想DOMを使用して効率的にUIを更新し、UXやパフォーマンスを向上させることができますが、サーバー側の機能を一切持っていません。
Reactを使用する際にサーバーサイドレンダリング（SSR）を実装する必要があります。
Next.js
Next.jsは、Reactを使用してWebアプリケーション全体を構築するためのフレームワークです。
Reactと同様の機能の他に、サーバーサイドレンダリング、APIルート、自動ルーティング、静的ファイルのサポートなど、Webアプリケーション開発に必要な機能が含まれています。
特定のWebページにだけ導入することは出来ない
Next.jsは、Reactをベースにしているため、Reactのコンポーネントを使用してUIを構築することができますが、Next.jsはWebアプリケーションフレームワークであるため、単一のWebページにReactを導入することはできません。
Next.jsを使用する場合は、Webアプリケーション全体をNext.jsで開発することになります。
Next.jsの特徴
SSR/SSGに対応している
SSR（Server Side Rendering）
Next.jsの最大の特徴は、SSR（Server Side Rendering）に対応している点です。
SSRは、クライアントがWebページにアクセスした際にサーバー側でWebページを生成し、HTMLやCSS、JavaScriptなどのコードを含んだ完全なページをクライアントに送信する機能です。
SSG（Static Site Generation）
また、SSG（Static Site Generation）という機能を使うとすべてのWebページが事前にレンダリングされ、HTMLファイルとして提供されるため、サーバー側の負荷が軽減されます。
SSGはビルド時にHTMLファイルを生成するため、データが更新されると再ビルドする必要があるという欠点があります。
ファイルによるルーティング
Reactでは、React Routerというライブラリを使用することで、複数のページを作成しSPAとしての機能を実現することができますが、多数のWebページを用意して表示を切り替えたり、ページのリロードに弱いという欠点があります。
Next.jsには標準でルーティング機能があり、フォルダーを作成し、その中にページのコンテンツとなるファイルを配置することで、簡単に多数のページを作成し扱うことができます。
Next.jsを使ってみる
yarn create next-app
nodeのバージョンは公式には`**Node.js 14.6.0 or newer**と記載ありましたがv14.17.6`ではエラーになり、v14.18.0で動きました。沼りました。勘弁。。。
今日は時間なくなってしまったので次の記事にて..
続く…
コメント
本記事の内容は以上になります！
続きのアウトプットも随時更新したいと思います。
間違いがありましたら修正いたしますので、ご指摘ください。
興味があれば他の記事も更新していきますので是非ご覧になってください♪
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
