2023-10

こんにちは、かつコーチです。前回はVercelへのデプロイ方法を解説し、アプリを実際に公開できるようになりました。公開したアプリが実際にユーザーに使われ始めると、次に気になってくるのが表示速度です。特に画像は、対策をしないままだとページ全体...

こんにちは、かつコーチです。前回はVitestとPlaywrightを使って、Next.jsアプリにテストを導入する方法を解説しました。認証もテストも整ったので、今回はいよいよアプリを実際に世界へ公開するステップに進みます。使うのはVerc...

こんにちは、かつコーチです。前回はmiddleware.tsを使って、ログイン必須ページをまとめて保護する実装をしました。認証まわりのロジックは特に、後から誰かが変更を加えたときに気づかず壊してしまいやすい部分です。今回はそうした事故を防ぐ...

こんにちは、かつコーチです。前回はAuth.jsを使って、Next.jsアプリにログイン・ログアウト機能を実装しました。ただしAuth.jsのauth()をページごとに呼び出す方式だと、保護したいページが増えるたびにチェック処理を書き足すこ...

こんにちは、かつコーチです。ここまでのシリーズでは、App Routerの基本構造やServer Components・Client Componentsの使い分け、外部APIとのデータ連携まで扱ってきました。アプリの骨格ができてくると、次...

こんにちは、かつコーチです。前回は、revalidatePathを呼んでも画面が更新されなかった原因と、router.refresh()やrevalidateTagによる対処法を解説しました。N11〜N14でServer/Client Co...

こんにちは、かつコーチです。前回はRoute Handlersを使ったAPIエンドポイントの作り方と、Server Actionsとの使い分けを解説しました。Server Actionsでデータを更新した後にキャッシュを再検証するreval...

こんにちは、かつコーチです。前回はServer Componentでのデータフェッチの基本を解説しました。Server Component内で完結するデータ取得だけでなく、外部サービスから叩かれるAPIエンドポイント自体をNext.jsで作...

こんにちは、かつコーチです。前回は、Client ComponentがServer Componentを誤ってimportし、バンドルサイズが膨らんでしまった失敗談を紹介しました。正しくComposition Patternで書き分けるには...

こんにちは、かつコーチです。前回まででNext.jsの基本ルーティングとServer Actionsを使ったデータ更新まで解説してきました。ここからはN11〜N15の5本で、Server ComponentsとClient Componen...

こんにちは、かつコーチです。前回は "use client" をいつ・どこに書くべきか、判断基準を解説しました。Server ComponentsとClient Componentsの使い分けが分かってくると、次に気になるのが「フォームを送...

こんにちは、かつコーチです。前回はServer Componentsとは何か、これまでのReactとの一番の違いを解説しました。「インタラクティブな部分は "use client" を使ってClient Componentに切り出す」という...

こんにちは、かつコーチです。前回は loading.tsx・error.tsx・not-found.tsx を使って、状態ごとのUIを整える方法を解説しました。ここまでで一通りルーティング周りは押さえられましたが、実はNext.jsのApp...

こんにちは、かつコーチです。前回は動的ルートとルートグループを使って、URLに応じたページ作りとフォルダ整理の方法を解説しました。ページの構造ができても、データ取得中の「白い画面」やエラー発生時の「真っ白なエラーページ」をそのまま放置すると...