如何修改Next-Auth中登录页面的URL地址？

步骤1：调整登录页文件位置 #

将原有的pages/auth/signin.js文件移动到pages/login.js，Next.js会自动将该文件映射到/login访问路径。

步骤2：更新Next-Auth配置 #

在[...nextauth].js中修改pages配置项，将登录页路径指定为新的/login：

pages: {
  signIn: '/login',
}

修改完成后，点击登录按钮时，Next-Auth会自动跳转到http://localhost:3000/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000，URL主体已变为简洁的/login格式。

步骤3：（可选）兼容旧路径重定向 #

如果需要避免用户通过旧的/auth/signin路径访问出错，可在next.config.js中添加重定向规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/auth/signin',
        destination: '/login',
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig

验证效果 #

重启Next.js开发服务后，点击登录按钮会直接跳转到/login开头的URL，登录完成后也能正常跳转到配置的回调地址。

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