カテゴリー：Next.js
-
SSGとは？ 事前にサーバーサイドでデータを取得するのでブラウザのJavaScriptが無効になっていてもデータを読み込むことができます。 page内で以下のように実装 [crayon-63e14da5530c2641452825/]…
-
Next.jsではクライアントサイドとサーバーサイドの処理を扱うことができるのでApolloClientを使う場合は処理の切り分けが重要になってきます。 サーバーサイドで実行される箇所（SSG、ISR：getStaticProps、get…
-
本記事はcypress10.1.0にて検証しています。(9以前とは結構書き方が変わっていますので注意しましょう。） インストール [crayon-63e14da554a53172915644/] package.jsonに起動コマンド…
-
環境変数設定ファイル .env 汎用的な環境変数ファイルです。プロジェクトのルートディレクトリに配置します。 変数の定義方法 React [crayon-63e14da55504d242481262/] Next.js [cr…
-
【Next.js】「page」のテスト
02.12
インストール Next.jsのpageのコンポーネントは普通のReactに比べて少し特殊なので、テストするには「next-page-tester」というパッケージをインストールしておきます。 [crayon-63e14da55564b6…
-
【Next.js】「エラーハンドリング」
01.20
Error Boundary コンポーネント内で発生する特定のエラー（実行時エラーなど）しかcatchしてくれない。以下のエラーは捕捉しないので、現状はあまり使い道はないかもしれない。 イベントハンドラ内で発生したエラー …
-
_app.tsx 全ページで必要な処理を書く。 ページ間共通レイアウト 共通のstate(Reduxなども） グローバルCSS（全ページ共通の）を適用する。 サーバーサイドレンダリングされるが、ライフサイクルメ…
-
【Next.js】各種コマンドについて
01.16
next dev 開発時にはこれを実行します。リクエストの都度サーバーサイドでページの生成(SSG)、クライアントサイドでレンダリング(CSR)が実行されるのでページの取得はページ遷移は遅くなります。 具体的な挙動 「ge…
-
images domains 外部ドメインから画像を取得したい場合に使う設定です。外部ドメイン名を配列形式で指定します。…
-
【Next.js】「APIルート」機能について
01.16
Next.jsで簡易的なAPIエンドポイントを作れる機能です。 ファイルの配置場所 以下のようにAPIの名前をファイル名としてつけて配置します。 [crayon-63e14da556060963068604/] 実装 [crayo…