Next.js + Styled Components, guia simples

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:

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

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

9
    try {
10
      ctx.renderPage = () =>
11
        originalRenderPage({
12
          enhanceApp: (App) => (props) =>
13
            sheet.collectStyles(<App {...props} />),
14
        })
15

16
      const initialProps = await Document.getInitialProps(ctx)
17
      return {
18
        ...initialProps,
19
        styles: (
20
          <>
21
            {initialProps.styles}
22
            {sheet.getStyleElement()}
23
          </>
24
        ),
25
      }
26
    } finally {
27
      sheet.seal()
28
    }
29
  }
30
}

E em seu _app.js:

1
import App from 'next/app'
2

3
export default class MyApp extends App {
4
  render() {
5
    const { Component, pageProps } = this.props
6
    return <Component {...pageProps} />
7
  }
8
}

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:

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

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.