Como usar next.js con styled components 馃拝

Instalaremos next.js y styled-components, configuraremos el fichero _document de NextJS, a帽adiremos los estilos a una pagina y analizaremos posibles errores.

next.js
styled-components
Como usar next.js con styled components 馃拝
Alberto Cruz Luis Profile
3 min read

Table of Contents

  1. Instalamos next.js
  2. Instalamos styled-components
  3. Creamos el fichero _document.js
  4. A帽adimos styled-components a una pagina
  5. Posibles Errores

Instalamos next.js

El siguiente comando os creara un proyecto de nextjs de una manera sencilla.

npx create-next-app

Tras ejecutar este comando os pedira que le digais el nombre de vuestro proyecto. Le podeis poner app. Hecho esto nuestra app ya estara lista para poder ejecutarla.

Ademas si quereis configurar desde cero vuestra app de nextjs tambien lo podeis hacer instalando estas 3 dependencies y creando por vosotros mismos vuestro package.json

npm i react-dom react next

dependencias en el package.json

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^...",
    "react": "^...",
    "react-dom": "^..."
  }
}

Instalamos styled-components

Instala el paquete con npm. En este enlace tienes la documentaci贸n de styled components https://styled-components.com/

npm i styled-components

Creamos el fichero _document.js

El archivo _document es un archivo especial donde podemos poner todo lo relacionado con la cabecera html y m谩s cosas que se explican aqu铆. https://nextjs.org/docs/advanced-features/custom-document

import Document, {Html, Head, Main, NextScript} from 'next/document';
import {ServerStyleSheet} from 'styled-components';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhaceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);

      return {
        ...initialProps,
        locale: ctx.locale,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Usamos styled-components en una pagina

A continuaci贸n aplicaremos los estilos mediante styled-components a una p谩gina para probar su funcionamiento.

import styled from 'styled-components';

const Heading = styled.h1`
  font-size: 2rem;
  color: blue;
`;

const Home = () => {
  return (
    <Heading>
      Using styled-components in Next.js
    </Heading>
  );
}

export default Home;

Posibles Errores

Tras mi experiencia usando styled-components en mi pagina web .... he podido resolver varios errores que me gustaria que supierais.

  • Usa esta version "styled-components": "4.4.1" Hasta la fecha no he podido lograr que los estilos funcionen correctamente en produccion usando otra version.

  • No es necesario usar babel-plugin-styled-components para que los estilos funcionen correctamente

  • 驴No te cargan los estilos correctamente en el primer render de tu app tras ejecutarlo en produccion? Esto se puede deber a la version de styled-components que estes usando. Por lo cual usa la que te mencione anteriormente.

  • 驴Unos estilos funcionan bien y otros no? Este fallo se puede deber a un uso incorrecto de la sintaxis de styled components.

Ejemplo - Usando las props en Styled-Components

import styled from 'styled-components';

export const HeaderContainer = styled.div`
  ${(props) => props.activeSticky === false} {
    position: sticky;
    top: 0;
  }

refactorizaci贸n del c贸digo

import styled, {css} from 'styled-components';

export const HeaderContainer = styled.div`
  ${(props) => (props.activeSticky === false) && css`
    position: sticky;
    top: 0;
  }