jemluz
commented
3 months ago Instalação do design system
Mais um template
Template manual NextJS (com CSS configurado)
Considerando o comentário anterior, abaixo estão instruções para configurar estilos no padrão Pages Router do Next.
Carregando os estilos globais com stitches no next
-
Você deve ter um arquivo para configurar o
globalCSS()do stitches -
E depois invocar essa configuração no ponto de entrada principal do next (arquivo
_app.tsx)
Habilitando CSS in JS with SSR (javascript desabilitado)
Por padrão o stitches não vem com SSR habilitado, e por ser um CSS in JS isso significa que se o javascript estiver desabilitado no client, o css tbm não irá carregar.
Para configurar o SSR no stitches, utilizamos a seguinte tag dentro do <head> do nosso html. Ela irá gerar todo texto CSS previamente.
{/* enable css with SSR (works with disabled js) */}
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }}/>Assim, mesmo quando o js estiver desabilitado, os estilos do stitches irão carregar normalmente
Criação do projeto em next
Olha, a essa altura do campeonato, o next mudou bastante... No curso o diego roda o comando
npx create-next-app@latest --use-npmpara criar o projeto.Padrão pages vs app router
Dias antes eu tentei criar um proj em next em sua ultima atualização e me enrolei toda (a mudança do pages para o app router é significativa e muda muita coisa), então ao invés de rodar o comando, eu só copiei os arquivos do commit para manter a versão antiga do next.
Documentação oficial do Next sobre Pages vs App Router
Por enquanto vou usar esse template abaixo para novos projetos Next, pelo menos até eu parar para estudar as novidades da ultima atualização.
Template manual NextJS (sem CSS configurado)
Bem aqui nesse commit