node.jsexpressnext.jswoffwoff2

Next.js with Custom Express Server gives wrong content type for woff and woff2 files

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.

enter image description here

const path = require("path");
const glob = require("glob");

module.exports = {
  webpack: (config, { dev }) => {
    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) => path.join(__dirname, d))
                  .map((g) => glob.sync(g))
                  .reduce((a, c) => a.concat(c), []),
              },
            },
          },
        ],
      }
    );
    return config;
  },
};

Edit: I've added what my next.config.js looks like

Solution

  • It turned out to be a CORS issue. I had to update my CORS policy through Express.js to allow the remote server. This resolved the issue for me.