Google Font Preconnect

    Next.js automatically adds <link rel="preconnect" /> after version 12.0.1.

    Ensure preconnect is used with Google Fonts.

    Why This Error Occurred

    A preconnect resource hint was not used with a request to the Google Fonts domain. Adding preconnect is recommended to initiate an early connection to the origin.

    Possible Ways to Fix It

    Add rel="preconnect" to the Google Font domain <link> tag:

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    

    Note: a separate link with dns-prefetch can be used as a fallback for browsers that don't support preconnect although this is not required.

    Useful Links