Next.jsについて、初心に返ってじっくり学んでみる1　〜　導入編

みなさんこんにちは
突然ですが、Next.jsって聞いたことがありますか？？？

Reactのフレームワークで、現在、Web系の開発で流行っています
初心者の方でも学びやすく、シンプルな所が良いと評判です

Web開発に使える知識がたくさん詰まっているので、これを機会に学んでみてはいかがでしょうか？

そもそもNext.jsとは？

Next.jsは2016年頃に最初のバージョンがリリースされ、Reactを使いやすくするフレームワークとして注目されたようです（当時は全然知りませんでした・・・）

特徴として
現在では、Huluなどの大手企業で使われている
また、勉強で個人の学習などにもよく使われている
などがあります

個人で学習に使われる理由としては、
個人で行う理由はシンプルに使いやすい
提供しているvercelとの連携が容易で、デプロイしやすいなどがあります

Next.jsの特徴について

先ほど簡単に、説明しましたが、Reactのフレームワークのため、別途下記のような特徴があります

ページの作成が比較的簡単
最初の環境構築が比較的簡単で、ページ作成がすぐにできます
このため、最初の環境構築で挫折などが少ないかと思います

高速でページの表示
サーバーサイドレンダリング(SSR)や静的サイド生成(SSG)の機能により、画面が高速で表示され、SEO対策にも使えます

ルーティングが設定しやすい
App Router（Next.jsの13以降のバージョンに搭載）により、appの下にフォルダを作るだけで、ページ遷移することができます
例えば、タスクのページやタスクの変更ページなどの切り替えの設定などが簡単にできます

スタイルが比較的、簡単に設定できる
Tailwind CSSなどのフレームワークを使うため、一からCSSを使うより、スタイルも簡単に設定できます
（これは、他のvueやAngularなども使っているので、なんともですが、勉強しやすいの意味で記載してます）

※他にもたくさん特徴があります

その他特徴について（かなり難しめ）

Next.jsには画面表示には、様々な仕組みがあり、各ページでどれを使うのかなどを考え、ページの最適化を行います

仕組みとして下記のようなものがあります
（ざっくりと書いており、裏側ではAPI間での連携なども発生します）
（APIでの動きなどは、ある程度システムを作り、リリースのタイミングなどで再度勉強をしましょう）

CSR(Client-Side Rendering)

　最初にサーバーにアクセスし、最小限のデータ(HTMLやJavaScript)を取得
　その後は、ブラウザ側でJava Scriptによりページを表示

　メリット
　初回以降はページの表示がかなり速い

　デメリット
　初回のサーバーからのデータの取得上、SEOは弱い

SSG (Static Site Generation)

　ビルド時に静的なHTMLファイルを生成し、サーバーからそのまま配布
　
メリット
　サーバーにHTMLファイルがあるため、かなり表示が速い
　SEO対策がしやすい

デメリット
　ビルド時に静的ファイルを生成するため、ユーザー毎に変わるようなページには不向き

SSR (Server-Side Rendering)

　ユーザーがサーバー側にリクエストを送るとサーバーでページを生成し、ブラウザに返す

メリット
　サーバーでレンダリングするため、動的コンテンツでも対応できる

デメリット
　サーバーで毎回レンダリングするため、サーバーに負荷や遅くなることがある

ISR (Incremental Static Regeneration)

　SSGの一部（？）であり、事前に生成された静的ページを必要に応じて再生成できる機能
　Next.jsでは時間指定やデータ更新後に再生成などができる
　このため、静的ページを高速にしつつ、動的ページの更新にも対応ができる

メリット
　表示速度が速い
　静的ページをそのまま返すため、サーバーの負荷が減らせる
　SEOにも使える
　動的ページにも利用できる

デメリット
　再生成の初回などは遅いことがある

まとめ

Next.jsの難しい機能は正直、何これ？となる方が圧倒的に多いと思います
ただ、この難しい機能は、初めてNext.jsを試す方などが100％知っておく必要はないと思っています

コードを書いたり学んだりしながら、必要に応じて学べばいいかと思っています

私ももっと細かい知識などは全然足りないので、知識をまとめ、更新しながら、学んでいきたいと思います

お読みいただきありがとうございました