カテゴリー：Next.js
-
本記事はcypress10.1.0にて検証しています。(9以前とは結構書き方が変わっていますので注意しましょう。） インストール [crayon-633f0736c4a4a477482484/] package.jsonに起動コマンド…
-
環境変数設定ファイル .env 汎用的な環境変数ファイルです。プロジェクトのルートディレクトリに配置します。 変数の定義方法 React [crayon-633f0736c53d1264536021/] Next.js [cr…
-
【Next.js】「page」のテスト
02.12
インストール Next.jsのpageのコンポーネントは普通のReactに比べて少し特殊なので、テストするには「next-page-tester」というパッケージをインストールしておきます。 [crayon-633f0736c57ac6…
-
【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-633f0736c5e98737143502/] 実装 [crayo…
-
【Next.js】ディレクトリ構成
01.15
ディレクトリ名 説明 .next プロジェクト作成時にはなく実行すると生成されます。この中にプロジェクトから生成されたWebアプリのファイル類が保存されます。 pages ここで指定した…
-
【Next.js】「Vercel」の概要
01.15
Vercelとは？ Next.jsを開発しているVercel Inc.という会社が提供しているホスティングサービスです。作成したWebアプリを数十秒でデプロイしてグローバル展開できます。 料金プラン いくつかあるが、個人で非営利で使用…