next.jsでフォントの読み込みがおかしい時の処方箋

node.jsでnpmパッケージとかのフォントファイルを読み込んでくれない(´・ω・`；)
そんなときの処方箋メモ。

ディレクトリ構成は以下がベースです。
With Firebase Hosting and Typescript example

1. staticフォルダにフォントファイルだけ手動設置

• dev環境の場合は/src/app/staticに設置
• serve & deploy環境は/src/public/staticに設置するか、package.json(一部抜粋)を以下のように調整
  • dev環境のstaticフォルダと共通じゃないので泣く泣く重複設置。他にいい方法あったら教えてください(´・ω・`；)

package.json

{
  "scripts": {
-    "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
+    "static-to-public": "cpx \"src/app/static/**/*.*\" \"src/public/static\" -C",
+    "build-public": "npm run static-to-public && cpx \"src/public/**/*.*\" \"dist/public\" -C",
  },
}

2. フォントファイルの読み込み部分をコピペ＆調整(ファイルパスをフォントファイルを設置したパスに変更)して、適当な部分でimport。

以下、importサンプル。

sample.css

@font-face {
  font-family: 'sample';
  src: url("/static/fonts/sample/sample.eot") format("embedded-opentype"),
  font-weight: normal;
  font-style: normal;
}

sample.js

import "./sample.css"