配置NextAuth自定义signin页面后访问/auth/signin出现404错误

访问http://localhost:3000/auth/signin自定义登录页时，出现404: 页面未找到错误。

已配置的代码与结构 #

1. pages/auth/[...nextauth].js代码 #

import NextAuth from "next-auth"
import Provider from "next-auth/providers/google"


export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
  pages: {
    signIn: "/auth/signin",
  },
})

2. 文件夹结构 #

已创建pages/auth/signin.js文件，对应自定义登录页路径。

3. pages/auth/signin.js代码 #

import React from 'react'

export default function signin() {
  return (
    <div>signin</div>
  )
}

1. 修正GoogleProvider导入错误 #

[...nextauth].js中导入语句有误，需将Provider改为GoogleProvider：

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
})

2. 修正React组件命名 #

React要求组件名首字母大写，否则会被识别为普通DOM元素，导致页面无法正常渲染。修改signin.js的组件名：

import React from 'react'

export default function Signin() {
  return (
    <div>signin</div>
  )
}

3. 确认文件夹结构 #

确保目录结构符合Next.js Pages Router规范：

pages/
├─ auth/
│  ├─ signin.js
│  └─ [...nextauth].js

4. 重启开发服务器 #

修改配置文件后，重启Next.js开发服务器，确保所有配置生效。

内容的提问来源于stack exchange，提问作者Levi Ackerman