Next.js13を学び、ブログをデプロイしました。
Posted date at 2024-05-10ShinCodeさんのUdemy講座でNext.js13を学習しました。
Next.jsを使うと何がいいのか、知っておきたいこと、学ぶ上で注意したほうが良いと思うことを、１度挫折した林がまとめました。
🚀講座について
詳細は以下のUdemyリンクをご確認ください。
動画再生3.5時間 林がかけた時間12.25時間
学習の過程では、以下のブログを作成しました。html、CSSの勉強にもなりました。
🚀Next.jsを使うと何がいいのか。
ざっくりいうとサーバー処理で高速化ができる点です。
ネットでググられると色々混乱されると思いますが、本質は主に以下と認識して良さそうです。
Next.jsをつかうと、html、CSSのレンダリング（描画）、Javascriptの実行を、ブラウザ（クライアント）だけでなく、サーバでも行うことができる。
そしてそれが、コンポーネント（ページ単位やhtml要素と考えてください）毎に切り替えられる。
皆さんは自分のhtml、CSS、JavaScript（Vannlia、React）がどこで実行されるか意識したことがあるでしょうか。
それはブラウザ（クライアント）です。
Next.jsを使うと、上記の一部または全部をサーバ側で行うとこができます。サーバとクライアントのどちらで行うかは、コードで指定します（なお、何も指定しないと、デフォルトはサーバになります）。
🚀Next.jsを学ぶ際に最初に知っておきたいこと
Next.jsについて学ぶ上でレンダリングパターンについて理解することが大切です。これを押さえておかないと学習しても
手を動かすだけで、何をやったかが良く分からなかったという結果に終わります（Reactの学習にはなります）。
🐡MPA（MultiPageApplication）とSPA（SinglePageApplication）
我々の普段見ているWebページ・Webアプリケーションの主な仕組みは2種類に大別されます。それがMPAとSPAです。
〇MPA
従来の大学や企業サイトなどで使用される仕組みです。ページごとにhtmlを切り分け、ページを表示するときにサーバーからブラウザにhtml、CSS、Javascriptを１からダウンロードし画面を更新します。
林が開発したMPAアプリの例
〇SPA
一つのページからなるアプリケーションです。Twitter、Facebookをはじめ、現在は、大学や企業サイトでも採用されています。こちらは、htmlは１つです。ページ遷移や要素の表示は、Javascriptで行います。urlが異なっていても、要素の表示、非表示を切り替えていると考えていいです。
上記は、いずれも、クライアントサイドで実行されます。以降はSPAの話で、Next.jsの話もSPAの話になります。
林が開発したSPAアプリの例（後述のCSRに該当）
ID：syota.hayashi@morimatsu.jp PASS:123456
🐡CSR、SSR、SSG、ISR
SPAは、レンダリングパターンが４つあります。ReactはCSRです。Next.jsはCSR、SSR、SSG、ISRを選べます。
〇CSR（ClientSideRendering）
初回読み込み時にブラウザがJavaScriptをダウンロードして実行し、HTMLを生成します。初回は読み込み時間がかかりますが、以降は読みが発生しないため高速に動きます。Javascriptの実行速度はブラウザに依存します。
〇SSR（ServerSideRendering）
表示の切り替えの際にクライアントに送信する前にサーバーでHTMLを生成します。Javascriptの実行速度はサーバーに依存します。
〇SSG（Static Site Generation）
ビルド時にHTMLを生成します。生成されたページはサーバーに配置され、リクエストに応じてそのまま配信されます。Javascriptの実行速度はサーバーに依存します。（ビルド時というのは、サーバにデプロイ（アップロードと考えていいです）したときということです。
〇ISR（Incremental Static Regeneration）
SSGとSSRの中間で、ビルド時に生成されたページを後から更新することができます。更新のタイミング（秒）をコードで指定します。Javascriptの実行速度はサーバーに依存します。
つまり、データの変更が頻繁にある場合はSSR、ない場合はSSG、変更はあるがリアルタイム性は必要ない場合はISRを選択するというわけです。これは、コンポーネント（ページや要素（例えばテーブル要素はSSRにするなど））単位で指定可能です。Next.jsを使用することにより、処理の一部または全部をサーバに任せることができて高速化ができるというわけです。
🚀Next.jsを学ぶ前に注意すること
蛇足かもしれませんが、こういう内容が１番価値があると思ったので書きます。
Next.jsを学びたい方はまず、Reactで、動画学習ではなく、自分で１つ０からアプリを作ることをお勧めします。
そして、Reactが書けるようになるにはJavascript（Vannila）で何か自分で１つでも０からアプリをつらないと難しいと感じます。私は業務で小さいものもいれてJavascript（Vanilla.js）で5つ以上、Reactで4つアプリを完成させました。その上で再度Next.jsに触れてみて、ようやくどういうものかがコードレベルで分かってきた気がしています。
やっと、スタートに立てた。。。という感じです。
以前、Reactを学習し始めたとき、同時にNext.jsを学びましたが、全く記憶に定着しませんでした。
言葉や概念は理解できた（つもり）でも本質的な部分は理解できていませんでした。いわゆる資格試験には合格できても仕事ができないという状態です。
Next.jsを学習することで、html、css、javascript、Reactの学習にもなるので、それを継続しつつ、まずは何か１つ業務でアプリを作ります。
←ホームに戻る