Next.jsとは?メリットやSSG、特徴について解説

今回は、Next.jsがどのような言語なのかについての内容になります!

Next.jsの概要やメリットを解説していきますので、分からない方はこの記事を読んで学んでみませんか?

最後まで読んで頂けると幸いです!

では、Next.jsについて解説していきます!

Next.jsとは?

Next.jsとは、ZEIT社が開発した JavaScriptのフレームワークのことを指しています。

フレームワークとは、アプリケーション開発、システム開発において必要なものが入っている枠組みのことを指しています。

Next.jsでは React でサーバーサイドレンダリング(SSR)を可能にしました!

Reactとは、Facebookが公開しているUI(構成部分)の作成に力を入れているライブラリのことを指しています。

Next.jsについて理解する事ができましたが、Next.js にはどのようなメリットがあるのでしょうか?

次の内容では、Next.jsのメリットについて解説していきます!

Next.jsのメリット

下記では、Next.jsのメリットについて解説していきます!

サーバーサイドレンダリング(SSR)

Reactでページを構成するとクライアント側でレンダリングを行います。

クライアント側でレンダリングをした場合、HTMLはユーザーのアクセス時に生成されます!

これにより、リクエストに対して毎回サーバーとのやり取りを介するので処理に時間がかかりますので、クライアント側でのレンダリングはSEOが非常に弱いです。

一方、サーバーサイドによるレンダリングの場合では、サーバー側が更新後のページをクライアント側にレスポンスとして返します。

なので、リクエスト毎に差分のページのみ生成するため、表示速度が速くなります!

そして、ブラウザの初回読み込みは必要な分だけ行いますので速くなります。

そのため、サーバーサイド側のレンダリングはSEOが強くなります!

SSG対応

SSGは、Next.jsのドキュメントも推奨している技術になります。

SSGとは、「Static Site Generator」の略でアプリをビルドする際に、ページの表示に必要なデータを取得し、静的なHTMLファイルとして生成します!

その結果、表示速度は SSR(サーバーサイドレンダリング)よりも更に高いパフォーマンスを発揮します。

SSG対応しているページは、pre-renderingに対応しているため、SEO的にも非常に強くなります!

まとめ

いかがでしたか?

今回の内容は Next.jsがどのような言語なのかについて解説させて頂きました。

Next.jsは注目度が高まっている言語ですので是非学習してみて下さい!