CSS not working inside subfolder in reactjs-CodePudding

I am working in Reactjs and i am using "Nextjs" framework,I am working in project Where i put my "Head" (include css ) code in "document.js",Everything is working fine but whenever i open "blog detail" page which exist in "subfolder"("pages/fr") then "css" not working after page refresh, in other words "css" is not working after "page refresh" in "blg_detail" section How can i fix this, Here is my current "_document.js" code

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
                <link
                  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
                  rel="stylesheet"
                  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
                  crossOrigin="anonymous"
                />
                <link rel="stylesheet" type="text/css" href="css/style.css" />
                <link rel="stylesheet" type="text/css" href="css/responsive.css" />

                <link
                  href="https://fonts.googleapis.com/css2?family=Dancing Script:wght@400;500;600;700&family=Darker Grotesque:wght@300;400&family=Poppins:wght@100;300;400;500;700&display=swap"
                  rel="stylesheet"
                />
      </Head>
      <body>
        <Main />
        <NextScript />

  
      </body>
    </Html>
  )
}

CodePudding user response：

You can't import css from document.js. You'll have to do so from pages/_app.js.

Nextjs docs

Due to the global nature of stylesheets, and to avoid conflicts, you may only import them inside pages/_app.js.