Next.js 13应用中如何在头部添加CSS link标签？

Next 13 分为 App Router 和 Pages Router 两种路由模式，不同模式下的CSS引入方式有所区别，以下是对应场景的解决方案：

一、App Router 模式（app目录） #

1. 全局CSS文件
   只能在根布局文件（app/layout.js/layout.tsx）的最顶部导入，这是App Router规定的唯一全局CSS入口，导入后样式会作用于所有路由页面：

   // app/layout.js
   import './global.css'; // 必须放在文件最顶部
   
   export default function RootLayout({ children }) {
     return (
       <html lang="zh-CN">
         <body>{children}</body>
       </html>
     );
   }
   

2. 局部组件CSS
   推荐使用 CSS Modules 实现组件级样式隔离，避免全局样式污染：

   • 创建命名为 [组件名].module.css 的文件，比如 Button.module.css
   • 在组件中导入并使用：

     // app/components/Button.js
     import styles from './Button.module.css';
     
     export default function Button() {
       return <button className={styles.btn}>点击按钮</button>;
     }
     

   注：App Router 不支持在非根布局的组件/子布局中导入普通全局CSS，若需局部生效的非模块化CSS，建议改用CSS Modules。

二、Pages Router 模式（pages目录） #

1. 全局CSS文件
   在 pages/_app.js/_app.tsx 中导入，样式会全局作用于所有页面：

   // pages/_app.js
   import '../styles/global.css';
   
   export default function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />;
   }
   

2. 通过自定义_document.js引入外部CSS
   若需在HTML的<head>中手动添加CSS链接，需在 pages/_document.js 中配置（注意：_document.js 仅能放在pages目录下，app目录不支持）：

   • 先将CSS文件放在 public 目录下，比如 public/styles/custom.css
   • 在 pages/_document.js 中添加链接：

     import Document, { Html, Head, Main, NextScript } from 'next/document';
     
     class MyDocument extends Document {
       render() {
         return (
           <Html>
             <Head>
               <link rel="stylesheet" href="/styles/custom.css" />
             </Head>
             <body>
               <Main />
               <NextScript />
             </body>
           </Html>
         );
       }
     }
     
     export default MyDocument;
     

3. 局部组件CSS
   同样推荐使用CSS Modules，用法与App Router一致。

关于你之前遇到的问题说明 #

• 在Head组件中添加CSS无效：App Router已弃用next/head，改用根布局导入全局CSS；Pages Router中页面组件内的Head仅作用于当前页面，且可能存在路由切换时的加载问题，全局CSS应放在_app.js或_document.js中。
• app目录下创建_document.js无效：_document.js是Pages Router专属文件，App Router不支持该文件。

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