Search code examples
javascriptreactjsnext.jscdnnext.js13

Adding CDN in NextJs 13 project not working

When I want to add a CDN such as the Remix Icon one in my NextJs13 project, it doesn't work, I was researching and the way it is done is import, the "head" tag and then put the values ​​inside the Head component, but that's already It doesn't work and it was migrated to another way which I don't know how to do it, if someone knows great, thanks

Solution

  • Previously on Next Pages Router you could create a _document.tsx file. On that file you would import Head component & add link to your CDN.

    <Html>
    <Head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/nord.min.css" />
    </Head>
    <body>
        <Main />
        <NextScript />
    </body>
  </Html>

    But on new Next.js 13 App Router you can add the link to CDN on root layout.tsx file, like below

    <html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/nord.min.css" />
    </head>
    <body> {children} </body>
</html>