NextJS 13.4.x本地字体加载时出现跳闪问题求助

问题现象 #

开发环境中，通过@next/font在public目录加载本地字体，浏览器未禁用缓存，但页面重载时字体会重复加载，出现明显的页面跳闪，字体优化完全失效。将Next.js及@next/font版本回退至13.1.6，并保留experimental: { appDir: true }配置后，字体加载恢复正常，无跳闪现象。

相关代码 #

src/app/layout.tsx #

import { FC, ReactElement } from 'react'

import { Metadata } from 'next'
import localFont from 'next/font/local'

import { mainTitle } from '@constants/staticData.consts'

import Footer from '@components/layouts/Footer'
import Header from '@components/layouts/Header'

import { IPropsWithChildren } from '@interfaces/common.types'

import '@styles/main.css'

export const metadata: Metadata = {
  title: mainTitle,
  description: 'Временное описание',
  icons: '/favicon.svg'
}

const moula = localFont({
  src: [
    {
      path: '../../public/assets/fonts/moula-regular.woff',
      weight: '400',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-regular.woff',
      weight: '400',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-semibold.woff2',
      weight: '600',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-semibold.woff',
      weight: '600',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-bold.woff',
      weight: '700',
      style: 'normal'
    },
    {
      path: '../../public/assets/fonts/moula-bold.woff',
      weight: '700',
      style: 'normal'
    }
  ],
  variable: '--font-moula'
})

const RootLayout: FC<IPropsWithChildren> = ({
  children
}): ReactElement => (
  <html lang='ru' className={ `${moula.variable}` }>
    <body className='font-moula text-large text-white bg-blue-960'>
      <Header />
      <main>{ children }</main>
      <Footer />
    </body>
  </html>
)

export default RootLayout

tailwind.config.js #

// ... //
fontFamily: {
        moula: [ 'var(--font-moula)', ...fontFamily.sans ]
      },
// ... //

后续处理 #

已提交该问题的bug报告，希望得到官方的问题确认或可行的解决方案。

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