Nextjs next/font support incompatibility, thoughts?

1

Working on an app with nextjs, app router, I just added support for Google fonts via next/font support as suggested in the documentation. (I also have tailwind, but that’s beside the point here). I ended up with the following code in the application layout.js stub to load the google fonts that I use from the app:

import { Montserrat } from "next/font/google";

const montserrat = Montserrat({
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  subsets: ["latin"],
  display: "swap",
  fallback: ["Arial", "sans-serif"],
  variable: "--font-montserrat",
});

import Res, { metadata } from "./App_Layout.bs";
export default function Page(props) {
  return <Res {...props} fonts={[montserrat]} />;
}
export { metadata };

So I’m not saying I’m totally unhappy to have this in js, but obviously I’d prefer to keep the layout.js thin, and do the font loading fully in Rescript. But I cannot. There are two main reasons that I’ve observed:

  • If I move the import to anywhere else, for example it becomes part of App_Layout.bs, the import does not work. The google module will get imported as empty, and contain no fonts. This might be connected with the fact that I’m generating commonjs code with require in it, and while I would gladly go to es6 output, I had problems with it on Vercel recently, so I fell back to commonjs.

  • And this is the more serious one: even if I keep this code in layout.js, but I just change const montserrat to let montserrat, I get an error message: Font loader calls must be assigned to a const, this means whatever we do this won’t work with code generated by Rescript, at least not in the normal way.

Any thoughts? What is your best practice with next/font? Also, should we maybe tell the nextjs people that if they move on this path of “magic” further, requiring const and whatnot, they will essentially make nextjs incompatible with the Rescript ecosystem?