@next/next/google-font-preconnect
Require rel="preconnect" on <link> elements that point to fonts.gstatic.com
Also called nextjs/google-font-preconnect
Google Fonts serves its font files from fonts.gstatic.com. A <link> to that host is there to open the connection early, so the font download doesn't wait for DNS and TLS. Without rel="preconnect", the browser doesn't do that.
The rule looks at <link> elements with an href that starts with https://fonts.gstatic.com.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"@next/next/google-font-preconnect" = "error" # or "warn"Examples#
example.jsx1 problem
const hint = <linkrel="preconnect" is missing from Google Font. href="https://fonts.gstatic.com" />;example.jsx1 problem
const hint = <linkrel="preconnect" is missing from Google Font. rel="preload" href="https://fonts.gstatic.com" />;example.jsxNo problems
const hint = <link rel="preconnect" href="https://fonts.gstatic.com" />;