Next.js 13中如何通过Metadata引入外部CSS链接？

方案一：使用Metadata配置引入外部CSS #

Next.js 13的Metadata支持通过links字段添加外部样式表链接，分为全局和页面级两种配置方式：

1. 全局配置（所有页面生效） #

在app/layout.js（或app/layout.tsx）中定义全局Metadata，添加外部CSS链接：

export const metadata = {
  links: [
    {
      rel: 'stylesheet',
      href: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap-grid.min.css',
    },
  ],
};

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

2. 页面级配置（仅当前页面生效） #

在单个页面组件（如app/page.js）中定义页面专属的Metadata：

export const metadata = {
  links: [
    {
      rel: 'stylesheet',
      href: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap-grid.min.css',
    },
  ],
};

export default function Page() {
  return <div>页面内容</div>;
}

方案二：客户端组件中使用next/head（兼容方案） #

如果你的组件是客户端组件（添加'use client'指令），可以继续使用next/head组件，Next.js 13保留了该组件的兼容支持：

'use client';
import Head from 'next/head';

export default function ClientPage() {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap-grid.min.css" />
      </Head>
      <div>客户端组件内容</div>
    </>
  );
}

注意事项 #

• Metadata配置仅在服务器组件中生效，客户端组件无法通过这种方式定义Metadata；
• 若需动态添加外部CSS（如根据条件加载），建议使用客户端组件结合next/head，或直接通过DOM操作创建link标签。

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