How to get hosting URL of a CSS file in NextJs

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.