Next.js をインストールする

next, react, react-dom がインストールされていない場合下記を実行

npm install next react react-dom

これにより、next コマンドが使えるようになります。

再度開発サーバを起動

とにかく実行してみる フロントエンドのソースのあるディレクトに移動後下記コマンド

npm run dev

エラーが出ると思うのでpackage.jsonを確認する

scripts の中に正しく dev が定義されているか確認

"scripts": {
  "dev": "next dev --turbopack",
  "build": "next build",
  "start": "next start"
}

node_modules がない場合

依存関係が未インストールの場合も同じエラーが出ます。以下で依存関係を一括インストール

npm install

グローバルに next を使いたい場合（推奨はしない）

グローバルインストールも可能

npm install -g next

AWS Cognitoを認証プロバイダーを使っている場合

多くのフロントエンドは、AWS Cognitoを認証プロバイダーとして使っている可能性がある

• UserPoolId
• ClientId

上記の 両方の環境変数（もしくは設定値）をどこかに設定する必要がある。

Error: Both UserPoolId and ClientId are required.

上記は、NextAuth の初期化が失敗しているというエラーです。

.env ファイルに環境変数を設定

プロジェクトのルートにある .env.local または .env ファイルを確認・編集して、以下のような環境変数を追加

AWS_COGNITO_USER_POOL_ID=your_user_pool_id
AWS_COGNITO_CLIENT_ID=your_cognito_client_id
AWS_COGNITO_REGION=your_aws_region

.env.local を更新したら、Next.js 開発サーバを再起動

npm run dev

上記の必要な3つの情報とその取得

COGNITO_CLIENT_ID の探し方（＝アプリクライアントID）

これは AWS Cognito の中にある「アプリケーションクライアント」のIDです。

▶ 取得手順：

1. AWSマネジメントコンソールにログイン
2. Cognito を開く
3. 「ユーザープール」→ あなたのプール（例：ap-northeast-1_xxxxxx）を選択
4. 左メニュー「アプリケーション」→「アプリケーションクライアント」
5. 一覧に表示される「クライアントID」が COGNITO_CLIENT_ID

COGNITO_REGION の探し方

これはユーザープールIDの先頭にあるリージョン名と同じです。

下記のコード部分を探して確認

const userPool = new CognitoUserPool({
  UserPoolId: process.env.AWS_COGNITO_USER_POOL_ID,
  ClientId: process.env.AWS_COGNITO_CLIENT_ID,
});

HTTP 401 = 「認証失敗（Unauthorized）」

POST /api/auth/callback/credentials 401 のエラーは、NextAuth の “credentials” プロバイダでのログインが失敗したことを示しています。
これは「ユーザー名またはパスワードが正しくない」または「認証ロジックに問題がある」場合です。

401 の意味

• HTTP 401 = 「認証失敗（Unauthorized）」
• /api/auth/callback/credentials は NextAuth の内部APIで、ログイン時に叩かれます
• つまり「ログインの試行はされたが、認証できなかった」

① ユーザー名 or パスワードが間違っている

Cognito 側のユーザー情報と、ログイン画面で入力した情報が一致していない可能性。

対処：

• 正しいユーザー名・パスワードか確認
• Cognito コンソールで対象ユーザーの存在を確認
• ユーザーが有効化されているか（メール確認済など）

---

② 認証ロジックのコードに問題がある

おそらく NextAuth の authorize() 関数内で認証処理を行っているはず。
ここで return null すると、NextAuth は「ログイン失敗」とみなして 401 を返します。

③ Cognito との接続エラー

Cognito SDK を使って AuthenticationDetails や CognitoUser.authenticateUser() を使っている場合に、エラーがうまく処理されず null 返していると、401 になります。

Cognito 管理画面からパスワードをリセットする手順

CLIから強制的にパスワードを変更

aws cognito-idp admin-set-user-password \
  --user-pool-id ap-northeast-1_XXXXXXX \
  --username example@example.com \
  --password NewPassword123! \
  --region ap-northeast-1 \
  --permanent

Cognito 側の「ユーザーのステータス」が「確認済み」で「有効」になっていれば、NextAuth 側でログインできるようです。

Cognito 管理者が新しいパスワードを「即時設定」

AWS の CLI（コマンドライン） を使えば、ユーザーに代わって新しいパスワードをその場で設定できます。

---

▶ 必要条件

• AWS CLI をインストール済み（公式サイト）
• CLI に aws configure でアクセスキー等を設定済み

aws cognito-idp admin-set-user-password \
  --user-pool-id ap-northeast-1_あなたのユーザープールID \
  --username ユーザー名またはメールアドレス \
  --password 新しいパスワード \
  --permanent

これでパスワードが更新され、「強制変更状態」が解除されます。
その後、Next.js/NextAuth 側でログインできるようになるはず

✅ Chrome を起動して Next.js をデバッグ

VS Code でブラウザ（Chrome）を自動起動させるには、pwa-chrome タイプの構成が必要です。

🔧 修正例：Node.js + Chrome の構成（2つ入れる）

{
  "version": "0.2.0",
  "configurations": [
    {
      // Next.js dev server を起動（ブラウザは起動しない）
      "type": "pwa-node",
      "request": "launch",
      "name": "Next.js Dev Server",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    },
    {
      // Chrome を起動して http://localhost:3000 に接続
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Open Chrome to http://localhost:3000",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

✅ 手順

1. 上記のように launch.json に 2 つの設定を入れる。
2. サイドバーの「実行とデバッグ（Ctrl+Shift+D）」で、
   • Next.js Dev Server を実行 → サーバー起動
   • Open Chrome to http://localhost:3000 を実行 → Chrome 起動

以下のような launch.json を使って、VS Code から Next.js を起動

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Debug Next.js App",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "cwd": "${workspaceFolder}",
      "env": {
        "NODE_OPTIONS": "--inspect"
      },
      "skipFiles": ["/**"],
      "console": "integratedTerminal"
    }
  ]
}

🔧 手順

1. 上記の launch.json を .vscode/launch.json に保存
2. VS Code 左メニューの「▶ 実行とデバッグ」から Debug Next.js App を選択して起動
3. src/app/** などのソースファイルでブレークポイントを打つ（F9）
4. 対象のページにアクセスして、ブレークがかかるか確認