Avoid the FOUT problem in NextJS apps by preloading the fonts

Question

I have a Next.JS application (not v13 yet!) and I am encountering the dreaded FOUT (flash of unstyled text) problem. I understand that one of the solutions is to preload the fonts directly in the HTML <header> in the index.html. My problem is how do I do that considering that the index.html page is being created on build-time by Next? Where do I add the <link ...> tag?

Answer 1

Use next/head component as described in the docs: https://nextjs.org/docs/api-reference/next/head