Estoy trabajando en Reactjs y estoy usando el marco "Nextjs", estoy trabajando en un proyecto donde pongo mi código "Head" (incluye css) en "document.js", todo funciona bien, pero cada vez que abro "detalles del blog" página que existe en la "subcarpeta" ("páginas / fr"), entonces "css" no funciona después de la actualización de la página, en otras palabras, "css" no funciona después de la "actualización de la página" en la sección "blg_detail". ¿Cómo puedo arreglar esto? Aquí es mi código actual "_document.js"
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/bootstrap@5.0.2/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> ) }No puede importar css desde document.js . Tendrás que hacerlo desde pages/_app.js .
Debido a la naturaleza global de las hojas de estilo y para evitar conflictos, solo puede importarlas dentro de pages/_app.js.