👻

[初心者向け] Next.jsってなんで人気なの?

2022/10/09に公開

仕事でReact/Nextを書いて3年目になりますが、ぼんやりと理解している部分もあるのでここらで一旦アウトプット!今はNext使っているのでNextについて書きます。

これからNext.js始めるよ〜
Next.jsってなんか人気だけど何がいいのかわからん・・・

という人は是非読んでいってください!!!!


はじめに

Next.jsはReactのフレームワーク。(ReactJavaScriptのライブラリです)

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.js は、静的とサーバーのハイブリッドレンダリング、TypeScript のサポート、スマートバンドル、ルートのプリフェッチなど、実運用に必要なすべての機能で最高の開発者体験を提供します。 設定は不要です。(DeepLによる翻訳)

と公式(https://nextjs.org/)にババーンと書かれている通り、様々な便利機能を設定不要で利用できるのがNext.jsの魅力。

今回はその中でもレンダリングを中心に見ていこうと思います👀


サーバー側でHTMLを生成できる

ReactはいわゆるCSR(クライアントサイドレンダリング)つまりブラウザ側でレンダリングを行いますが、Next.jsはSSR(サーバーサイドレンダリング)というレンダリング手法によりサーバー側でHTMLを生成し、ブラウザに渡しています。

SSRだと・・・

  • 表示が速い(ただしサーバー側のスペックや通信速度による)
  • ユーザーの通信環境に左右されにくい

などのメリットが得られます。

またSEOに強いとも言われてきましたが、近年のクローラーの進化によりCSRでもさほど問題なくSEOを検知できるようになっているそうです。


静的なページをビルド時に生成することもできる

次にSSG(スタティックサイトジェネレーション)を紹介します。

その名の通り静的なサイトを生成します。
SSRではサーバー側でレンダリングを行なっていたのに対し、SSGではビルド時に一括してレンダリングします。

ブログなどの静的な記事を表示する場合にはSSGを活用すると、高速で表示できて良いですね!


SSRとSSGの中間?!みたいなこともできる

3つ目に紹介するレンダリング方法はISR(インクリメンタルスタティックリジェネレーション)です。
SSGと同じようにビルド時に静的なページを生成しレンダリングしますが
サーバー側にてバックグラウンドで一定期間ごとにページの再生成を行います。
動的だけど、別に常に最新じゃなくてもいいよーというページではSSRよりパフォーマンスが良く、適しています。(あまり使う機会はないかもしれない・・・)

公式ではISRについて

サイト全体を再構築する必要なく、ページごとに静的生成を使用できます。

と記載があります。詳しく知りたい方はこちらのドキュメントをご一読ください。
https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration


レンダリング方法をページごとに選択できる

ページごとにレンダリング方法を設定できるのは、Next.jsの大きなメリットと言えます。
例えば動的である必要のないページはSSGにしておけば、レンダリング速度を大幅に軽減できますね!
※今回紹介していないレンダリング方法もあります。


ルーティングが簡単

例えばReactなどではreact-routerなどを追加してルーティングの設定をする必要がありますが、
Next.jsではその必要がありません。ルーティング機能をデフォルトで装備しています!
pagesというフォルダの配下にファイルを置くだけで自動的にルーティング設定ができるという優れモノ。

例えば、/pages/news.tsxというファイルを作るだけで /news でアクセスできます。


画像をWebPにしてくれる

Next.jsは、おなじみのimgタグの代わりにnext/imageを使用することで画像を最適化してくれます。
次世代フォーマットWebP(ウェッピー)に自動で変換してくれるので、画像の表示速度がはるかにUP!
jpegやpngからわざわざ変換する必要がないので、とっても便利ですね。名前もとっても可愛いですね。

WebP: Googleが開発した画像形式。画像の圧縮率が高く軽量化できるため表示速度を大幅に短縮できる。2020年にSafariに対応したことにより普及が加速。


まとめ

まだまだたくさんの魅力を持つNext.jsですが、ちょっと疲れたあまり詰め込みすぎると頭に入らないのでここら辺にしておきましょう。
とはいえここに書いたメリットだけでも、Reactを使うならNextにしよう!という気持ちになりますね。
業務ではNext.jsとTypeScriptを使用しているので、これからもその辺りアウトプットして自分自身の知識の定着に役立てていければと思っております。

最後まで読んでいただきありがとうございました!
ツッコミどころがあればコメント等でご指摘いただけると幸いですmm

★良かったらTwitterのフォローお願いしまーすϵ( 'Θ' )϶

Discussion