カテゴリー：Next.js
-
SSG(Static Site Generation)とは？ 事前にサーバーサイドでデータを取得するのでブラウザのJavaScriptが無効になっていてもデータを読み込むことができます。 初回のビルドを前もってやっておくのでページの…
-
Next.jsではクライアントサイドとサーバーサイドの処理を扱うことができるのでApolloClientを使う場合は処理の切り分けが重要になってきます。 サーバーサイドで実行される箇所（SSG、ISR：getStaticProps、get…
-
ReactやNext.js(バージョン9.4から使えるようです。)には標準で環境変数機能が備わっています。 環境変数設定ファイル 変数の定義方法 環境変数の反映にはアプリの再起動が必要になります。 React [crayon-64…
-
01.20
【Next.js】「エラーハンドリング」
Error Boundary コンポーネント内で発生する特定のエラー（実行時エラーなど）しかcatchしてくれない。以下のエラーは捕捉しないので、現状はあまり使い道はないかもしれない。 イベントハンドラ内で発生したエラー …
-
ディレクトリ名 説明 .next プロジェクト作成時にはなく実行すると生成されます。この中にプロジェクトから生成されたWebアプリのファイル類が保存されます。 pages ここで指定した…
-
01.16
【Next.js】各種コマンドについて
next dev 開発時にはこれを実行します。リクエストの都度サーバーサイドでページの生成(SSG)、クライアントサイドでレンダリング(CSR)が実行されるのでページの取得はページ遷移は遅くなります。 具体的な挙動 「ge…
-
使い分け SEO リアルタイム更新 サイト再生成 初期ロード ページ遷移 サーバー負荷 用途 CSR × ○ × 遅い 早い SSR ○ ○ ○ 遅い…
-
useSWRとは？ 「クライアントサイドレンダリング」の技術です。なので、もしブラウザでJavaScriptを無効化していたら動かなくなります。（なお、SSGやSSRやISRなどはサーバーサイドで動作するのでブラウザのJavaScript…
-
基本コンポーネント Head [crayon-6482789b207ff610915412/] 以下のように使います。タイトルが表示されます。 [crayon-6482789b20809809917906/] Link ページ遷…
-
getStaticPropsとは？ Next.js内（フロントエンド）で定義した関数が必ずバックエンドで実行される。 pages内でのみ使用可能 「npm run dev」の場合はリクエスト毎に実行される。 「n…
