頁面加載后反應（Next.JS）導入組件

Question

我正在使用react-owl-carousel package 但是當我刷新頁面時它會拋出一個錯誤“窗口未定義”所以這是正確的。 模塊在加載頁面之前嘗試訪問 window object。 我嘗試使用 React.lazy 但它沒有用，我的頁面拋出另一個錯誤說reactdomserver does not yet support suspense （我試圖更改 next.config.js 以使用它但仍然拋出該錯誤。）

問題是我需要這樣的東西

import OwlCarousel from "react-owl-carousel" //import it just like that right after page loaded (or window object is accesible)

package: https://www.npmjs.com/package/react-owl-carousel

Answer 1

Next.js 支持 JavaScript 的 ES2020 動態導入（）。有了它，您可以動態導入 JavaScript 模塊並使用它們。 他們還與 SSR 合作。

您可以dynamicaly導入組件並禁用服務器端渲染，這樣它將可以訪問window

創建您的組件並在那里使用 OwlCarousel

import React from 'react';
import OwlCarousel from 'react-owl-carousel';

const OwlComponent = () => {
    return (
        <div>
            <OwlCarousel />
        </div>
    );
};

現在將該組件導入為動態組件

import dynamic from "next/dynamic";
 
const OwnComponentNoServerRendering = dynamic(() =>
import("../components/OwlComponent"), {   ssr: false });

它應該作為一種魅力