Next.js と Auth0 の連携ガイド：アカウント作成・設定からデプロイまで

2026年6月10日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 1. Auth0 アカウント作成とアプリケーション登録
- 1.1 1‑1. Domain・Client ID・Client Secret の取得手順
- 1.2 1‑2. Allowed Callback/Logout URLs の設定ポイント
2 2. Next.js プロジェクトの初期構築と SDK インストール
- 2.1 2‑1. Node.js バージョン・パッケージマネージャの推奨
- 2.2 2‑2. @auth0/nextjs-auth0 のインストールとバージョン確認
3 3. 環境変数とセキュリティベストプラクティス
4 4. Router 別の Auth0Provider 設定例
- 4.1 4‑1. Pages Router（pages/）での設定
- 4.2 4‑2. App Router（src/app/）での設定
5 5. 認証フロー実装と保護されたページ／API の作り方
- 5.1 5‑1. withPageAuthRequired と useUser の使い分け
  - 5.1.1 a. withPageAuthRequired の例（Pages Router）
  - 5.1.2 b. useUser フックの例（クライアント側 UI）
- 5.2 5‑2. getServerSideProps でサーバー側認可を行う例
6 6. デプロイ・運用・デバッグと料金プランの概要
7 7. 次のステップ：公式ドキュメントとサンプルリポジトリの活用
- 7.1 参考情報（脚注）

スポンサードリンク

1. Auth0 アカウント作成とアプリケーション登録

このセクションでは、Auth0 テナントの取得から必要な認証情報（Domain・Client ID・Client Secret）を手に入れるまでの流れを解説します。テナントが無いと認証フロー自体が構築できないため、最初に必ず行う作業です。

1‑1. Domain・Client ID・Client Secret の取得手順

Auth0 ダッシュボードでアプリケーションを作成し、必要なキーを確認します。
ポイント: 取得した Client Secret はサーバー側だけで保持し、決してクライアントに送らないようにしてください。

Applications → Applications を開き、Create Application をクリック。
アプリケーション名を入力し、Regular Web Application（Next.js がサーバーサイドでも動作するため）を選択。
作成完了後の設定画面に以下が表示されます。
Domain（例: my-tenant.auth0.com）
Client ID（公開可能な文字列）
Client Secret（サーバー側でのみ使用）

1‑2. Allowed Callback/Logout URLs の設定ポイント

Auth0 はリダイレクト先をホワイトリスト方式で管理します。ローカル開発と本番デプロイそれぞれに正しい URL を登録してください。

種類	推奨値（例）
Allowed Callback URLs	`http://localhost:3000/api/auth/callback` `https://my-app.vercel.app/api/auth/callback`
Allowed Logout URLs	`http://localhost:3000/` `https://my-app.vercel.app/`

注意: 設定ミスがあると「Redirect URI mismatch」エラーが発生します。環境ごとに必ず確認しましょう。

2. Next.js プロジェクトの初期構築と SDK インストール

ここでは、Next.js アプリを作成し、Auth0 用 SDK を導入するまでの手順を示します。Node.js 18+ と npm 9（または Yarn 4） が推奨環境です。

2‑1. Node.js バージョン・パッケージマネージャの推奨

Node.js: >= v18.20.0（Next.js 13+ の最低要件）。
npm: 9.x 系、Yarn: 4.x 系 が依存関係解決で安定しています。

# Node バージョン確認
node -v   # → v18.20.0 以上推奨

# Next.js プロジェクト作成（TypeScript 推奨）
npx create-next-app@latest my-auth0-app --ts
cd my-auth0-app

# Node バージョン確認

node -v # → v18.20.0 以上推奨

# Next.js プロジェクト作成（TypeScript 推奨）

npx create-next-app@latest my-auth0-app --ts

cd my-auth0-app

2‑2. @auth0/nextjs-auth0 のインストールとバージョン確認

公式クイックスタートに沿って SDK を導入します。バージョンは v2.5.0 が執筆時点の最新版です。

# SDK インストール（npm）
npm i @auth0/nextjs-auth0@^2.5.0

# 正しくインストールされたか確認
npm list @auth0/nextjs-auth0

# SDK インストール（npm）

npm i @auth0/nextjs-auth0@^2.5.0

# 正しくインストールされたか確認

npm list @auth0/nextjs-auth0

package.json に記載されたバージョンを CI でロックしておくと、ビルドの再現性が保てます。

3. 環境変数とセキュリティベストプラクティス

認証情報は環境変数に保存し、Git 管理から除外することが最重要です。ここでは .env.local の設定方法と .gitignore への追記を初期段階で行うポイントを解説します。

3‑1. Git 管理から除外する設定

プロジェクト作成直後に .gitignore に以下を追加してください。これにより、ローカル環境の機密情報がリポジトリにコミットされることを防げます。

# .env ファイルは絶対に公開しない
.env.local

# .env ファイルは絶対に公開しない

.env.local

Tip: .gitignore の記載は README.md の「初期設定」セクションで最初に案内すると見落としが減ります。

3‑2. .env.local の必須項目

.env.local はプロジェクトルートに作成し、サーバー側だけで使用する変数を記述します。以下は最低限必要なキーです。

# 認証フロー全体で共有される秘密鍵（32 バイト以上のランダム文字列）
AUTH0_SECRET=base64-encoded-random-string

# Auth0 テナント情報（サーバー側でのみ使用）
NEXT_AUTH0_DOMAIN=your-tenant.auth0.com
NEXT_AUTH0_CLIENT_ID=YOUR_CLIENT_ID
NEXT_AUTH0_CLIENT_SECRET=YOUR_CLIENT_SECRET   # ← サーバー専用、公開しない

# 認証フロー全体で共有される秘密鍵（32 バイト以上のランダム文字列）

AUTH0_SECRET=base64-encoded-random-string

# Auth0 テナント情報（サーバー側でのみ使用）

NEXT_AUTH0_DOMAIN=your-tenant.auth0.com

NEXT_AUTH0_CLIENT_ID=YOUR_CLIENT_ID

NEXT_AUTH0_CLIENT_SECRET=YOUR_CLIENT_SECRET # ← サーバー専用、公開しない

AUTH0_SECRET は openssl rand -base64 32 等で生成してください。
NEXT_PUBLIC_ プレフィックスは クライアント側に埋め込む必要がある変数だけに付与します（例: 公開 API キー）。認証情報の Secret 系統 は絶対に付けないでください。

3‑3. `NEXT_PUBLIC_` プレフィックスの正しい使い分け

用途	推奨変数名	説明
クライアント側でも参照が必要な公開情報	`NEXT_PUBLIC_SOME_KEY`	ビルド時にクライアントへ埋め込まれる。機密情報は不可。
サーバー専用の機密情報	`AUTH0_SECRET`, `NEXT_AUTH0_CLIENT_SECRET`	クライアントに露出しないよう `NEXT_PUBLIC_` を付けない。

誤解防止: 「クライアント側でも必要なケースがある」旨は、公開して問題の無い情報に限られます。Secret 系統は常にサーバーのみで保持してください。

4. Router 別の Auth0Provider 設定例

Next.js の Pages Router と App Router は設定方法が若干異なります。両方の実装パターンを示すことで、どちらでもスムーズに移行できるようにします。

4‑1. Pages Router（`pages/`）での設定

a. ミドルウェア (`middleware.ts`) の配置

// middleware.ts
import { NextResponse } from 'next/server';
import { withAuth } from '@auth0/nextjs-auth0/edge';

export default withAuth(
  async (req) =&gt; {
    // 必要に応じてパスごとに条件分岐可能
    return NextResponse.next();
  },
  { returnTo: '/' }   // 未認証時のリダイレクト先
);

// middleware.ts

import { NextResponse } from 'next/server';

import { withAuth } from '@auth0/nextjs-auth0/edge';

export default withAuth(

async (req) => {

// 必要に応じてパスごとに条件分岐可能

return NextResponse.next();

{ returnTo: '/' } // 未認証時のリダイレクト先

);

b. アプリ全体をラップする `UserProvider`（`pages/_app.tsx`）

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    &lt;UserProvider&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/UserProvider&gt;
  );
}

// pages/_app.tsx

import type { AppProps } from 'next/app';

import { UserProvider } from '@auth0/nextjs-auth0';

export default function MyApp({ Component, pageProps }: AppProps) {

return (

</UserProvider>

);

}

c. API Route にまとめた認証ハンドラ（`pages/api/auth/[...auth0].js`）

// pages/api/auth/[...auth0].js
import { handleAuth, handleLogin, handleCallback, handleLogout } from '@auth0/nextjs-auth0';

export default handleAuth({
  async login(req, res) {
    await handleLogin(req, res, { returnTo: '/' });
  },
  async callback(req, res) {
    await handleCallback(req, res, {
      afterCallback: (req, res, session) =&gt; session,
    });
  },
  async logout(req, res) {
    await handleLogout(req, res, { returnTo: '/' });
  },
});

// pages/api/auth/[...auth0].js

import { handleAuth, handleLogin, handleCallback, handleLogout } from '@auth0/nextjs-auth0';

export default handleAuth({

async login(req, res) {

await handleLogin(req, res, { returnTo: '/' });

async callback(req, res) {

await handleCallback(req, res, {

afterCallback: (req, res, session) => session,

});

async logout(req, res) {

await handleLogout(req, res, { returnTo: '/' });

});

4‑2. App Router（`src/app/`）での設定

a. ルートレイアウトに `UserProvider` を組み込む (`layout.tsx`)

// src/app/layout.tsx
import './globals.css';
import { UserProvider } from '@auth0/nextjs-auth0';

export const metadata = {
  title: 'My Auth0 App',
  description: 'Next.js 13+ + Auth0',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    &lt;html lang=&quot;ja&quot;&gt;
      &lt;body&gt;
        &lt;UserProvider&gt;{children}&lt;/UserProvider&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  );
}

// src/app/layout.tsx

import './globals.css';

import { UserProvider } from '@auth0/nextjs-auth0';

export const metadata = {

title: 'My Auth0 App',

description: 'Next.js 13+ + Auth0',

};

export default function RootLayout({ children }: { children: React.ReactNode }) {

return (

<body>

<UserProvider>{children}</UserProvider>

</body>

</html>

);

}

b. Edge API Route に認証ハンドラを集約（`src/app/api/auth/[...auth0]/route.ts`）

// src/app/api/auth/[...auth0]/route.ts
import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();
export const POST = handleAuth();

// src/app/api/auth/[...auth0]/route.ts

import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();

export const POST = handleAuth();

c. ミドルウェアはルートに配置したままで同様に機能

// middleware.ts（Pages Router と共通）
import { withAuth } from '@auth0/nextjs-auth0/edge';
export default withAuth((req) =&gt; req, { returnTo: '/' });

// middleware.ts（Pages Router と共通）

import { withAuth } from '@auth0/nextjs-auth0/edge';

export default withAuth((req) => req, { returnTo: '/' });

5. 認証フロー実装と保護されたページ／API の作り方

この章では、ログイン・コールバック・ログアウトエンドポイントの実装例と、サーバー側・クライアント側で認可を行うパターンを紹介します。

5‑1. withPageAuthRequired と useUser の使い分け

機能	サーバーサイド（SSR）	クライアントサイド
ページ全体の保護	`withPageAuthRequired` HOC を使用 → 未認証時に自動リダイレクト	-
ユーザー情報取得	`getSession` でセッションを取得（`getServerSideProps` 等）	`useUser` フックでリアルタイム取得

a. `withPageAuthRequired` の例（Pages Router）

import { withPageAuthRequired } from '@auth0/nextjs-auth0';

export default withPageAuthRequired(function Secret() {
  return &lt;h1&gt;機密情報ページ&lt;/h1&gt;;
});

import { withPageAuthRequired } from '@auth0/nextjs-auth0';

export default withPageAuthRequired(function Secret() {

return <h1>機密情報ページ</h1>;

});

b. `useUser` フックの例（クライアント側 UI）

import { useUser } from '@auth0/nextjs-auth0';

export default function Profile() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return &lt;p&gt;読み込み中…&lt;/p&gt;;
  if (error) return &lt;p&gt;エラー: {error.message}&lt;/p&gt;;
  if (!user) return &lt;p&gt;未ログインです。&lt;/p&gt;;

  return (
    &lt;&gt;
      &lt;h2&gt;{user.name} さんのプロフィール&lt;/h2&gt;
      &lt;img src={user.picture} alt=&quot;avatar&quot; /&gt;
    &lt;/&gt;
  );
}

import { useUser } from '@auth0/nextjs-auth0';

export default function Profile() {

const { user, error, isLoading } = useUser();

if (isLoading) return <p>読み込み中…</p>;

if (error) return <p>エラー: {error.message}</p>;

if (!user) return <p>未ログインです。</p>;

return (

<h2>{user.name} さんのプロフィール</h2>

</>

);

}

5‑2. `getServerSideProps` でサーバー側認可を行う例

import { GetServerSideProps } from 'next';
import { getSession } from '@auth0/nextjs-auth0';

export const getServerSideProps: GetServerSideProps = async (ctx) =&gt; {
  const session = await getSession(ctx.req, ctx.res);
  if (!session?.user) {
    return {
      redirect: {
        destination: `/api/auth/login?returnTo=${encodeURIComponent(ctx.resolvedUrl)}`,
        permanent: false,
      },
    };
  }

  // ロールベースの認可例（カスタムクレーム使用）
  const roles = session.user['https://myapp.com/roles'] ?? [];
  if (!roles.includes('admin')) {
    return { notFound: true };   // 403 相当
  }

  return { props: { user: session.user } };
};

export default function AdminPage({ user }: { user: any }) {
  return &lt;h1&gt;管理者ダッシュボードへようこそ、{user.name} さん&lt;/h1&gt;;
}

import { GetServerSideProps } from 'next';

import { getSession } from '@auth0/nextjs-auth0';

export const getServerSideProps: GetServerSideProps = async (ctx) => {

const session = await getSession(ctx.req, ctx.res);

if (!session?.user) {

return {

redirect: {

destination: `/api/auth/login?returnTo=${encodeURIComponent(ctx.resolvedUrl)}`,

permanent: false,

};

}

// ロールベースの認可例（カスタムクレーム使用）

const roles = session.user['https://myapp.com/roles'] ?? [];

if (!roles.includes('admin')) {

return { notFound: true }; // 403 相当

}

return { props: { user: session.user } };

};

export default function AdminPage({ user }: { user: any }) {

return <h1>管理者ダッシュボードへようこそ、{user.name} さん</h1>;

}

6. デプロイ・運用・デバッグと料金プランの概要

実装が完了したら本番環境へデプロイし、運用上の注意点を押さえておきましょう。

6‑1. Vercel / Netlify への環境変数設定手順

プラットフォーム	手順
Vercel	プロジェクト → Settings → Environment Variables `AUTH0_SECRET`, `NEXT_AUTH0_DOMAIN`, `NEXT_AUTH0_CLIENT_ID`, `NEXT_AUTH0_CLIENT_SECRET` を同名で登録「Production」や「Preview」ごとに値を設定し、デプロイ時に自動注入されることを確認
Netlify	Site settings → Build & Deploy → Environment 同様のキーを追加「Deploy site」ボタンで再ビルド

どちらの場合も、Allowed Callback URLs と Allowed Logout URLs にデプロイ先 URL（例: https://my-app.vercel.app/api/auth/callback）を必ず追記してください。

6‑2. Auth0 ダッシュボードでのエラーログ確認方法

Monitoring → Logs にアクセス。
「Failed Login」や「Callback URL mismatch」など、問題が起きたリクエストが一覧表示されます。
ローカル開発時は DEBUG=@auth0/nextjs-auth0:* 環境変数を設定すると、next dev コンソールに詳細デバッグ情報が出力されます。

# デバッグモードでローカルサーバ起動例
DEBUG=@auth0/nextjs-auth0:* npm run dev

# デバッグモードでローカルサーバ起動例

DEBUG=@auth0/nextjs-auth0:* npm run dev

6‑3. 2026 年版 Auth0 の料金プラン（概要）

以下は 2026‑06 時点 の主要プランです。最新情報は公式ページをご確認ください。

項目	無料枠 (Free)	開発者プラン (Developer)
月間アクティブユーザー	7,000 ユーザー	10,000 ユーザー
カスタムドメイン	×	◎
多要素認証 (MFA)	基本 OTP	プッシュ・生体認証まで対応
ログ保持期間	30 日	90 日
アプリケーション数	無制限	無制限

結論: シンプルなログイン＋ロールベース認可であれば、無料枠でも十分です。カスタムドメインや高度な MFA が必要になる場合は、有料プランへの移行をご検討ください。

7. 次のステップ：公式ドキュメントとサンプルリポジトリの活用

本ガイドに沿って環境構築・実装を完了すれば、Next.js（Pages Router または App Router）アプリに Auth0 認証が組み込めます。今後のメンテナンスや機能追加の際は、以下リソースを定期的にチェックしましょう。

公式クイックスタート: https://auth0.com/docs/ja-jp/quickstart/webapp/nextjs/interactive
Auth0 SDK リファレンス: https://github.com/auth0/nextjs-auth0
サンプルリポジトリ（App Router）: https://github.com/auth0-samples/nextjs-auth0-app-router
Zenn 実装例（App Router）: https://zenn.dev/joo_hashi/articles/6997e67b5ce29a

実践フロー:
1. ローカルで npm run dev → 動作確認
2. Vercel にデプロイ → 環境変数が正しく注入されるか検証
3. 本番環境でログイン・ログアウトをテストし、Auth0 の Logs でエラーが無いことを確認

参考情報（脚注）

Next.js バージョン要件 – Next.js 13+ は Node.js 18 以上が必須です。(nextjs.org/docs/getting-started)
@auth0/nextjs-auth0 v2.5.0 – npm パッケージページにてリリースノートを確認できます。(npm @auth0/nextjs-auth0)
Auth0 料金プラン – 2026‑06 時点の情報は公式 Pricing ページに掲載されています。(Auth0 Plans and Pricing)

以上で、Next.js と Auth0 を組み合わせた認証実装の全体像が把握できるはずです。ぜひ手元のプロジェクトで試してみてください！

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Auth0

comment コメントをキャンセル

: Auth0

Auth0カスタムDB連携ガイド | 技術的実装とセキュリティ

Webアプリケーション開発者向けに、Auth0と自社DBの連携方法を解説。OIDCプロトコル適用やセキュリティ設計の技術的詳細を含む実装ガイドです。

: Auth0

Auth0でカスタムドメインを導入するメリットと手順

Auth0のカスタムドメイン導入でブランド統一性を実現し、OV証明書によるセキュリティ強化を解説。DNS設定手順や証明書管理方法まで網羅。

: Auth0

2026年 Auth0とAzure AD B2C比較ガイド:技術・価格・導入事例

2026年の認証サービス比較記事。Auth0とAzure AD B2Cの技術特性・価格モデル・導入ケースに基づく選定基準を解説します。

: Auth0

Auth0 MFA 有効化と最新 UI ガイド (2025‑2026)

Auth0 の管理画面で MFA を即時有効化し、最新のワンページ UI と各認証要因（OTP、SMS、プッシュ、WebAuthn）の設定手順・ポリシー実装を紹介します。

: Auth0

Auth0カスタムルールの作成と活用ガイド

Auth0のカスタムルール作成手順とJavaScript記述方法、グローバルオブジェクト活用例について詳しく解説しています。

Auth0でMFAを導入する意義と設定のベストプラクティス

Auth0カスタムDB接続ガイド: ダッシュボードとNode.jsでの実装

Next.js と Auth0 の連携ガイド：アカウント作成・設定からデプロイまで

1. Auth0 アカウント作成とアプリケーション登録

1‑1. Domain・Client ID・Client Secret の取得手順

1‑2. Allowed Callback/Logout URLs の設定ポイント

2. Next.js プロジェクトの初期構築と SDK インストール

2‑1. Node.js バージョン・パッケージマネージャの推奨

2‑2. @auth0/nextjs-auth0 のインストールとバージョン確認

3. 環境変数とセキュリティベストプラクティス

3‑1. Git 管理から除外する設定

3‑2. .env.local の必須項目

3‑3. NEXT_PUBLIC_ プレフィックスの正しい使い分け

4. Router 別の Auth0Provider 設定例

4‑1. Pages Router（pages/）での設定

a. ミドルウェア (middleware.ts) の配置

b. アプリ全体をラップする UserProvider（pages/_app.tsx）

c. API Route にまとめた認証ハンドラ（pages/api/auth/[...auth0].js）

4‑2. App Router（src/app/）での設定

a. ルートレイアウトに UserProvider を組み込む (layout.tsx)

b. Edge API Route に認証ハンドラを集約（src/app/api/auth/[...auth0]/route.ts）

c. ミドルウェアはルートに配置したままで同様に機能

5. 認証フロー実装と保護されたページ／API の作り方

5‑1. withPageAuthRequired と useUser の使い分け

a. withPageAuthRequired の例（Pages Router）

b. useUser フックの例（クライアント側 UI）

5‑2. getServerSideProps でサーバー側認可を行う例

6. デプロイ・運用・デバッグと料金プランの概要

6‑1. Vercel / Netlify への環境変数設定手順

6‑2. Auth0 ダッシュボードでのエラーログ確認方法

6‑3. 2026 年版 Auth0 の料金プラン（概要）

7. 次のステップ：公式ドキュメントとサンプルリポジトリの活用

参考情報（脚注）

3‑3. `NEXT_PUBLIC_` プレフィックスの正しい使い分け

4‑1. Pages Router（`pages/`）での設定

a. ミドルウェア (`middleware.ts`) の配置

b. アプリ全体をラップする `UserProvider`（`pages/_app.tsx`）

c. API Route にまとめた認証ハンドラ（`pages/api/auth/[...auth0].js`）

4‑2. App Router（`src/app/`）での設定

a. ルートレイアウトに `UserProvider` を組み込む (`layout.tsx`)

b. Edge API Route に認証ハンドラを集約（`src/app/api/auth/[...auth0]/route.ts`）

a. `withPageAuthRequired` の例（Pages Router）

b. `useUser` フックの例（クライアント側 UI）

5‑2. `getServerSideProps` でサーバー側認可を行う例