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を認証プロバイダーとして使っている可能性がある
UserPoolIdClientId
上記の 両方の環境変数（もしくは設定値）をどこかに設定する必要がある。
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です。
▶ 取得手順：
- AWSマネジメントコンソールにログイン
- Cognito を開く
- 「ユーザープール」→ あなたのプール（例：
ap-northeast-1_xxxxxx）を選択 - 左メニュー「アプリケーション」→「アプリケーションクライアント」
- 一覧に表示される「クライアント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}"
}
]
}
✅ 手順
- 上記のように
launch.jsonに 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"
}
]
}
🔧 手順
- 上記の
launch.jsonを.vscode/launch.jsonに保存 - VS Code 左メニューの「▶ 実行とデバッグ」から
Debug Next.js Appを選択して起動 src/app/**などのソースファイルでブレークポイントを打つ（F9）- 対象のページにアクセスして、ブレークがかかるか確認