如何在新版Next.js App Router中嵌入Google Icons的CDN链接？

在Next.js 13+的App Router模式下，你可以直接在RootLayout的<html>标签内添加原生的<head>标签，用来嵌入Google Icons的CDN链接，具体修改如下：

修改后的完整代码 #

import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Netflix',
  description: 'A movie app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      {/* 在这里添加head标签，放入Google Icons的CDN */}
      <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
      </head>
      <body className={`${inter.className} bg-black `} >
        {children}
      </body>
    </html>
  )
}

说明 #

• 直接在<html>标签内、<body>标签前插入<head>标签即可，Next.js会自动合并metadata里的内容和你手动添加的标签，不会产生冲突。
• 如果需要使用其他样式的Google Icons（比如Outlined、Round等），只需要修改href里的参数，例如：
  • Material Icons Outlined: https://fonts.googleapis.com/icon?family=Material+Icons+Outlined
  • Material Icons Round: https://fonts.googleapis.com/icon?family=Material+Icons+Round

添加完成后，你就可以在组件里直接使用Google Icons了，示例代码：

<span className="material-icons">home</span>

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