How to get hosting URL of a CSS file in NextJs

Question

I needed to host a CSS file and load it to an iFrame on the page. I have successfully used file-loader in a Preact project. But when I use it in NextJs, it does not work. It does not give any error. Actually, it gives a relative path of the CSS file, but when I try to open the URL by appending the host. NextJs return 404.

Below is the core code:

import globalCssUrl from '!!file-loader!../styles/globals.css'

function MyApp({ Component, pageProps }) {
  // !!! /_next/f13a8c0924aa251b14eabf89c510c544.css
  // but http://localhost:300/_next/f13a8c0924aa251b14eabf89c510c544.css gives 404
  console.log(globalCssUrl)

  return <Component {...pageProps} />
}

export default MyApp

I have also created a sample project at here: https://github.com/ZenUml/next-app-get-hosting-url-of-a-file

PS. why not just put it in public?
In this demo, it is a local CSS file. In my real use case, it is a CSS file from node_module. I needed to use package management to manage it.

Answer 1

I don't really understand what you are trying to do.

You have /public folder in your project, for showing purposes. So, you can put your .css file in /public directory and get access to it from external paths.

Imagine you have created /public/css/myCSS.css file.

In your _app.js you can add this CSS to your project import "../public/css/myCSS.css"; and you can access it from as {yourWebsite}/css/myCSS.css

P.S. if it's css from package, you create a page, import css file from package in variable and showing this css on page you created. More here