Next.js, Style-Components e TypeScript

Iniciando um projeto Next.js, TypeScript e Configurando Styled-Components

Inicie um projeto com Next

npx create-next-app@latest

Na instalação vai aparecer as seguintes opções

What is your project named? my-app

Digite o nome para seu projeto, não utilize espaços no nome do projeto nem letras maiúscula.

Would you like to use TypeScript? No / Yes

Escolha "Yes" para o projeto iniciar com TypeScript Configurado.

Would you like to use ESLint? No / Yes

Escolha "Yes" para utilizar ESLint

Would you like to use Tailwind CSS? No / Yes

Escolha "No" para não utilizar Tailwind CSS(vamos utilizar styled-components)

Would you like to use src/ directory? No / Yes

Escolha "Yes" para o projeto vir configurado com a pasta src.

Would you like to use App Router? (recommended) No / Yes

Escolha "Yes" para usar App Router

Would you like to customize the default import alias (@/*)? No / Yes

Escolha sim para configurar a forma de import.

What import alias would you like configured? @/*

Pressione Enter para confirmar

Configurando o Styled-Components

Instale o style-components no seu projeti

npm install --save styled-components

Ative o Styled-Components no arquivo next.config.js

module.exports = {
compiler: {
styledComponents: true,
},
}

O seu arquivo next.config vai ficar dessa forma:

/** @type {import('next').NextConfig} */
const nextConfig = module.exports = {
compiler: {
  styledComponents: true,
},
}

module.exports = nextConfig

Crie o arquivo registry.tsx dentro da pasta app

'use client'

import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode
}) {  
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())

useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})

if (typeof window !== 'undefined') return <>{children}</>

return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
  {children}
</StyleSheetManager>
)
}

Envolva a "children" do arquivo layout.tsx que está dentro da pasta app com StyledComponentsRegistry

Depois desse passo o styled-components estará configurado.

import type { Metadata } from 'next'
import StyledComponentsRegistry from './registry'

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
  <body>
  <StyledComponentsRegistry>
    {children}
  </StyledComponentsRegistry>
  </body>
</html>
)
}

Configurando o global css

Passo 1: Crie uma pasta styles dentro da pasta src

Passo 2: Dentro da pasta styles que você acabou de criar inclua o arquivo globals.tsx

'use client'
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

html,
body {
max-width: 100vw;
}
`;

export default GlobalStyles;

Passo 3: Importe o components GlobalStyles dentro do arquivo layoyt.tsx que está dentro da pasta app

Seu arquivo ficará parecido com isso:

import type { Metadata } from 'next'
import StyledComponentsRegistry from './registry'
import GlobalStyles from '@/styles/globals'

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
  <body>
  <StyledComponentsRegistry>
    <GlobalStyles />
    {children}
  </StyledComponentsRegistry>
  </body>
</html>
)
}

Testando se o Styled-Components está funcionando

Dentro do arquivo page.tsx dentro da pasta app cole o código a seguir:

import { PageContainer } from "@/styles/page";

export default function Home() {
return (
<PageContainer>
  <div className="text-container">
    <h1>Parabéns o Styled-components está configurado</h1>
    <h2>Next.js com Styled-Components</h2>
  </div>
</PageContainer>
)
}

dentro da pasta styles crie o arquivo page.tsx e cole o código a seguir:

'use client'
import styled from 'styled-components'

export const PageContainer = styled.main`
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
align-items: center;
h1, h2 {
    color: white;
}

.text-container {

}

`;

rode o comando "npm run dev"

sua página principal ficará assim:

Imagem da home principal do projeto com um h1 e um h2

Observação adicional.

Você deve utilizar 'use client' no topo de todo arquivo de estilo do styled-components

Link do issue: GitHub issue do styled components

Referências usadas nesse tutorial.

NextJS

Autor: matheus

Data: 10/01/2024