## はじめに
Next.jsがどのようなフレームワークであるのかを学び直したので、まとめていきます。

## Next.jsとは
Next.jsはReactのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などの機能を提供する、JavaScriptベースのフレームワークです。Next.jsは、Reactをベースにしており、Reactアプリケーションをより高度に開発するためのツールや機能を提供します。
Reactにプリレンダリングはありませんでした。

## なぜNext.jsが誕生したのか
Reactのみでは大規模なWebサイトの開発に向いていない。読み込み速度が遅くなってしまう。

## ReactとNext.jsの違い
Reactは初回読み込み時に真っ白な状態から画面がスタートし、そこから必要なJavaScriptやHTMLの読み込みが始まるため、なので、一気にHTMLやJavaScriptを読み込むため、動作が遅くなってしまう。
一方、Next.jsは最初の読み込み時にHTMLを読み込んでおき(プリレンダリング)必要なところだけ(ページ)をJavaScriptだけを読み込むので、動作が高速になる。最初に画面を生成しているのでSEO対策にもなる。Reactでは全てのJavaScriptを読み込むので、遅くなってしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0172aa71-7ff9-8cca-fd0b-010fad4eb3d5.png)


## ReactとNext.jsのレンダリング手法の違い
Reactでは、クライアント側でHTMLを生成するCSR(SPA)を使用している。
Next.jsではサーバ側でHTMLを作成する。
⇨PCのスペックに頼らない画面レンダリングができる。

## プリレンダリングとは
プリレンダリングとは、簡単に言うと、先にHTMLのみを生成して画面に表示することでユーザー体験の向上になる。というものです。
Next.jsではSSR(Sever Side Rendering)とSSG(Static Site Generator)が使われます。


## SSGについて
SSGは、ビルド時にHTMLを生成しておき、ユーザーからのリクエストが来たら、すぐにレスポンスを返せるようにしておく手法です。

**〇メリット**
リクエストのたびにHTMLを再生成しないので、レスポンスが高速で行われることで、ユーザー体験が非常に高くなります。

**〇デメリット**
ビルドしてしまうと、情報の更新ができないので、頻繁に情報の更新される可能性のあるサービス(SNSなど)には向いていない。

**〇向いているサービス例**
ブログ、ドキュメント、ECサイトの商品ページなど

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/2a09822d-186a-f1d4-cafe-7280f8d9a78e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/891b9d49-ce73-6d7d-d426-80ca80341bf2.png)


## SSRについて
SSRは、ユーザーからリクエストが来るたびに、サーバー側でHTMLを再生して、レスポンスを返す手法です。

**〇メリット**
サーバー側でHTMLを再生成するため、情報の更新が頻繁に行われる可能性のあるサービス(SNSなど)に向いている。

**〇デメリット**
リクエストのたびに画面を再生成するため、レスポンスの時間がSSRに比べて時間がかかってしまう。

**〇向いているサービス例**
SNS、ユーザープロフィールなど

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/1c2b5da2-6e34-b685-41bb-99d1fcf5568a.png)

## Next.jsを使うメリット
以上の内容を踏まえて、Next.jsを使うことのメリットをまとめます。
・クライアントのPCに依存せずにレンダリングできる。
・直感的なルーティング設計ができる。(ここでは話していませんが...)
・ページ読み込み速度が向上する。
・SEO対策になる。


## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)

[cv:issue_marketplace_engineer]

## はじめに
Next.jsがどのようなフレームワークであるのかを学び直したので、まとめていきます。

## Next.jsとは
Next.jsはReactのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などの機能を提供する、JavaScriptベースのフレームワークです。Next.jsは、Reactをベースにしており、Reactアプリケーションをより高度に開発するためのツールや機能を提供します。
Reactにプリレンダリングはありませんでした。

## なぜNext.jsが誕生したのか
Reactのみでは大規模なWebサイトの開発に向いていない。読み込み速度が遅くなってしまう。

## ReactとNext.jsの違い
Reactは初回読み込み時に真っ白な状態から画面がスタートし、そこから必要なJavaScriptやHTMLの読み込みが始まるため、なので、一気にHTMLやJavaScriptを読み込むため、動作が遅くなってしまう。
一方、Next.jsは最初の読み込み時にHTMLを読み込んでおき(プリレンダリング)必要なところだけ(ページ)をJavaScriptだけを読み込むので、動作が高速になる。最初に画面を生成しているのでSEO対策にもなる。Reactでは全てのJavaScriptを読み込むので、遅くなってしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0172aa71-7ff9-8cca-fd0b-010fad4eb3d5.png)


## ReactとNext.jsのレンダリング手法の違い
Reactでは、クライアント側でHTMLを生成するCSR(SPA)を使用している。
Next.jsではサーバ側でHTMLを作成する。
⇨PCのスペックに頼らない画面レンダリングができる。

## プリレンダリングとは
プリレンダリングとは、簡単に言うと、先にHTMLのみを生成して画面に表示することでユーザー体験の向上になる。というものです。
Next.jsではSSR(Sever Side Rendering)とSSG(Static Site Generator)が使われます。


## SSGについて
SSGは、ビルド時にHTMLを生成しておき、ユーザーからのリクエストが来たら、すぐにレスポンスを返せるようにしておく手法です。

**〇メリット**
リクエストのたびにHTMLを再生成しないので、レスポンスが高速で行われることで、ユーザー体験が非常に高くなります。

**〇デメリット**
ビルドしてしまうと、情報の更新ができないので、頻繁に情報の更新される可能性のあるサービス(SNSなど)には向いていない。

**〇向いているサービス例**
ブログ、ドキュメント、ECサイトの商品ページなど

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/2a09822d-186a-f1d4-cafe-7280f8d9a78e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/891b9d49-ce73-6d7d-d426-80ca80341bf2.png)


## SSRについて
SSRは、ユーザーからリクエストが来るたびに、サーバー側でHTMLを再生して、レスポンスを返す手法です。

**〇メリット**
サーバー側でHTMLを再生成するため、情報の更新が頻繁に行われる可能性のあるサービス(SNSなど)に向いている。

**〇デメリット**
リクエストのたびに画面を再生成するため、レスポンスの時間がSSRに比べて時間がかかってしまう。

**〇向いているサービス例**
SNS、ユーザープロフィールなど

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/1c2b5da2-6e34-b685-41bb-99d1fcf5568a.png)

## Next.jsを使うメリット
以上の内容を踏まえて、Next.jsを使うことのメリットをまとめます。
・クライアントのPCに依存せずにレンダリングできる。
・直感的なルーティング設計ができる。(ここでは話していませんが...)
・ページ読み込み速度が向上する。
・SEO対策になる。


## 最後に
他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

Next.jsとは

続きを読むには単価診断を受けてください（30秒）