求助：NextJS 13中FullCalendar无法加载CSS的解决办法

我前段时间刚在NextJS 13的App Router里踩过这个坑，折腾了好久才搞定，给你分享几个亲测有效的解决思路：

方法一：配置NextJS转译FullCalendar模块（最推荐） #

FullCalendar官方提到的转译模块确实是核心解决方向，不过NextJS 13的配置细节要注意：

1. 先确认安装了所需的FullCalendar依赖包：

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

2. 在项目根目录的next.config.js里添加转译配置，把FullCalendar相关的包都纳入转译范围：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@fullcalendar/core', '@fullcalendar/common', '@fullcalendar/daygrid', '@fullcalendar/interaction'],
}

module.exports = nextConfig

3. 关键一步！在你的日历组件顶部加上'use client'指令（因为FullCalendar依赖浏览器DOM，服务器组件里无法运行），然后直接导入对应的CSS：

'use client'

import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css'
import '@fullcalendar/interaction/main.css'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default function Calendar() {
  return (
    <FullCalendar
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
    />
  )
}

配置完成后，NextJS会正确转译FullCalendar的模块，CSS就能正常加载了。

方法二：全局引入CSS（适合Pages Router或应急场景） #

如果转译的方法没生效，你可以试试手动全局引入CSS：

1. 找到node_modules里FullCalendar的CSS文件，比如@fullcalendar/core/main.css、@fullcalendar/daygrid/main.css，把它们复制到项目的public/css/fullcalendar目录下（没有的话自行创建）。
2. 在Pages Router的_app.js里，或者App Router的layout.js（记得加'use client'）里用link标签引入：

'use client'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link rel="stylesheet" href="/css/fullcalendar/core/main.css" />
        <link rel="stylesheet" href="/css/fullcalendar/daygrid/main.css" />
      </head>
      <body>{children}</body>
    </html>
  )
}

不过这个方法需要手动维护CSS文件，FullCalendar版本更新后可能需要重新复制，不如第一种方法省心。

几个额外的注意事项 #

• 一定要确保日历组件是客户端组件，没加'use client'的话不仅CSS加载有问题，日历本身也可能无法正常运行。
• 尽量使用最新版本的FullCalendar和NextJS，版本不兼容也可能导致各种奇怪的问题。
• 如果还是不行，试试删除node_modules、.next文件夹，然后重新执行npm install和npm run build，清理缓存说不定就能解决问题。

备注：内容来源于stack exchange，提问作者Theo Wright