使用NextJS（React服务端渲染）加载FullCalendar直接访问页面报错

Hey, I’ve hit this exact problem before when integrating FullCalendar with Next.js—let me walk you through what’s going on and how to fix it quickly.

Why This Happens #

The key difference between direct page access and client-side routing is server-side rendering (SSR). When you directly visit /schedule, Next.js tries to render the page on the server first. But FullCalendar relies heavily on jQuery, which doesn’t exist in the server environment (no browser window, no loaded jQuery library). That’s why you get the $.extend is not a function error—server-side code can’t find jQuery at all.

When you navigate from another component using Next.js’s client-side routing (like next/link), the page renders entirely in the browser, where jQuery is already loaded, so everything works as expected.

Solutions to Try #

1. Use Dynamic Import with SSR Disabled

The simplest fix is to load your FullCalendar component only on the client side, skipping SSR entirely. Next.js’s dynamic import lets you do this easily:

// In your schedule page component
import dynamic from 'next/dynamic';

// Import your calendar component with SSR turned off
const CalendarComponent = dynamic(() => import('../components/YourFullCalendar'), {
  ssr: false,
  loading: () => <p>Loading calendar...</p> // Optional loading state
});

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

Then in your actual calendar component, make sure you initialize FullCalendar inside a useEffect hook (which only runs client-side):

import { useEffect } from 'react';
import $ from 'jquery';
import 'fullcalendar';

export default function YourFullCalendar() {
  useEffect(() => {
    // Initialize FullCalendar here
    $('#calendar').fullCalendar({
      // Your calendar config (events, views, etc.)
    });

    // Cleanup on unmount
    return () => $('#calendar').fullCalendar('destroy');
  }, []);

  return <div id="calendar" />;
}

2. Switch to FullCalendar’s Official React Wrapper (Recommended)

The older FullCalendar version you’re using depends on jQuery, which is not ideal for React/Next.js projects. The official @fullcalendar/react package is built for React, no jQuery required, and plays nicely with SSR.

First install the necessary packages:

npm install @fullcalendar/react @fullcalendar/daygrid # Add other plugins like timegrid as needed

Then use it in your page component:

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

export default function SchedulePage() {
  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      events={[
        // Your event data here
        { title: 'Event 1', start: '2024-05-01' }
      ]}
    />
  );
}

This approach eliminates the jQuery dependency entirely, so you won’t run into SSR-related issues anymore.

3. Load jQuery Globally for Client-Side Only

If you need to stick with the jQuery-based FullCalendar version, you can load jQuery in your _document.js file so it’s available client-side:

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <!-- Load jQuery and FullCalendar assets from CDN -->
          <script src="https://code.jquery.com/jquery-3.6.4.min.js" />
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
          <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" />
          <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Combine this with the dynamic import (solution 1) to ensure your calendar code only runs client-side.

Final Notes #

The React wrapper (@fullcalendar/react) is the most maintainable long-term solution since it’s designed for React ecosystems. If you go with the jQuery approach, always make sure your calendar initialization code runs only in the browser (via useEffect or dynamic imports with ssr: false).

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