如何让我的 NextJS 应用程序接受 otf 和 ttf 字体？

我正在使用 NextJS，当我构建我的应用程序时，我的控制台返回给我：

ModuleParseError：模块解析失败：意外字符 '' (1:0) 您可能需要适当的加载程序来处理此文件类型。

我想知道出了什么问题，因为我已经构建了自定义 webpack 的配置。

这是我的 next.config.js：

module.exports={ 
  exportPathMap: () => ({ 
      "/": {page: '/'}
  })
}

const config = { 
  cssModules: true,
  module:{ 
    rules:[ 
      {
        test:/\.(png|jpg|woff|svg|eot|ttf|woff2|otf)$/,
        loader:'url-loader?limit=8192&name=images/[name].[ext]'

        }
    ]
  }

}

// config.module.rules.push(

//   );

const   withCss =   require('@zeit/next-css');
const   withImages  =   require('next-images');
module.exports  =   withImages(withCss(config));

我尝试使用 css 来启动我的应用程序，该 CSS 精确说明了我的字体格式 vie 的性质format("opentype")没有它，但两者都会失败：

@font-face {
    font-family: Moonlight;
    src: url(../assets/choiceFonts/Moonlights_on_the_Beach.ttf);
}

@font-face {
    font-family: Nenuphar;
    src: url(../assets/choiceFonts/Nenuphar_of_Venus.otf) format("opentype");
}


@font-face {
    font-family: Prida;
    src: url(../assets/choiceFonts/Prida01.otf) format("opentype");
}

任何提示都会很棒， 谢谢

对于仍然受此问题困扰的其他人

在 next 的最新版本中，您将所有静态资源存储在/public位于项目根目录的目录。在该目录中，将所有字体文件存储在一个目录中/fonts.

Then:

@font-face {
  font-family: 'font-name';
  src: url('/fonts/font-name.ttf'); // pattern: /directoryName/file.extension
 }

/* In your css file where you want to use the font */
.element { 
 font-family: 'font-name';
}