[react]nextjs関連のメモ

nextjs関連で学んだことをメモ

現在nextjsの勉強をしているので覚えておいた方が良さそうなところや、
仕組みが不明なとこなどをメモがわりに残しておく。

ページのルーティング

nextjsをなんとなく使っていたが、どういうルールでルーティングができてるのかわからなかった。
nextjsのディレクトリは

pages/
  - index.js
  - sample/
    - index.js
    - show.js

このような構成になっているが
pages/index.jsはlocalhost:3000/,
pages/sample/index.jsはlocalhost:3000/sample/,
pages/sample/show.jsはlocalhost:3000/sample/show/
という風にpagesディレクトリに存在するファイルからエクスポートされたコンポーネントがルーティングになるらしい。

sample/index.js

export default function Sample() {
  return <h1>sample</h1>
}

localhost:3000/sample/にアクセスすると確認できた。

プリレンダリングとは

まだ調査中。
(*詳しい方いたら補足して頂けると助かります。)

プリレンダリングの2つの形式

静的生成（Static Generation）

本番にビルドしたタイミングでhtmlを生成しておき、ユーザーのリクエストに応じて生成されたhtmlを再利用して表示する。

サーバサイドレンダリング（SSR）

ユーザーからのリクエスト毎にhtmlが生成される。

ページ毎に設定

nextjsでは
このページは静的生成、このページはサーバサイドレンダリングのように
ページ毎に設定ができる。
基本は静的生成の方がいい。
ただ、SSRの方がいい場合もあるので注意。