点数 86点 感想 第1章のJavaScript、TypeScript、React、Next.jsの解説がとてもわかりやすかった。 第2章と第4章のハンズオンはそれぞれNotion APIとUnsplash APIを利用 […]

Next.js 環境構築 npx create-next-app –ts next-sample SSGによるページの実装 データ取得なしの場合（単なる静的ぺージ） getStaticProps内でデータ取得する場合 […]

TypeScript Enum 文字列ベースのEnum型を定義することも可能。 オプショナルチェーン演算子と非nullアサーション演算子 ?.（オプショナルチェーン演算子） nullish(null または undefi […]

TypeScript 関数の型 以下のような記述は一見わかりづらいが、「引数が文字列で戻り値が文字列配列の関数」を引数に取る関数である。 上記関数は以下のように呼び出す。 型アサーション Javaでいうダウンキャスト。 […]

点数 80点 感想 前半はTypeScript、React、Next.jsについてわかりやすく説明されていてとても良かった。しかし、後半のサンプルアプリの開発はわかりづらくコード量も多いため、あまり参考にならなかった。 […]

概要 [id].tsxのようなダイナミックルーティングを行うページでgetStaticProps関数を使用する場合は、getStaticPaths関数を使用して「生成されるパスのリスト」を定義する必要がある。 getSt […]

概要 Next.jsのページコンポーネントにて、「SSG（Static Site Generator）させたい=ビルド時に実行したい」処理はgetStaticProps関数の中に記述する。 例 上記の例の場合、 […]

概要 Next.jsにはSSG、SSR、ISR、CSRの4種類のレンダリング手法がある。 SSGもSSRも初回のレンダリング（ブラウザに返されるHTML）であり、初期描画後はCSRにより動的にHTMLが更新される。 （通 […]

点数 77点 感想 システム開発というよりはCSSなどデザイン系の内容が多かった。 この書籍の発売日は2022/7/30とそこまで古くはないのにも関わらず、Next.jsのバージョンが上がったことで本文とは異なる仕様にな […]

概要 APIキーなどをコードに埋め込むのはセキュリティ上好ましくないため、環境変数として用意するのが一般的である。 Next.jsで使うAPIキーを管理するだけであれば、.env.localを用意すれば良い。 値の参照は […]