next.js 中加载和使用 Web Components

HenryZ 2024-01-24 更新于 2024-03-06

由于 Next.js 默认是服务端加载模式，
所以需要在 useEffect 中 import Web 组件（仅在客户端加载的静态组件）。

示例：

import { useEffect } from "react";

function Home() {
    useEffect(() => {
        import("../public/components/my-loading.js"), [];
    });

    return (
        <>
            <my-loading></mc-loading>
        </>
    );
}

export default Home;