📈

NEXT.jsとは

2023/10/27に公開

NEXTの生まれ

NEXTjsはReactのフレームワークです。
ReactはSPAで、ページはそのまま置いといて内容が変わります。なので読み込み速度が速いです。
でもページが多くなるとSPAは最初のページから読み込み速度が遅くなります。
この問題を解決するためNEXTが誕生しました。

Reactは白い画面がらHTML->CSS全部読み込みます。
HTMLを最初から見せてくれます。
NEXTは最初読み込んで動的なことは後で読み込みます。
サーバーからレンダリングされるのでNEXTがSEO的に良いです。

クライアント側でレンダリングする。CSR(SPA)、つまり自分のローカルでレンダリングするのでパソコンのスペックによって読み込み速度が違う
⚫︎メリット：パソコンのスペックによって違うが、読み込みが終わったらほんとに早い

サーバーサイドでレンダリングする。SSG、SSR、ISR
⚫︎メリット：最初レンダリングする時は早いが、結局その後からはReactより遅い

※Pre-rendering(プリレンダリング)とはサーバー側でhtmlのレンダリングを事前にすること

①ブログ、ドキュメンタリー、EC商品サイトの時おすすめ
②変更するのがあまりないとき
③ビルドするとき必要なHTMLをレンダリングする
④USERがrequestするときhtmlをそのまま返すので読み込み速度が本当に早い

①SNSタイムライン、USERプロフィールにおすすめ
②変更するのが多いとき
③USERがserverにrequestするときserverでhtmlをレンダリングする

npx create-next-app@latest
cd next-blog  
npm run dev

最近NEXTが13にバージョンアップしたのでNEXT公式サイトにlearn next js courseをやってみるのもいいと思った。