0

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?

Mike M
  • 4,879
  • 5
  • 38
  • 58

1 Answers1

1

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

badly
  • 81
  • 1
  • 5
  • But the question I am asking is .. WHERE to place things component? – Mike M Dec 21 '22 at 08:11
  • Next generates htmls for all files in pages/ folder. You can put it in the _app.tsx to have it on all pages, example [here](https://nextjs.org/docs/basic-features/layouts) . Or add it directly to index.tsx if you want it to be only on specific (index) page. – badly Jan 13 '23 at 08:26