如何在Next.js页面动态添加外部CSS且无警告？

• 方法一：通过自定义Document在服务端动态注入（推荐）
  利用页面的getServerSideProps传递CSS链接，在自定义Document中动态添加样式标签，完全符合Next.js规范，不会触发警告：

  1. 在页面的getServerSideProps中获取CSS链接，并将其存入请求上下文：

  export async function getServerSideProps(ctx) {
    // 从服务器获取CSS文件链接
    const cssUrl = await fetch('你的接口地址').then(res => res.text());
    // 将链接存入自定义上下文属性
    ctx.customCssUrl = cssUrl;
    return { props: { cssUrl } };
  }
  

  2. 自定义_document.js，在getInitialProps中读取上下文的CSS链接，渲染到页面头部：

  import Document, { Html, Head, Main, NextScript } from 'next/document';
  
  class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const initialProps = await Document.getInitialProps(ctx);
      // 从上下文获取页面传递的CSS链接
      const cssUrl = ctx.customCssUrl;
      return { ...initialProps, cssUrl };
    }
  
    render() {
      return (
        <Html>
          <Head>
            {this.props.cssUrl && <link rel="stylesheet" href={this.props.cssUrl} />}
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    }
  }
  
  export default MyDocument;
  

• 方法二：使用react-helmet-async替代next/head
  借助第三方库react-helmet-async处理动态头部内容，绕过Next.js对next/head的样式限制：

  1. 安装依赖：

  npm install react-helmet-async
  

  2. 在_app.js中添加HelmetProvider：

  import { HelmetProvider } from 'react-helmet-async';
  
  function MyApp({ Component, pageProps }) {
    return (
      <HelmetProvider>
        <Component {...pageProps} />
      </HelmetProvider>
    );
  }
  
  export default MyApp;
  

  3. 在页面组件中使用Helmet添加CSS链接：

  import { Helmet } from 'react-helmet-async';
  
  export default function DynamicPage({ cssUrl }) {
    return (
      <>
        <Helmet>
          <link rel="stylesheet" href={cssUrl} />
        </Helmet>
        {/* 页面动态内容 */}
      </>
    );
  }
  
  export async function getServerSideProps() {
    const cssUrl = await fetch('你的接口地址').then(res => res.text());
    return { props: { cssUrl } };
  }
  

• 方法三：客户端动态创建样式标签（不推荐用于严格SSR场景）
  通过useEffect在客户端动态生成link标签，缺点是服务端渲染时不会注入样式，可能导致页面加载时出现无样式闪烁：

  import { useEffect } from 'react';
  
  export default function DynamicPage({ cssUrl }) {
    useEffect(() => {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = cssUrl;
      document.head.appendChild(link);
  
      // 组件卸载时移除标签
      return () => document.head.removeChild(link);
    }, [cssUrl]);
  
    return <>{/* 页面动态内容 */}</>;
  }
  
  export async function getServerSideProps() {
    const cssUrl = await fetch('你的接口地址').then(res => res.text());
    return { props: { cssUrl } };
  }
  

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