Skip to content

Blog

Next.js認証の深堀り:JWTという『透明な証明書』をどう扱うか?

Next.js(App Router)での認証実装。ライブラリが優秀すぎて「なぜか動く」状態になりがちですが、一歩踏み込んで JWT(JSON Web Token ジョット) の仕組みを理解すると、デバッグの質が劇的に変わります。

今回は、Auth.js(NextAuth)を例に、JWTの正体と現場で使えるTipsをまとめました。

Playwright × NextAuth v5:ログインのテストを自動化する方法

Next.js + NextAuth (v5) で構築された、AI画像ストックサイト「free-images」というサービスに E2E テスト(Playwright)を導入しました。

初期段階では「Googleログインしかないから、テストが難しいな」くらいに考えていたのですが、実際は認証基盤のアーキテクチャ変更にまで発展する大工事となりました。

この記事では、直面したエラーとその解決策、そして最終的に完成した「テスト用裏口実装」のコードを共有します。

Vercel × Route53 × Astro で「wwwあり」を正解にする理由

「ドメインは短い方がクールだ」

そう思って、個人開発のサイトではこれまで https://example.com のような「wwwなし(ネイキッドドメイン)」を好んで使っていました。しかし、このブログ(Astro Starlight + Vercel)を構築し、Google AdSenseやSearch Consoleの設定を進める中で、その認識を改めることになりました。

今回は、Vercel環境においてなぜ「wwwあり」が推奨されるのか、そしてAstroの設定でハマりやすい サイトマップの罠について共有します。

認証の基礎知識:Cookie、セッション、JWTなど

Webアプリケーションを開発する上で、避けて通れないのが**「認証 (Authentication)」**です。

特に Next.js + NextAuth (Auth.js) のようなモダンな構成を採用する場合、裏側で何が起きているのかを理解していないと、「ログインできない」「テストが通らない」「意図しないログアウトが起きる」といったトラブルに対処できません。

この記事では、認証周りの重要キーワードを、イメージしやすいように整理しました。