如何创建NextAuth登录路由？详解[...nextauth].ts文件与配置

1. 文件名中[...]的含义 #

这是Next.js的catch-all动态路由语法，作用是匹配/api/auth路径下的所有子路由。比如NextAuth.js需要的/api/auth/signin、/api/auth/signout、/api/auth/callback/[provider]等所有认证相关的API请求，都会被这个单一文件处理，不用为每个子路由单独创建文件。

2. 是否需要单独创建signIn、signOut页面 #

不需要。NextAuth.js内置了默认的登录、登出、错误页面，访问对应路径（比如/api/auth/signin）时会自动渲染。如果需要自定义页面样式或逻辑，才需要在pages目录下创建对应的页面文件（比如pages/signin.tsx），然后在[...nextauth].ts的配置对象中添加pages字段指定自定义路径：

export default NextAuth({
  // 其他配置...
  pages: {
    signIn: '/signin', // 指向你的自定义登录页面
    signOut: '/signout',
    error: '/auth-error',
  },
})

3. 示例代码的放置位置 #

所有NextAuth.js的配置代码直接写在pages/api/auth/[...nextauth].ts文件中，结合Prisma+Postgres场景的典型结构如下：

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    // 可添加更多登录提供商
  ],
  session: {
    strategy: "database", // 使用Prisma适配器时推荐该策略
  },
})

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