Next.js 13 app目录下如何将CSS文件添加到页面头部？

问题根源 #

你遇到的两个问题本质是对 Next.js 13 App 目录的资源处理逻辑不熟悉：

• layout.js 里直接 import '/css/styles.css' 报错，是因为 Public 文件夹里的文件不属于项目源码模块，import 只能导入项目根目录/src 下的源码文件，Public 里的静态资源是通过 URL 访问的，不是模块导入。
• head.js 里加引入出现优先级警告，是因为 head.js 是页面级的头部配置，全局样式应该放在根 layout.js 中配置，避免页面级样式覆盖全局样式的优先级冲突。

解决方案 #

方案1：保留 CSS 在 Public 文件夹中（适合第三方静态 CSS）

直接在根 layout.js 中用 next/head 组件添加链接标签，利用 Public 文件夹的静态资源访问规则：

// app/layout.js
import Head from 'next/head';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <Head>
        {/* Public 文件夹下的资源直接用根路径访问 */}
        <link rel="stylesheet" href="/css/styles.css" />
      </Head>
      <body>{children}</body>
    </html>
  );
}

这样配置后，所有页面都会继承这个全局样式，也不会出现优先级警告。

方案2：将 CSS 移到 App 目录下（官方推荐方式）

如果你的 CSS 是自己编写的，更推荐把它移到 App 目录内（比如 app/css/styles.css），然后在 layout.js 中直接导入：

// app/layout.js
// 导入 App 目录下的 CSS 文件，Next.js 会自动处理全局样式
import './css/styles.css';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

这种方式符合 Next.js 13 的设计规范，还能支持 CSS Modules、Tailwind 等样式方案的集成。

关键知识点 #

• Public 文件夹是用来存放无需编译的静态资源（比如图片、字体、第三方现成的 CSS/JS），访问时直接用根路径（/xxx）即可，不需要 import。
• App 目录下的全局样式必须在根 layout.js 中导入或配置，不要放在页面级的 head.js 里，避免样式优先级冲突。

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