Next.js App目录下Next Auth登录后Tailwind CSS加载异常问题

1. 修复重复跳转逻辑 #

你的登录代码中，signIn已设置redirect: true和callbackUrl: "/home"，会自动完成跳转，但后续又调用router.push("/home")，这会导致路由重复触发，干扰页面资源加载流程。直接移除then里的重复跳转代码：

await signIn("credentials", {
  email: userInfo.email,
  password: watch("Phone_otp"),
  redirect: true,
  callbackUrl: "/home",
})
  .then(() => {
    dispatch({
      type: reducerActions.HIDE_LOADER,
    });
    // 移除该行：router.push("/home");
    console.log("then executed >");
  })
  .catch((err: any) => {
    dispatch({
      type: reducerActions.HIDE_LOADER,
    });
    console.log(" signin err > ", err);
  });

2. 确保Tailwind配置覆盖App目录所有文件 #

检查tailwind.config.js的content数组，必须包含App目录下的所有组件和页面文件，否则Tailwind无法生成对应样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}", // 如有components目录需添加
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. 调整中间件匹配规则，排除静态资源 #

修改middleware.ts，使用排除式匹配规则，避免中间件误拦截Tailwind的静态资源文件：

export { default } from "next-auth/middleware";
export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|api).*)",
  ],
};

该规则会拦截所有除静态资源、图片、图标和API路由之外的路径，同时覆盖你原本的/posts和/home保护需求。

4. 规范Session回调的类型处理 #

你的session回调中直接将token赋值给session.user，使用any类型可能导致状态异常，建议严格类型定义：

import { type AuthOptions, type Session, type JWT } from "next-auth";

// ...其他代码

callbacks: {
  async signIn() {
    return true;
  },
  async jwt({ token, user, trigger, session }: { token: JWT; user?: any; trigger?: string; session?: any }) {
    if (trigger === "update") {
      return { ...token, ...session.user };
    }
    return { ...token, ...user };
  },
  async session({ session, token }: { session: Session; token: JWT }) {
    session.user = {
      id: token.id as string,
      name: token.name as string,
      email: token.email as string,
    };
    return session;
  },
},

5. 验证全局CSS的正确引入 #

确保app/layout.tsx中正确导入了包含Tailwind指令的全局CSS文件：

import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

同时app/globals.css必须包含以下Tailwind基础指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

6. 清除Next.js缓存 #

开发环境下删除.next文件夹，然后重启开发服务器；生产环境重新执行构建命令：

# 开发环境
rm -rf .next && npm run dev

# 生产环境
npm run build && npm run start

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