Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

Nextjsとは?|Reactのフレームワークを初心者向けに徹底解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20211114052320p:plain

おはようございます。Shotaです。

🤨「Nextjsって何?具体的にどんなことができる?」

🤨「Nextjsに似た名前であるNuxtjsがあるけど、具体的にどう違うの?」

本記事にたどり着いた人の中には、このように考えている方も少なくないでしょう。そこで、今回の記事ではNextjsについて詳細に解説していきます。

今回の記事を参考に、Nextjsについて興味を持ったり理解を深めたりしていただけると幸いです。それでは早速、本題に入りましょう。



Nextjsとは

f:id:ShotaNukumizu_1000:20211114094324p:plain

Nextjsは、JavaScriptライブラリであるReact開発におけるフレームワークです。Reactではブラウザ側でレンダリング(htmlの解釈)を行うSPA(Single Page Application)の開発が特徴ですが、Nextjsを使うことでサーバ側でのレンダリングを行うことができます。


Nextjsの特徴

本章では、Nextjsの特徴を3つ紹介していきます。


SSR(Server Side Rendering)

SPAではブラウザへ空のHTMLを返し、実際のページのコンテンツはJavaScriptを用いて生成します。一度ページを読み込んでしまえば、ページ遷移のためにサーバへのリクエストが発生しないので高速で動作できます。一方で、JavaScriptのサイズが大きくなればなるほど表示するときの読み込みに時間がかかります。

このような問題を解決するために、SSRではリクエストごとにサーバ側でレンダリングを行ったものをクライアントへ返すという方式をとっています。


SSG(Static Site Generation)

SSRはリクエストのたびにサーガ側でレンダリングを行うので、レスポンスに時間がかかるデメリットがあります。SSGはクライアントからのリクエストではなく、ビルド時に一括してレンダリングを行います。すでに静的なhtmlを生成しているので、ロードは非常に高速です。


ISR(Incremental Static Regeneration)

最後にISRが挙げられます。ISRではブラウザからのリクエストに対して事前にレンダリングされたhtmlを返しつつ、バックグラウンドでリクエストに対するレンダリングを行います。そのため、リクエストの際には新しくレンダリングされたhtmlを返せます。


Nextjsが使われる場面

ReactはSPAの開発を行う上で強力なJavaScriptライブラリです。Reactを使うことでサーバ側へリクエストを送ることなくページを遷移できます。ところが、ページ数が増えてくると初期ローディングにかかる時間が増えてしまいます。Nextjsを導入することで、ページごとにCSRSSRなどを使い分けられます。大規模なWebサイトをReactを用いて開発する場合はNextjsを活用するべきでしょう。


Nuxtjsとの違い

f:id:ShotaNukumizu_1000:20211114053051p:plain

NextjsとNuxtjsは名前が非常に類似しているので、よく混同させられます。両者の違いは一体何でしょうか?

一言で言えば、NextjsはReactベースである一方、NuxtjsはVueベースということです。要は、基盤となっているJavaScriptフレームワークの違いですね。(両者ともJavaScriptが使われていますが)


まとめ

今回はNextjsを初心者向けにわかりやすく解説しました。今回の記事はこれで終了です。

【参考サイト】

ssaits.jp

reffect.co.jp

freelance-jak.com