Morioh
Login
Iñigo Martínez

Iñigo Martínez

1 year ago

Cómo usar componentes con estilo en Next.js

Styled Components es una biblioteca popular para diseñar aplicaciones React. Permite a los desarrolladores escribir código CSS como si fuera un componente de JavaScript, lo que facilita la administración y el estilo de aplicaciones complejas. Styled Components también proporciona temas dinámicos, permite la creación de estilos reutilizables y simplifica el proceso de aplicar estilos a un componente en función de sus accesorios. En general, permite a los desarrolladores crear fácilmente interfaces web interactivas y visualmente sorprendentes con un mínimo esfuerzo.

En este tutorial, aprenderá a usar componentes con estilo en Next.js, el popular marco de renderizado del lado del servidor para React. Y verá algunas de las mejores prácticas para integrarlos en sus proyectos.

Primero necesitas instalar el paquete.

#yarn
yarn add styled-components

#npm
npm install styled-components

Después de instalar el paquete, puede usarlo fácilmente de la siguiente manera.

import styled from "styled-components";

const Title = styled.h1`
  color: red;
`;

export default () => (
  <div>
    <Title>My First Next.js Page</Title>
  </div>
);

Pero cuando quiera usarlo dentro de Next js, puede encontrarse con algunos problemas que quizás no entienda por qué actúa así. Por ejemplo, cuando actualiza la página, es posible que algunos de los elementos que creó con el componente con estilo no se representen correctamente y que estén vacíos. Para resolver este problema, debe proceder de la siguiente manera.

Agregue el complemento babel y el archivo .babelrc

Primero debe instalar el siguiente paquete.

yarn add -D babel-plugin-styled-components

Cree un archivo llamado .babelrc en la ruta raíz del proyecto. Puedes escribir este comando en tu terminal.

touch .babelrc

El contenido de este archivo debería verse así:

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

Si usó create-react-app, es mejor crear un archivo _document que reemplace su próximo documento.

import Document, { Head, Main, NextScript } from "next/document";
// Import styled components ServerStyleSheet
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet();
    // Step 2: Retrieve styles from components in the page
    const page = renderPage(
      (App) => (props) => sheet.collectStyles(<App {...props} />)
    );
    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement();
    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags };
  }
  render() {
    return (
      <html>
        <Head>
          <title>My page</title>
          {/* Step 5: Output the styles in the head  */}
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

¡Feliz codificación!

1.55 GEEK