如何在Next JS 15项目中引入public文件夹中的CSS文件？

可以不用把CSS文件移到app目录，有两种可行方案：

方案1：在Layout的中直接添加标签 #

App路由不再依赖next/head，你可以直接在layout.tsx的<html>标签内编写<head>，通过静态资源路径引入Public里的CSS：

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 路径以/开头，对应Public文件夹下的assets/css/styles.css */}
        <link rel="stylesheet" href="/assets/css/styles.css" />
      </head>
      <body>{children}</body>
    </html>
  );
}

注意路径必须以/开头，Next.js会自动映射到Public文件夹下的对应文件。

方案2：通过Metadata配置全局样式 #

如果你想通过Next.js的Metadata系统管理样式，可以在layout.tsx中导出metadata对象，添加stylesheet字段：

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  stylesheet: ["/assets/css/styles.css"],
};

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

这种方式Next.js会自动在页面头部注入对应的<link>标签，效果和手动添加一致。

为什么直接import会报错？ #

Public文件夹是静态资源目录，里面的文件通过URL直接访问，不属于ES模块范畴，因此不能用import语句引入——import仅适用于导入src目录、node_modules里的模块文件，或者app目录下的全局CSS（Next.js对app目录下的全局CSS有特殊处理）。

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