如何在Next.js中使用jQuery插件？求代码排查与解决方案

Hey there! Let's work through why you're struggling to get jQuery plugins working in your Next.js app. Looking at your _document.js code, there are a few key issues we can address to get things running smoothly:

1. Incorrect Static Asset Path #

Your current script path ../static/js/jquery.main.js won't work properly in Next.js. For static assets, you should:

• Place your jquery.main.js file in the public/js folder (older Next.js versions used static instead of public—adjust if needed)
• Reference it using a root-relative path like /js/jquery.main.js instead of a relative path.

2. Missing jQuery Dependency & Load Order #

If your jquery.main.js is a plugin that relies on jQuery, you need to load jQuery before the plugin. Right now, you're only loading the plugin, which will throw an error because jQuery doesn't exist yet.

Update your Head section to include jQuery first, then your plugin:

<Head>
  {this.props.styleTags}
  <link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" rel="stylesheet" />
  {/* Load jQuery first */}
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" />
  {/* Load your plugin after jQuery */}
  <script src="/js/jquery.main.js" />
</Head>

3. Avoid SSR Conflicts with jQuery #

jQuery is a client-side library that depends on the DOM, which doesn't exist during server-side rendering (SSR). To safely use your plugin, make sure you only initialize it on the client side.

In any component where you use the jQuery plugin, wrap the initialization in a useEffect hook (which only runs in the browser):

import React, { useEffect } from 'react';

export default function MyComponent() {
  useEffect(() => {
    // Check if jQuery is loaded before using the plugin
    if (window.jQuery) {
      // Initialize your plugin here (example using a modal plugin)
      $('#modal').modalPlugin();
    }
  }, []);

  return (
    <div>
      {/* Your component content */}
    </div>
  );
}

Bonus: Secure Your Plugin Code #

If jquery.main.js is custom code you wrote, wrap it in an IIFE to avoid global variable conflicts and ensure it uses the jQuery instance:

// Inside jquery.main.js
(function($) {
  // Your plugin code here, using $ as jQuery
  $.fn.modalPlugin = function() {
    // Plugin logic
  };
})(jQuery);

With these changes, your jQuery plugin should load and work correctly in your Next.js app!

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