JavaScript 【Next.js】Auth.js（NextAuth）で認証機能を実装する
こんにちは、かつコーチです。ここまでのシリーズでは、App Routerの基本構造やServer Components・Client Componentsの使い分け、外部APIとのデータ連携まで扱ってきました。アプリの骨格ができてくると、次...
React
JavaScript 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...
React 【Next.js】バージョン指定して使いたいとき
こんにちは、かつコーチです。Next.jsをインストールすると最新のものが入るけど、まだ対応できない。または、バージョンを指定して使いたいときがありますね。なかなか情報が少ないので、こちらに記しておきます。例えば、バージョン13を使用したい...
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に応じたページ作りとフォルダ整理の方法を解説しました。ページの構造ができても、データ取得中の「白い画面」やエラー発生時の「真っ白なエラーページ」をそのまま放置すると...
JavaScript 【Next.js】ルートグループ・動的ルートの書き方
こんにちは、かつコーチです。前回までで、page.tsx によるファイルベースルーティングと、layout.tsx を使った共通レイアウトの作り方を解説してきました。ここまでは「固定のURL」しか扱ってきませんでしたが、実際のアプリでは /...
JavaScript 【Next.js】layout.tsxで共通レイアウトを作る
こんにちは、かつコーチです。前回はpage.tsxを使ったファイルベースルーティングの基本を解説し、フォルダを増やすだけでページが増えることを確認しました。ページが増えてくると、今度は「どのページにも共通するヘッダーやフッターを、毎回コピペ...
JavaScript 【Next.js】ファイルベースルーティングの基本：page.tsxの役割
こんにちは、かつコーチです。前回はappディレクトリの中身を見ながら、page.tsxとlayout.tsxがどんな役割を持つファイルなのかを軽く紹介しました。今回はその中でもpage.tsxにフォーカスして、Next.jsの大きな特徴であ...
JavaScript 【Next.js】プロジェクトのフォルダ構成を理解する（appディレクトリの中身）
こんにちは、かつコーチです。前回はcreate-next-appを使って、実際にNext.jsのプロジェクトを作成しました。作成されたフォルダを開くと、見慣れないファイルやディレクトリがたくさん並んでいて、戸惑った人も多いのではないでしょう...
JavaScript 【Next.js】create-next-appで環境構築する手順
こんにちは、かつコーチです。前回はNext.jsとは何か、Reactとの関係を解説しました。Next.jsが「Reactにルーティングやサーバーサイドレンダリングを足したフレームワーク」だとわかったところで、今回は実際に手を動かして、自分の...
JavaScript 【Next.js】Next.jsとは？Reactに「ルーティング・SSR」を足すフレームワーク
こんにちは、かつコーチです。これまでJavaScriptの基礎からTypeScript、React、Vue.jsまで、たくさんの記事を書いてきました。いよいよ今回から新しいシリーズとして、Next.jsというフレームワークを解説していきます...
JavaScript 【React】カスタムフックを自作してロジックを再利用する
こんにちは、かつコーチです。前回は「useCallbackで関数の再生成を防ぐ」を解説しました。useState や useEffect、useRef と一通り基本のフックを見てきたので、今回はそれらを組み合わせてカスタムフックを自作する方...
JavaScript 【React】useCallbackで関数の再生成を防ぐ
こんにちは、かつコーチです。前回は「useMemoで無駄な再計算を防ぐ」を解説しました。今回はそのペアとも言える useCallback を扱います。「関数もメモ化できるの？」と思う人も多いと思いますが、useMemo の考え方が分かってい...
JavaScript 【React】useMemoで無駄な再計算を防ぐ
こんにちは、かつコーチです。前回は「useContextでProps drillingを解消する」を解説しました。今回は、パフォーマンスチューニングの入り口として避けて通れない useMemo を扱います。「なぜ画面がカクつくのか」「どこを...