Add external style and script file via new meta data options

Question

I need to add the following external css and scripts in my NextJS app (NextJS version 13.4.13).

Style
https://company.com/statics/1/package/dist/1/styles/dls.min.css

Script
https://company.com/statics/1/package/dist/1/scripts/dls.min.js

How can I add it?

I tried the following.

File path: app-name/src/app/layout.js

import 'https://company.com/statics/1/package/dist/1/styles/dls.min.css'
import './globals.css'
import Script from "next/script";


export const metadata = {
  title: 'title',
  description: 'desc',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script type="text/javascript" src="https://company.com/statics/1/package/dist/1/scripts/dls.min.js" />
      </body>
    </html>
  )
}

But it throws error:

Failed to compile:

https://company.com/statics/1/package/dist/1/styles/dls.min.css Module build failed: UnhandledSchemeError: Reading from "https://company.com/statics/1/package/dist/1/styles/dls.min.css" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "https:" URIs. Import trace for requested module: https://company.com/statics/1/package/dist/1/styles/dls.min.css ./src/app/layout.js

could you use <Head> tags from Next and then just use a standard <link> tag in there? — Jonah C Rowlinson
– Jonah C Rowlinson, Commented Aug 9, 2023 at 11:12
@JonahCRowlinson The error is gone but the styles not loading. Believe Head no longer fits for this purpose in NExtJS version 13.4 and above. — karvai
– karvai, Commented Aug 9, 2023 at 11:24
ah - seems NextJS docs say to not use a CDN and all external files should be downloaded, as can be seen here, in the Good to know box. — Jonah C Rowlinson
– Jonah C Rowlinson, Commented Aug 9, 2023 at 11:27

Jonah C Rowlinson · Accepted Answer · 2023-08-09 11:46:34Z

1

NextJS suggest not to include CSS from an external CDN, and instead all external files should be downloaded into the project source.

Good to know: External stylesheets must be directly imported from an npm package or downloaded and colocated with your codebase. You cannot use .

Source

answered Aug 9, 2023 at 11:46

Jonah C Rowlinson

5074 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add external style and script file via new meta data options

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related