title: Next.js with Custom Express Server gives wrong content type for woff and woff2 files
body: <p>I have a Next.js app that I had to migrate to a new server on Digital Ocean that is now dedicated cpu, and suddenly my fonts are being served as Content-Type: text/html; charset=utf-8 and I'm receiving a 500 error. This was previously working on another server with no changes to the codebase. I've tried a bunch of things and I'm stumped here.</p>
  <p><a href="https://i.stack.imgur.com/OVZUC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OVZUC.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require("path");
  const glob = require("glob");
  
  module.exports = {
    webpack: (config, { dev }) =&gt; {
      config.module.rules.push(
        {
          test: /\.(css|scss)/,
          loader: "emit-file-loader",
          options: {
            name: "dist/[path][name].[ext]",
          },
        },
        {
          test: /\.css$/,
          use: ["babel-loader", "raw-loader", "postcss-loader"],
        },
        {
          test: /\.s(a|c)ss$/,
          use: [
            "babel-loader",
            "raw-loader",
            "postcss-loader",
            {
              loader: "sass-loader",
              options: {
                sassOptions: {
                  includePaths: ["styles", "node_modules"]
                    .map((d) =&gt; path.join(__dirname, d))
                    .map((g) =&gt; glob.sync(g))
                    .reduce((a, c) =&gt; a.concat(c), []),
                },
              },
            },
          ],
        }
      );
      return config;
    },
  };</code></pre>
  </div>
  </div>
  </p>
  <p>Edit: I've added what my next.config.js looks like</p>