Next12迁移至Next13 App目录：link标签放置位置咨询

在Next.js 13的App目录架构下，你有两种可行的方式处理全局标签，以下是具体实现：

方式一：使用Metadata API（推荐） #

这是App目录原生支持的方案，更贴合新版本的设计逻辑，只需在根目录的app/layout.js（或layout.tsx）中导出metadata对象，将原标签转化为对应配置即可：

import './globals.css';

export const metadata = {
  links: [
    // 静态CSS文件
    {
      rel: 'stylesheet',
      href: `${process.env.NODE_ENV === 'production' ? process.env.NEXT_PUBLIC_BASEPATH ?? '' : ''}/css/fontawesome-all.min.css`
    },
    {
      rel: 'stylesheet',
      href: `${process.env.NODE_ENV === 'production' ? process.env.NEXT_PUBLIC_BASEPATH ?? '' : ''}/css/iconfont.css`
    },
    // 字体预连接
    { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
    { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'true' },
    // 字体样式表
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap'
    }
  ]
};

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

方式二：兼容原组件用法 #

如果你想沿用Next.js 12的写法，可继续使用next/head中的Head组件，只需将其放在根layout.js的<html>标签内部：

import './globals.css';
import Head from 'next/head';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <Head>
        {/* Static Css File  */}
        <link rel="stylesheet" href={`${process.env.NODE_ENV === 'production' ? process.env.NEXT_PUBLIC_BASEPATH ?? '' : ''}/css/fontawesome-all.min.css`} />
        <link rel="stylesheet" href={`${process.env.NODE_ENV === 'production' ? process.env.NEXT_PUBLIC_BASEPATH ?? '' : ''}/css/iconfont.css`} />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
      </Head>
      <body>{children}</body>
    </html>
  );
}

注意：优先推荐第一种Metadata API方案，它能更好地适配App目录的静态生成、增量静态再生等特性，是Next.js官方主推的实践方式。

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