Criando Sistema de Imóveis com Next.js Reactjs Typescript Styled-Components [Part 3] - Add Styled-Components

1- Instalar a lib

yarn add styled-components @types/styled-components

2- Babel

yarn add babel-plugin-styled-components -D

3- Dentro de sua pasta 'pages'.Crie 2 arquivos _document.tsx e _app.tsx, eles são utilizados normalmente para injetar e configurar dependências globais dentro do Next.js.

4- Dentro de seu _document.tsx, Vamos estender :

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()
    }
  }
}

5- Dentro de seu _app.tsx aplique o código:

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

6- No arquivo .babelrc (caso não exista, crie ele) na raiz de seu projeto adicione::

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

Nota: displayName irá gerar nomes de classe que são mais fáceis de depurar (conterão também o nome do componente em vez de apenas hashes)

7- Angora podemos utilizar styled-components tranquilamente no index.tsx


import Head from 'next/head'
import styled from 'styled-components';

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

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Title>Criando Sistema de Imóveis com Next.js Reactjs Typescript Styled-Components [Part 3] - Configurando Styled-Components</Title>
      </main>

      <footer>

      </footer>
    </div>
  )
}