Solucionado
Preciso implementar na empresa aqui trabalho a renderização server side, ai vi que é comum usar o babel, mas queria entender um pouco mais sobre isso. Vi um post que não conseguimos renderizar o sytle-components server side ai daria pra colocar uma diretiva "use client" e ele renderiza no cliente. Resumo hehe: Tenho um projeto que utiliza styled components e queria usar o server side rendering
hoje, com a Alura e o Google Gemini
Oi, André, tudo bem?
Desculpe a demora em te responder!
A renderização server side (SSR - Server Side Rendering) é uma técnica amplamente utilizada para melhorar a performance e a experiência do usuário em aplicações web. No caso do Next.js, essa técnica é padrão e facilita bastante a implementação.
Podemos usar o styled-components, para renderização server side no Next.js. O Next.js possui suporte nativo para styled-components, o que significa que você pode criar e estilizar componentes utilizando essa biblioteca sem problemas, não sendo necessário configurar nada adicionalmente.
Para garantir a renderização server side, podemos utilizar o método getInitialProps nas páginas. Esse método é executado no servidor antes da renderização da página e permite buscar dados e passá-los como props para a página. Assim, a página é renderizada com os dados já disponíveis no servidor, o que melhora a performance e a experiência do usuário, pois evita que a renderização dependa de requisições adicionais no cliente.
Todavia, vale ressaltar que como é um assunto externo ao curso e que não tenho acesso ao cenário completo do projeto outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.