Next.js调用Lucia登出Server Action报错：dns未定义

核心问题 #

你碰到的错误本质是Server Action被误在客户端执行了——Lucia依赖服务端环境的底层模块（比如dns），客户端组件直接调用或错误引入服务端代码就会触发这个报错。

具体解决步骤 #

• 正确标记Server Action
  给登出Action函数加上'use server'指令，并且把这个函数放在服务端组件文件或者单独的actions/目录下（Next.js会自动识别该目录下的文件为服务端专属代码）。示例代码：

  // app/actions/auth.ts
  'use server';
  
  import { lucia } from '@/lib/lucia';
  import { cookies } from 'next/headers';
  
  export async function logout() {
    const sessionId = cookies().get(lucia.sessionCookieName)?.value;
    if (!sessionId) return;
  
    // 数据库检查逻辑
    const session = await lucia.validateSession(sessionId);
    if (session) {
      await lucia.invalidateSession(sessionId);
    }
  
    // 清除Cookie
    const sessionCookie = lucia.createBlankSessionCookie();
    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
  }
  

• 客户端组件正确调用
  在客户端组件里直接导入并调用这个Action就行，不需要用useCallback包裹，Next.js会自动处理客户端到服务端的调用逻辑：

  // app/components/LogoutButton.tsx
  'use client';
  
  import { logout } from '@/app/actions/auth';
  
  export default function LogoutButton() {
    return (
      <button onClick={async () => {
        await logout();
        // 登出后跳转首页，避免状态不一致
        window.location.href = '/';
      }}>
        登出
      </button>
    );
  }
  

• 排查错误引入

  • 别在客户端组件里直接导入Lucia的服务端核心模块（比如@lucia-auth/lucia的实例），这些只能在服务端代码里用。
  • 不要把Server Action的函数定义写在客户端组件文件里，必须拆分到服务端专属文件中。

额外提醒 #

如果用的是Next.js App Router，确保actions/目录在app/路径下，或者Action所在文件没有'use client'指令。

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