如何在Next.js中同时使用styled-components与本地字体？

方案1：修复Babel配置（兼容Pages/ App Router） #

确保你的Babel配置完全保留Next.js默认预设，同时仅添加styled-components插件，不要修改或移除next/babel——这是Next.js内置功能（包括字体优化）的核心依赖：

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "displayName": true }]]
}

方案2：改用Next.js编译器配置（推荐Next.js 12+） #

新版本Next.js支持直接在next.config.js中配置styled-components，无需单独维护Babel配置文件，从根源避免与字体优化的冲突：

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig

验证本地字体配置正确性 #

确保字体导入和应用流程符合Next.js要求：

Pages Router 示例 #

// pages/_app.js
import localFont from 'next/font/local'

const customFont = localFont({
  src: '../fonts/CustomFont-Regular.woff2',
  variable: '--font-custom',
})

function MyApp({ Component, pageProps }) {
  return (
    <div className={customFont.variable}>
      <Component {...pageProps} />
    </div>
  )
}

export default MyApp

在styled-components中引用字体 #

import styled from 'styled-components'

const StyledParagraph = styled.p`
  font-family: var(--font-custom);
`

排查要点 #

• 绝对不要删除next/babel预设，否则会丢失Next.js内置的字体优化等核心功能
• 使用App Router时，务必在根布局app/layout.js中全局导入字体，避免重复加载
• 遇到缓存问题时，先执行npx next clean再重新构建项目

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