As descobertas que faço e coisas que aprendo

Olá,

Neste post irei detalhar como utilizar o Next.js com o Styled Components, basicamente você irá trabalhar com 3 arquivos _document, _app e .babelrc.

Se quiser ver a configuração funcionando:

Considerando que você já está utilizando o Next.js e possui ele instalado, rode um dos seguintes comandos em seu projeto para adicionar o styled-components:

npm i styled-components
----- ou ------
yarn add styled-components

E precisaremos do pacote babel-plugin-styled-components para rodarmos o Styled Components no servidor (SSR)

npm i babel-plugin-styled-components -D
----- ou -----
yarn add babel-plugin-styled-components -D

Dentro de sua pasta 'pages' que faz parte da criação do Next.js para construção de página crie 2 arquivos _document.js e _app.js, eles são utilizados normalmente para injetar e configurar dependências globais dentro do Next.js.

Dentro de seu _document.js aplique o código:

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

E em seu _app.js:

import App from 'next/app'

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

Agora no arquivo .babelrc (caso não exista, crie ele) na raiz de seu projeto adicione a configuração informando que deseja usar o Styled Components com SSR:

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

Essa é a configuração básica inicial para ter o Styled Components junto com o Next.js, você pode extender outras configurações do plugin babel ou adicionar mais elementos em seu _app ou _document, como um Theme Provider por exemplo.

You've successfully subscribed to Segredo Dev
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Your link has expired
Success! Your account is fully activated, you now have access to all content.