I'm looking to incorporate external CSS and scripts into my NextJS app (NextJS version 13.4.13).
Here's what I need:
Style
https://company.com/statics/1/package/dist/1/styles/dls.min.cssScript
https://company.com/statics/1/package/dist/1/scripts/dls.min.jsWhat is the correct way to add them?
This is what I've attempted so far.
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>
)
}
However, it resulted in an error:
Failed to compile:
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: ./src/app/layout.js