JavaScript 【Next.js】Next.jsでシンプルなブログアプリを作ってみる（Server Actions活用）
こんにちは、かつコーチです。前回はディレクトリ構成のベストプラクティスを解説しました。今回はいよいよNext.jsシリーズの最終回です。これまで学んできたApp Router、Server Components、Client Compone...
Next.js
JavaScript JavaScript 【Next.js】Next.jsプロジェクトのディレクトリ構成のベストプラクティス
こんにちは、かつコーチです。前回は「Module not found: next/router」というエラーへの対処法を紹介しました。つまずき系のTipsが続いたので、今回は少し視点を変えて、設計の話をします。Next.jsのApp Rou...
JavaScript 【Next.js】「Module not found: next/router」の解決法（Pages Router完全削除後の落とし穴）
こんにちは、かつコーチです。前回はlayout.tsxの再評価にまつわるつまずきを紹介しましたが、今回は少し毛色の違うエラーを扱います。App Routerだけを使っているはずなのに、突然Module not found: Can't re...
JavaScript 【Next.js】layout.tsxが再評価されず古い情報が残り続けた話
こんにちは、かつコーチです。前回はNext.jsでよく出る定番エラーをまとめましたが、今回はもう少し踏み込んだ、経験しないと気づきにくいつまずき事例を紹介します。テーマは「layout.tsxで取得したログイン状態が、ログアウトした後も画面...
JavaScript 【Next.js】Next.jsでよく出るエラーと解決法まとめ
こんにちは、かつコーチです。これまでNext.jsシリーズでは、App Routerの基本からルーティング、Server/Client Components、データ連携、認証、テスト、デプロイまでを一通り解説してきました。ここからの4本は少...
Prisma 【Prisma】Prismaとは？
こんにちは、かつコーチです。Next.jsを使っていて、Prismaを使う機会が出て来たので、今回はPrismaについて解説します。Prismaは、TypeScriptとJavaScript向けの次世代ORM（Object-Relation...
JavaScript 【Next.js】next/imageで画像を最適化する
こんにちは、かつコーチです。前回はVercelへのデプロイ方法を解説し、アプリを実際に公開できるようになりました。公開したアプリが実際にユーザーに使われ始めると、次に気になってくるのが表示速度です。特に画像は、対策をしないままだとページ全体...
JavaScript 【Next.js】Next.jsアプリをVercelにデプロイする方法
こんにちは、かつコーチです。前回はVitestとPlaywrightを使って、Next.jsアプリにテストを導入する方法を解説しました。認証もテストも整ったので、今回はいよいよアプリを実際に世界へ公開するステップに進みます。使うのはVerc...
JavaScript 【Next.js】Next.jsのテスト入門：Vitest + Playwrightで最低限を押さえる
こんにちは、かつコーチです。前回はmiddleware.tsを使って、ログイン必須ページをまとめて保護する実装をしました。認証まわりのロジックは特に、後から誰かが変更を加えたときに気づかず壊してしまいやすい部分です。今回はそうした事故を防ぐ...
JavaScript 【Next.js】middleware.tsでログイン必須ページを保護する
こんにちは、かつコーチです。前回はAuth.jsを使って、Next.jsアプリにログイン・ログアウト機能を実装しました。ただしAuth.jsのauth()をページごとに呼び出す方式だと、保護したいページが増えるたびにチェック処理を書き足すこ...
JavaScript 【Next.js】Auth.js（NextAuth）で認証機能を実装する
こんにちは、かつコーチです。ここまでのシリーズでは、App Routerの基本構造やServer Components・Client Componentsの使い分け、外部APIとのデータ連携まで扱ってきました。アプリの骨格ができてくると、次...
JavaScript 【Next.js】環境変数の扱い方：NEXTPUBLICの付け忘れでハマった話
こんにちは、かつコーチです。前回は、revalidatePathを呼んでも画面が更新されなかった原因と、router.refresh()やrevalidateTagによる対処法を解説しました。N11〜N14でServer/Client Co...
JavaScript 【Next.js】revalidatePathを呼んだのに画面が更新されなかった話と対処法
こんにちは、かつコーチです。前回はRoute Handlersを使ったAPIエンドポイントの作り方と、Server Actionsとの使い分けを解説しました。Server Actionsでデータを更新した後にキャッシュを再検証するreval...
JavaScript 【Next.js】Route Handlers（API Routes）でAPIエンドポイントを作る
こんにちは、かつコーチです。前回はServer Componentでのデータフェッチの基本を解説しました。Server Component内で完結するデータ取得だけでなく、外部サービスから叩かれるAPIエンドポイント自体をNext.jsで作...
JavaScript 【Next.js】Server Componentでのデータフェッチの基本
こんにちは、かつコーチです。前回は、Client ComponentがServer Componentを誤ってimportし、バンドルサイズが膨らんでしまった失敗談を紹介しました。正しくComposition Patternで書き分けるには...
JavaScript 【Next.js】Client Componentの中にServer Componentを混ぜてバンドルが膨らんだ話
こんにちは、かつコーチです。前回まででNext.jsの基本ルーティングとServer Actionsを使ったデータ更新まで解説してきました。ここからはN11〜N15の5本で、Server ComponentsとClient Componen...
JavaScript 【Next.js】Server Actionsの基本：フォーム送信をサーバー側で処理する
こんにちは、かつコーチです。前回は "use client" をいつ・どこに書くべきか、判断基準を解説しました。Server ComponentsとClient Componentsの使い分けが分かってくると、次に気になるのが「フォームを送...
JavaScript 【Next.js】’use client’はいつ・どこに書く？使い分けの判断基準
こんにちは、かつコーチです。前回はServer Componentsとは何か、これまでのReactとの一番の違いを解説しました。「インタラクティブな部分は "use client" を使ってClient Componentに切り出す」という...
JavaScript 【Next.js】Server Componentsとは？Reactとの一番の違い
こんにちは、かつコーチです。前回は loading.tsx・error.tsx・not-found.tsx を使って、状態ごとのUIを整える方法を解説しました。ここまでで一通りルーティング周りは押さえられましたが、実はNext.jsのApp...
JavaScript 【Next.js】loading.tsx・error.tsx・not-found.tsxでUXを整える
こんにちは、かつコーチです。前回は動的ルートとルートグループを使って、URLに応じたページ作りとフォルダ整理の方法を解説しました。ページの構造ができても、データ取得中の「白い画面」やエラー発生時の「真っ白なエラーページ」をそのまま放置すると...