es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo inyectar CSS en una página Next.js en SSR?

01 Aug, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    import type { AppProps } from 'next/app' 

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <> 
      <style jsx="" global="">
        {`
          /* Agrega tus estilos globales aquí */
          @import url('../styles/antd.css');
          @import url('../styles/globals.css');
        `}
      </style>
      <component {...pageprops}=""></component> 

  )
}

export default MyApp

    Con styled-jsx, puedes escribir tus estilos dentro de la etiqueta `

Comments are closed.