如何在NextJS静态应用中高效嵌入GitHub Gist？

针对你遇到的React包在服务端生成阶段因访问浏览器特性报错的问题，以下是几种可靠的解决方案：

方法1：使用GitHub官方嵌入脚本（推荐） #

直接利用GitHub官方提供的嵌入脚本，通过React的useEffect钩子确保仅在客户端加载执行，避开服务端渲染的限制。

创建一个自定义组件GistEmbed：

import { useEffect, useRef } from 'react';

export default function GistEmbed({ gistId, file }) {
  const scriptRef = useRef(null);

  useEffect(() => {
    // 清理已存在的脚本，防止重复加载
    if (scriptRef.current) {
      scriptRef.current.remove();
    }

    // 生成嵌入脚本
    const script = document.createElement('script');
    const src = file 
      ? `https://gist.github.com/${gistId}.js?file=${file}` 
      : `https://gist.github.com/${gistId}.js`;
    script.src = src;
    script.async = true;
    scriptRef.current = script;
    document.body.appendChild(script);

    // 组件卸载时清理脚本
    return () => scriptRef.current?.remove();
  }, [gistId, file]);

  return <div className="gist-container" />;
}

使用方式：

// 在页面或组件中引入并使用
<GistEmbed gistId="你的GistID" file="可选的文件名.js" />

这种方式依赖GitHub官方脚本，兼容性好，无需额外维护第三方包，且完全避开服务端渲染的浏览器API限制。

方法2：动态导入React包并禁用服务端渲染 #

如果仍想使用如react-embed-gist这类第三方包，可以通过Next.js的next/dynamic实现客户端仅渲染，避免服务端执行时的报错。

示例代码：

import dynamic from 'next/dynamic';

// 动态导入组件，禁用服务端渲染
const ReactEmbedGist = dynamic(() => import('react-embed-gist'), {
  ssr: false,
  loading: () => <div>加载Gist中...</div> // 可选的加载占位
});

export default function MyPage() {
  return (
    <div>
      <ReactEmbedGist gist="你的GistID" file="目标文件名.js" />
    </div>
  );
}

ssr: false会让组件仅在浏览器环境中渲染，不会在服务端生成阶段执行，从而避免self或regeneratorRuntime未定义的错误。

方法3：手动获取Gist内容并自定义渲染 #

通过GitHub API获取Gist的原始内容，搭配代码高亮组件自行渲染，这种方式更灵活，可控性强，且无需加载外部脚本。

客户端请求版本 #

import { useState, useEffect } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function CustomGist({ gistId, fileName }) {
  const [code, setCode] = useState('');
  const [lang, setLang] = useState('javascript');

  useEffect(() => {
    const fetchGist = async () => {
      try {
        const res = await fetch(`https://api.github.com/gists/${gistId}`);
        const gist = await res.json();
        const targetFile = gist.files[fileName];
        if (targetFile) {
          setCode(targetFile.content);
          setLang(targetFile.language?.toLowerCase() || 'javascript');
        }
      } catch (err) {
        console.error('获取Gist失败:', err);
      }
    };

    fetchGist();
  }, [gistId, fileName]);

  return (
    <SyntaxHighlighter language={lang} style={tomorrow}>
      {code}
    </SyntaxHighlighter>
  );
}

静态生成阶段预获取版本（更适合静态网站） #

如果是静态生成的Next.js应用，可以在getStaticProps中提前获取Gist内容，避免客户端请求的API限制：

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function PreFetchedGist({ code, lang }) {
  return (
    <SyntaxHighlighter language={lang} style={tomorrow}>
      {code}
    </SyntaxHighlighter>
  );
}

export async function getStaticProps() {
  const gistId = '你的GistID';
  const fileName = '目标文件名.js';

  try {
    const res = await fetch(`https://api.github.com/gists/${gistId}`);
    const gist = await res.json();
    const targetFile = gist.files[fileName];
    return {
      props: {
        code: targetFile.content,
        lang: targetFile.language?.toLowerCase() || 'javascript'
      },
      revalidate: 86400 // 可选：24小时重新验证一次内容
    };
  } catch (err) {
    console.error('预获取Gist失败:', err);
    return {
      props: { code: '', lang: 'javascript' }
    };
  }
}

这种方式在构建时就把Gist内容嵌入静态页面，无需客户端额外请求，加载速度更快。

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