在开发和生产模式下使用NextJS时，我遇到了“react-highlight”中的“Highlight”组件的问题。
在开发模式中，元件会以格式化样式正确呈现。但是，在生产模式下，它只显示没有预期格式的纯文本。
我是NextJS的新手，所以我不确定是什么导致了这种差异。你知道为什么会这样吗如有任何帮助，我们将不胜感激。
Header.tsx

'use client'
import "./Header.scss";
import { CodeBlock } from '../CodeBlock/CodeBlock';
import { codeSnipetsHeader, codeSnipetsHeader2 } from "./data";
import { useEffect, useRef } from "react";
import { motion } from "framer-motion";
import { usePathname } from 'next/navigation';

export function Header(): JSX.Element {

    const pathname: string = usePathname();

    /*Using useRef and ++ to regenerate <Header/> and play the animation each time the pathname changes. **/
    const ref = useRef<number>(0);
    useEffect(() => {
        ref.current++;
    }, [pathname]);

    let codeSnipetstoShow = codeSnipetsHeader2;
    if (pathname.length < 2) { codeSnipetstoShow = codeSnipetsHeader; }

    return (
        <header>
            <motion.div key={ref.current} className="group" exit={{ opacity: 0 }} transition={{ duration: 1 }}>
                {codeSnipetstoShow.map((value, index): JSX.Element => (
                    <motion.div key={index}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 - (index * 0.2) }}
                        transition={{ duration: index + 1 }}
                    >
                        <CodeBlock language="typescript" text={value.text} fontSize={value.fontSize} margin={value.margin} />
                    </motion.div>
                ))}
            </motion.div>
        </header>
    );
}

字符串
CodeBlock.tsx

import { CSSProperties } from "react";
import Highlight from 'react-highlight';
import { motion } from 'framer-motion';
import './CodeBlock.scss';

interface CodeBlockProps {
    text: string;
    margin?: string;
    fontSize: number;
    language: "typescript" | "javascript" | "java" | "php";
}

/**
* @param text The text to be displayed as a code block
* @param margin Margin as top | right | bottom | left (in pixels)
* @param fontSize Display the text with the requested font size (in pixels)
* @param language The format (language to be used) for formatting
* @returns A code block that displays lines of code with color and formatting
**/

export function CodeBlock(props: CodeBlockProps): JSX.Element {

    const marginStyle: CSSProperties = props.margin ? { margin: props.margin } : {};
    const finalStyle: CSSProperties = { ...marginStyle, fontSize: props.fontSize };

    return (
        <motion.div className='codeblock' style={finalStyle}>
            <Highlight language={props.language}>
                {props.text}
            </Highlight>
        </motion.div>
    );
}

型
参见图片：Dev ModeProd Mode的数据库
我尝试使用动态导入，但没有成功。我试着修改我的css和分裂，但没有成功。
我猜这可能和静态渲染有关吧？不确定