バカでもできる NextAuth.js × Next.js 14 App Router での Google ログイン 実装ガイド
今回は誰でも簡単にできるNextAuth.js × Next.js 14 App Router を使用した Google ログインの実装方法をまとめました。
✅ この記事でできること
- Google アカウントでログインできる
- 認証状態を簡単に判定できる
- Next.js 14(App Router)に完全対応
✅ 対象
- Next.js 14(App Router構成)
- TypeScript使ってる人でもOK
- とにかくシンプルに「Googleログインだけ」やりたい人
ざっくり全体像
1️⃣ GoogleのOAuthクライアントを取得
2️⃣ NextAuth.jsをインストール
3️⃣ NextAuthのAPIルートを作る
4️⃣ SessionProviderの置き場所(これが最大の落とし穴)
5️⃣ ログインページでボタンを置く
1️⃣ GoogleのOAuthクライアントを取得
1.Google Cloud Console へアクセス
2.プロジェクトを新規作成(例: project)
3.「APIとサービス」→「認証情報」
4.「認証情報を作成」 → OAuthクライアントID
・アプリケーションの種類: ウェブアプリケーション
・承認済みのリダイレクトURI:
http://localhost:3000/api/auth/callback/google
5.作成したら
・クライアントID
・クライアントシークレット
をメモ
2️⃣ 環境変数を設定
プロジェクトのルートに .env.local を作成
GOOGLE_CLIENT_ID=メモしたやつ
GOOGLE_CLIENT_SECRET=メモしたやつ
NEXTAUTH_URL=http://localhost:3000
3️⃣ NextAuth.js をインストール
npm install next-auth
4️⃣ NextAuthのAPIルートを作成
src/app/api/auth/[...nextauth]/route.ts
を作ります。
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
session: {
strategy: "jwt",
},
pages: {
signIn: "/login", // ログインページ
},
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
5️⃣ SessionProvider の配置(Next.js 14の最大の罠)
Next.js 14(App Router)では
layout.tsx はサーバーコンポーネントなので
SessionProvider を直接書くとエラーになります。
なので
✅ src/app/providers.tsx
を作って
"use client";
import { SessionProvider } from "next-auth/react";
export function Providers({ children }: { children: React.ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
}
✅ その上でlayout.tsx
に
import { Providers } from "./providers";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}
と書けばOK。
これで
「React Context is unavailable in Server Components」 エラーを回避できます。
6️⃣ ログインページを作る
src/app/login/page.tsx
"use client";
import { signIn, useSession } from "next-auth/react";
export default function LoginPage() {
const { data: session } = useSession();
if (session) {
return (
<main>
<h1>ようこそ {session.user?.name} さん</h1>
</main>
);
}
return (
<main>
<h1>CalPlog ログイン</h1>
<button
onClick={() => signIn("google")}
className="bg-blue-500 text-white rounded p-2"
>
Googleでログイン
</button>
</main>
);
}
7️⃣ 動作確認
npm run dev
で http://localhost:3000/login
にアクセス
→ これでログインできるようになるはず!
(できなかったらほんとすんません)
🟦 まとめ
- Google Cloud で OAuth クライアントを取る
- NextAuth.js の route.ts でプロバイダ設定
- SessionProvider はクライアントに分離
- あとは signIn("google") で呼ぶだけ
以上です!
Discussion