Next.js 13中全局复用next/font的实现方案问询

AI 小北

2026-8-4

Next.js 13 next/font 全局复用及样式方案疑问

迁移背景

我正在将create-react-app项目迁移至Next.js 13，这是首次接触该框架。Next.js 13引入了next/font，为避免学习已过时的方法，打算将其纳入工作流。

需求

希望使用多款Google Fonts并在应用中动态复用，计划创建单独的fonts.js文件统一管理：

import { Roboto, Poppins } from '@next/font/google';

export const roboto = Roboto({
    weight: '400',
    subsets: ['latin'],
    variable: '--roboto-default'
});
export const poppins = Poppins({
    weight: '400',
    subsets: ['latin'],
    variable: '--poppins-default'
});

要求能在任意组件中引用，且修改常量名或参数时，所有关联组件同步变更。

过往经验

在create-react-app中，我使用Sass全局变量管理字体：在globalfonts.sass中定义$font01: 'Roboto, arial, sans-serif';，组件样式表导入该文件后通过font-family: $font01使用，修改变量即可全局生效。

当前问题

希望在Next.js 13中用next/font实现类似Sass全局变量的样式表全局复用功能。已在app目录下创建fonts.js并导入至layout.js，但因文档多针对即将淘汰的pages目录而陷入困惑。

目前可以在每个组件中导入fonts.js的常量并通过constname.className内联使用，但这会导致样式分散在样式表和内联引用中，不如Sass全局变量便于全局修改。

尝试操作

在app/layout.jsx中尝试如下代码，但Roboto字体未生效：

import { roboto, poppins } from './fonts';
import styles from './globals.scss'

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <head />
            <body className={roboto.className}>{children}</body>
        </html>
    )
}

若给每个组件添加className={roboto.className}，会失去全局统一修改的便捷性。