Next.js中如何为特定页面添加外部CSS链接？

下面提供两种可靠方案，既规避Next.js的警告，又能让CSS仅作用于目标页面：

方案一：手动动态加载/卸载CSS（推荐） #

通过useEffect钩子在页面组件挂载时创建并插入样式链接，卸载时移除，精准控制CSS的作用范围：

import { useEffect } from 'react';

export default function MyPage() {
  useEffect(() => {
    // 创建样式链接元素
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = 'https://cdn.jsdelivr.net/npm/lala.css';

    // 添加到页面头部
    document.head.appendChild(styleLink);

    // 组件销毁时移除链接，避免残留影响其他页面
    return () => {
      document.head.removeChild(styleLink);
    };
  }, []); // 空依赖数组确保只执行一次

  return (
    <div>
      {/* 你的页面内容 */}
    </div>
  );
}

这个方法完全绕开了Next.js对<Head>组件中添加样式的限制，且能保证CSS仅在当前页面加载时生效，切换页面后自动清除，不会全局污染。

方案二：禁用特定警告（不推荐） #

若只是想快速忽略警告，可在next.config.js中添加配置关闭该警告，但不建议长期使用——Next.js的警告是为了避免样式加载顺序问题：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 抑制指定警告
  eslint: {
    ignoreDuringBuilds: true,
  },
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  // 部分版本可通过此配置精准排除警告
  warnings: {
    exclude: ['no-stylesheets-in-head-component'],
  },
};

module.exports = nextConfig;

注意：此方案仅隐藏警告，CSS依然通过<Head>加载，存在引发样式加载异常的风险。

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