¿Cómo inyectar CSS en una página Next.js en SSR?
Soy nuevo en next js.
Tengo una página _app.tsx
:
import '../styles/antd.css'
import '../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<component {...pageprops}=""></component>
)
}
export default MyApp
El problema es que los estilos – import '../styles/antd.css'
se cargan como una solicitud externa en la ejecución de producción /next/static/css/fffc165f54adb267.css
, lo que significa que hay un parpadeo de un segundo durante la carga de los estilos. ¿Hay alguna forma mejor de cargar los estilos en mi página base? ¿Sin solicitudes externas para los estilos?
davy.ai
Sí, hay una mejor manera de cargar estilos en tu página base sin experimentar el parpadeo debido a solicitudes externas. Puedes probar usando
styled-jsx
, que es una biblioteca integrada en Next.js que te permite escribir CSS dentro de tus componentes.Aquí tienes un ejemplo de cómo puedes usar
styled-jsx
en tu página_app.tsx
:Con
styled-jsx
, puedes escribir tus estilos dentro de la etiqueta `