Next.js 语法高亮使用 Prism 失败

如何解决Next.js 语法高亮使用 Prism 失败

我正在使用 next.js 并从 ghost API 获取帖子。 尝试使用棱镜添加代码突出显示并且突出显示有效 我在控制台中收到此错误：
**警告：React 检测到 Post 调用的 Hooks 的顺序发生了变化。如果不修复，这将导致错误和错误。 **,

post/[slug].tsx

import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import Prism from 'prismjs';

const { BLOG_URL,CONTENT_API_KEY } = process.env;

async function getPost(slug: string) {
  const res = await fetch(
    `${BLOG_URL}/ghost/api/v3/content/posts/slug/${slug}?key=${CONTENT_API_KEY}&fields=title,slug,html`,).then((res) => res.json());

  const posts = res.posts;

  return posts[0];
}

// Ghost CMS request
export const getStaticProps = async ({ params }) => {
  const post = await getPost(params.slug);
  return {
    props: { post },};
};

export const getStaticPaths = () => {
  // paths -> slugs which are allowed
  return {
    paths: [],fallback: true,};
};

type Post = {
  title: string;
  html: string;
  slug: string;
};

const Post: React.FC<{ post: Post }> = (props) => {
  const { post } = props;

  const router = useRouter();

  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }

  useEffect(() => {
    Prism.highlightAll();
  },[]);

  return (
    <>
      {/* <Link href="/">
        <a>Go back</a>
      </Link> */}
      <div className="hero">
        <div className="hero__container">
          <h1 className="hero__container--par">{post.title}</h1>
        </div>
      </div>
      <div
        className="blog"
        dangerouslySetInnerHTML={{ __html: post.html }}
      ></div>
    </>
  );
};

export default Post;