🦾

Next.js(1) : Next.jsとは / Next.jsを始める/ CSR SSG SSRについて

2022/03/13に公開

Next.js

Next.jsとは

Reactのフレームワーク
https://nextjs.org/

特徴

Pre-rendering

SSRなどを簡単に実現することで初回のHTMLにレンダリングしたページが見えることで、SEO的にいい。

File-based Routing

ファイル、ディレクトリ構造によってページを定義し、routingできる

ReactのCSR vs Next.jsのPre-rendering

create react app (CSR)

ソースコードを見ると<div id=’root’>しかない
ユーザが見るUIを、ユーザのブラウザが作る作業をやる
javascriptコードを要請し、それをもらってからUIが作れる
遅いネットワークの場合、HTMLも取得できず白い画面が続く場合ばある
javascriptがdisableになったらHTMLを見ることもできない
SEO的に良くない

Next.js (pre-rendering: SSG, SSR)

サイトのソースコードを見ると、実際のHTMLが入っている
ユーザーが接続したときにすでに生成されたHTMLページを見れる
SEO的にいい

Next.jsが提供するpre-renderingには二つ(SSG, SSR)の種類があります。

SSG (Static Site Generator)

build時に必要なdataを取得し、HTMLを出力しておく
商品リスト、ヘルプページなど変更が少ない場合

SSR (Server-Side-Rendering)

ユーザーのrequestがあるたびにHTMLを作って生成する
いつも最新状態を反映する必要がある場合
商品の詳細ページなど

環境作成

前提

node、npm、npxが入っていること
Next.jsは12.1基準です。

// 最新バージョンでアプリを作成
$ npx create-next-app@latest
Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y) y

// アプリの名前を入力
✔ What is your project named? … nextjs-study

// (省略)

Success! Created nextjs-study at /Users/redpanda/Projects/nextjs-study
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd nextjs-study
  npm run dev

アプリを実行してみる

// VScodeで開く(vscodeを利用しない場合は、directory配下に移動します。)
$ code nextjs-study/

// アプリを実行
$ npm run dev

> nextjs-study@0.1.0 dev
> next dev

warn  - Port 3000 is in use, trying 3001 instead.
ready - started server on 0.0.0.0:3001, url: http://localhost:3001
event - compiled client and server successfully in 1294 ms (124 modules)
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

wait  - compiling / (client and server)...
event - compiled client and server successfully in 264 ms (140 modules)

デフォルトのポートは3000ですが、私は別のプロジェクトで使っていたため、自動で3001にしてくれました。URLに自分のポート番号を設定して開くようにしましょう。
ポートの変更がなく普通に起動したのであれば、以下のURLでNext.jsアプリが見えます。

http://localhost:3000/