NextJS 13（T3 Stack）中FullCalendar二次导航样式加载不全问题

核心原因 #

Next.js 13 App Router的客户端路由机制下，FullCalendar的局部样式在页面二次挂载时未被重新注入；或是样式导入时机与组件生命周期不匹配，导致导航返回后样式丢失。

具体解决方案 #

1. 组件挂载时动态导入样式 #

在日历客户端组件中，通过useEffect触发样式的动态导入，确保每次组件挂载都重新加载样式：

'use client';

import { useEffect, useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

export default function CalendarPage() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    // 按需加载FullCalendar相关样式
    import('@fullcalendar/common/main.css');
    import('@fullcalendar/daygrid/main.css');
    import('@fullcalendar/react/main.css');
    
    setIsReady(true);
  }, []);

  if (!isReady) return <div>加载中...</div>;

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
    />
  );
}

2. 全局导入样式到客户端布局 #

将FullCalendar样式全局导入到app/layout.tsx（需标记为客户端组件），确保所有页面导航时样式都存在：

// app/layout.tsx
'use client';

// 全局导入FullCalendar样式
import '@fullcalendar/common/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/react/main.css';

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

日历组件保持常规动态导入即可：

// app/calendar/page.tsx
import dynamic from 'next/dynamic';

const CalendarComponent = dynamic(() => import('../components/Calendar'), {
  ssr: false,
  loading: () => <div>加载中...</div>
});

export default function CalendarPage() {
  return <CalendarComponent />;
}

3. 临时禁用样式缓存排查 #

在next.config.js中关闭CSS优化缓存，确认是否为缓存导致的问题（生产环境建议恢复）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizeCss: false,
  },
};

module.exports = nextConfig;

4. 升级FullCalendar版本 #

确保使用的@fullcalendar系列包兼容Next.js 13 App Router，执行升级命令：

npm update @fullcalendar/react @fullcalendar/common @fullcalendar/daygrid

原理说明 #

Next.js 13 App Router对客户端组件的样式加载做了优化，首次加载时会注入所有样式，但客户端路由导航时，部分局部样式可能不会重新执行导入逻辑。通过动态挂载时导入或全局导入的方式，能强制样式在页面切换后依然生效。

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