如何在Next.js 14中服务端使用next-auth？App Router SSR实现指南

可行性说明 #

完全可以在Next.js 14的App Router中通过NextAuth.js实现服务端获取用户会话，并基于SSR生成页面响应。下面是具体操作步骤：

一、基础环境配置 #

1. 安装依赖 #

Next.js 14适配NextAuth.js v5版本（当前为beta版），执行安装命令：

npm install next-auth@beta

2. 创建Auth配置文件 #

在app/auth.ts中定义NextAuth核心配置，示例如下：

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
// 可根据需求引入其他provider，比如Google、GitHub等

export const { auth, handlers, signIn, signOut } = NextAuth({
  providers: [
    Credentials({
      credentials: {
        email: { label: '邮箱', type: 'email' },
        password: { label: '密码', type: 'password' },
      },
      async authorize(credentials) {
        // 这里替换为你的用户验证逻辑，比如查询数据库
        if (!credentials?.email || !credentials?.password) return null;
        const user = { id: '1', name: '测试用户', email: credentials.email };
        return user;
      },
    }),
  ],
  session: { strategy: 'jwt' }, // 无数据库场景推荐用jwt策略
  secret: process.env.NEXTAUTH_SECRET, // 需在.env文件中配置该密钥
});

3. 配置Auth路由处理器 #

创建app/api/auth/[...nextauth]/route.ts文件，导出NextAuth的请求处理器：

import { handlers } from '@/app/auth';
export const { GET, POST } = handlers;

二、App Router中SSR获取会话并渲染页面 #

在App Router中，默认的页面组件均为Server Component，可直接在服务端调用auth()函数获取会话，实现SSR渲染：

示例：受保护的Dashboard页面 #

创建app/dashboard/page.tsx：

import { auth, signIn, signOut } from '@/app/auth';

export default async function DashboardPage() {
  // 服务端直接获取会话
  const session = await auth();

  // 未登录时渲染登录提示
  if (!session) {
    return (
      <div className="p-4">
        <h2>请先登录</h2>
        <button onClick={() => signIn()}>前往登录</button>
      </div>
    );
  }

  // 已登录时渲染用户专属内容（SSR生成）
  return (
    <div className="p-4">
      <h1>欢迎回来，{session.user?.name}</h1>
      <p>你的邮箱：{session.user?.email}</p>
      <button onClick={() => signOut()}>退出登录</button>
    </div>
  );
}

三、服务端API中验证会话 #

在App Router的API路由（同样运行在服务端）中，也可通过auth()验证用户身份，返回受保护数据：

创建app/api/protected/route.ts：

import { auth } from '@/app/auth';
import { NextResponse } from 'next/server';

export async function GET() {
  const session = await auth();

  if (!session) {
    return NextResponse.json({ error: '未授权访问' }, { status: 401 });
  }

  return NextResponse.json({
    message: '获取受保护数据成功',
    userInfo: session.user,
  });
}

关键注意事项 #

• 确保NEXTAUTH_SECRET已在.env文件中配置，可通过openssl rand -hex 32生成随机密钥
• Server Component中无需额外封装，直接调用await auth()即可获取会话，该操作完全在服务端完成，不会暴露敏感逻辑到前端
• 若需在Client Component中获取会话，可使用useSession钩子，但这不属于SSR场景，需注意区分

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