CODEWITHSUNDEEP
javascriptreactjsnext.jsnext.js13
tokdev0
tokdev0

Reputation: 13

Using external css links in Nextjs 13 Metadata

A new feature called Metadata (https://nextjs.org/docs/app/api-reference/functions/generate-metadata) came with Nextjs 13. Head.js seems to have been removed with this feature. By using the tag I have a css file that I need to import. I used to be able to import it like this:

import Head from 'next/head';

export default function Page() { 

return ( 
<> 
 <Head> 
{/* Example Url */}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap-grid.min.css" />
 </Head> 
</> 

)
}

But that doesn't work anymore. Can I do this using the new feature Metadata? Otherwise what should I do?

Upvotes: 0

Views: 1117

Answers (2)

Tran Van Hieu
Tran Van Hieu

Reputation: 131

From this document enter image description here link

You can try this way

// your page.jsx
import "@/public/assets/styles/imported_style.css"

// imported_style.css
@import url("replace with your url");

Upvotes: 0

Rafael Fernandes
Rafael Fernandes

Reputation: 339

I think you can just go on layout.ts and put this tag inside a head tag without using metadata generation, like this:

 export default function layout({
    children,
    }: {
      children: React.ReactNode
    }) {
    return (
        <>
          <html lang="en">
          <head>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap-grid.min.css" />
          </head>
            <body>
              {children}
            </body>
          </html>
        </>
      )

EDIT: The Nextjs don't recommend load stylesheet on head links and the new metadata don't enable this option but some users was using this approach: by huozhi

You can use ReactDOM.preload to preload the external changes if there're required for your page

import React from 'react-dom'

export default function page() { ReactDOM.preload( '/https://cdn.com/bootstrap.min.css', { as: 'stylesheet' }, ) }

That you can see here: https://github.com/vercel/next.js/issues/46785 And the error before the new metadata says more about this problem: no-stylesheets-in-head-component

Upvotes: 0

Related Questions