Next.js中"use client"上下文为何报"Module parse failed: Invalid escape sequence"错误？

1. 确认Auth配置文件正确性 #

在app/api/auth/[...nextauth]/route.ts中完成Next Auth的基础配置，示例代码如下：

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "邮箱", type: "email" },
        password: { label: "密码", type: "password" }
      },
      async authorize(credentials) {
        // 此处编写用户验证逻辑，返回用户对象或null
        const user = { id: "1", name: "测试用户", email: "test@example.com" };
        return user;
      }
    })
  ],
  session: { strategy: "jwt" }, // 使用JWT策略无需依赖数据库会话
  secret: process.env.NEXTAUTH_SECRET,
});

export { handler as GET, handler as POST };

2. 在Root Layout中传递会话 #

Root Layout属于服务器组件，需通过getServerSession获取会话后，传递给客户端组件的上下文：

import { getServerSession } from "next-auth/next";
import { authOptions } from "./api/auth/[...nextauth]/route";
import SessionProvider from "./components/SessionProvider";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await getServerSession(authOptions);

  return (
    <html lang="zh-CN">
      <body>
        <SessionProvider session={session}>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

3. 编写客户端Session Provider组件 #

创建app/components/SessionProvider.tsx（添加'use client'标记为客户端组件），整合Next Auth的Provider与自定义上下文：

'use client';

import { SessionProvider as NextAuthProvider } from "next-auth/react";
import { createContext, useContext } from "react";
import { Session } from "next-auth";

const SessionContext = createContext<Session | null>(null);

export default function SessionProvider({ children, session }: { children: React.ReactNode, session: Session | null }) {
  return (
    <NextAuthProvider session={session}>
      <SessionContext.Provider value={session}>
        {children}
      </SessionContext.Provider>
    </NextAuthProvider>
  );
}

// 自定义钩子，简化组件获取会话的流程
export const useSessionContext = () => useContext(SessionContext);

4. 在客户端组件中调用会话 #

在需要的客户端组件（如providers.ts关联组件）中，通过自定义钩子获取会话：

'use client';

import { useSessionContext } from "./components/SessionProvider";

export function TargetClientComponent() {
  const session = useSessionContext();

  if (!session) {
    return <div>未登录</div>;
  }

  return <div>欢迎，{session.user?.name}</div>;
}

常见问题排查 #

• 确保NEXTAUTH_SECRET环境变量已正确配置，否则会话验证会失败。
• 若使用数据库会话（strategy: "database"），需配置对应数据库适配器并确保连接正常。
• 服务器组件仅能使用getServerSession，客户端组件用useSession或自定义钩子，禁止混用。
• 检查组件的服务器/客户端属性，Root Layout作为服务器组件，不可直接使用客户端钩子，必须通过客户端组件中转传递会话。

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