Next.js Full stack: arquitetura de componentes Front-end

Começando as bases do projeto - Apresentação

Olá, pessoas. Eu sou Mario Souto e sejam muito bem vindos a esse curso, que é uma parceria do Dev Soutinho, eu, diretamente do meu canal do YouTube, com a Alura, para trazer a você um conteúdo de Next.js Full Stack.

A ideia desse curso é literalmente criar um projeto juntos, esse projeto que você está vendo no Figma, e que inclusive também vai virar parte do meu portfólio. A ideia é construirmos um tema.

Esse projeto foi todo pensado para você conseguir customizar do jeito que você quiser e dar a sua cara para ele. Mas o mais importante é a quantidade de conceitos de front-end e até de back-end que vamos passar ao longo da criação.

Esse é o primeiro curso, onde vamos focar bastante na parte dos componentes como um todo: quais são os componentes principais, quais informações vamos extrair do Figma, o que é importante pensar como front na base do projeto para ir adicionando complexidade e cada vez mais coisas que você vai descobrindo ao longo dos próximos passos.

Nessa jornada, eu garanto que nesse primeiro curso você vai aprender a ler o Figma de verdade, a entender o que são essas informações de texto no lado direito da tela, como aproveitar a parte das cores e outras coisas que temos, e o mais importante: como melhorar a sua comunicação com o pessoal de design da sua empresa, como trabalhar em conjunto com eles.

Vamos também abordar conceitos do que é aquela ideia de design system, que é algo que a sua empresa pode não ter, mas eu tenho certeza que saber os conceitos vai te ajudar a trabalhar melhor no seu dia a dia.

Ficou empolgado? Então clica para começar o curso e vamos aprender juntos.

Começando as bases do projeto - Design Tokens no Figma

No primeiro vídeo eu falei para você que vamos desenvolver esse layout em conjunto. Eu vou limpar a tela para você ver melhor. É esse projeto lindo que vamos construir e que você poderá usar como seu próprio portfólio.

Você vai colocar as suas coisas nesse projeto, poderá colocar a sua última troca de emprego, o último projeto em que você trabalhou. A ideia é servir como se fosse uma timeline pessoal sua. É essa a minha meta.

Mas esse projeto tem várias formas de ser feito. Nós poderíamos tranquilamente começar a escrevê-lo totalmente pensando no visual. Nós escrevemos o CSS relativo a ele e dá tudo certo, tudo funciona.

Porém, eu quero abordar com você uma técnica mais voltada para o que as empresas grandes fazem, o que o pessoal faz nos design systems. Quando eu falo de design system, eu estou falando de várias empresas. Eu consigo citar de cabeça o Pinterest, que eu gosto bastante. Curto muito o trabalho deles, eles mandam muito bem no Gestalt, que é o design system que eles têm.

E a parte legal é que dentro da parte de design system deles você vê que tem uma documentação muito grande. Eles têm toda a fundamentação de acessibilidade deles, quais são os princípios, a paleta de cores que eles trabalham, quais são os tipos de coisas a que eles dão suporte.

O pessoal do Pinterest trabalhou muito bem nisso, mas um ponto que eu quero mostrar para vocês é a parte dos building blocks, que começa por um componente chamado Box. Você pode me perguntar onde eu quero chegar com isso. É o seguinte: se você for descendo na documentação deles, você verá que para qualquer coisa que você vá fazer, eles têm boas práticas, do’s and dont’s, coisas que você pode fazer ou não.

Mas eles têm componentes-base que ajudam a galera a criar as coisas. Eles têm, por exemplo, como esse componente funciona para Web, para iOs, para Android, se eles têm o exemplo para o Figma.

Se eu clicar no “Ready” para web, repara que eles têm um exemplo de como você deveria usar esse componente. Então eles vão dando exemplos de como você pode construir as suas interfaces usando esse princípio do pessoal do Pinterest.

Ele vai desde a parte mais base, que é a parte da caixa, até a parte do ícone. Tem um componente para trabalhar com ícone, e eles tentam manter a API parecida, então eles tentam ter um jeito fácil de trabalhar. Tem o nome do ícone na hora que você passa como componente, tem a parte de label de acessibilidade.

Outro item que eu gosto bastante é a parte de botão. Eles já têm pré-definido qual é o botão que eles têm, qual é o efeito que acontece quando clicamos nesse botão, é tudo documentado, padronizado, e eles tentam manter uma consistência entre diversas plataformas.

Então quando pensamos a nível de design system, basicamente o pessoal de design cria a parte visual, mas o que eles estão criando não é puramente visual. É um visual que estará integrado com a nossa parte do código, que deve ter a ver com o que estamos programando e deve estar em sincronia.

De certa forma, é muito importante que o que tenhamos no design seja um contrato para o que temos na interface, e que quem vá usar, independente de onde vá usar, consiga usar baseado nos mesmos princípios.

Tudo bem que a linguagem muda, mas o ideal é que se você tem o componente box, que recebe uma propriedade padding e faz o comportamento de padding, você deveria ter isso em todas as plataformas em que você está dispondo esse componente.

No nosso caso, não vamos chegar a fazer React Native e outras coisas assim. Você pode fazer, e inclusive eu recomendo que você tente fazer com o que estamos passando, mas inicialmente nós estaremos mais voltados para a web.

A ideia é ser um Next.js Full Stack, onde vamos construir essa timeline, você vai deixá-la com a sua cara e vai aprender a construir as partes dos building blocks, quais são os componentes primordiais que toda aplicação Front-end teria, e você pode usar como base para construir tanto um design system como o Gestalt ou vários outros, como temos na lista “Awesome Design Systems” no GitHub.

No próximo vídeo vamos começar criando o código inicial do nosso projeto, começando a criar o primeiro componente que eu acho que é crucial para termos, e falar de alguns problemas que temos trabalhando com CSS na web e outras coisas. Vai ser bem legal, então vejo você no próximo vídeo. Até daqui a pouco.

Começando as bases do projeto - Tema e o componente Box

Chegou a hora de colocarmos a mão na massa, como eu prometi no último vídeo, então missão dada é missão cumprida.

Eu já criei uma pasta no meu desktop chamada “01-fullstack.nextjs”. Eu vou arrastar essa pasta para o meu VS Code. Você pode abrir o seu VS Code, e a minha ideia é ter uma pasta que vou usar de base. Vou até deixá-la no meio, porque de um lado eu tenho o navegador e do outro o Figma.

No VS Code vou abrir meu terminal e dar um zoom para ficar melhor para quem está assistindo, talvez você esteja assistindo do seu celular. Eu vou começar a criar a parte base do nosso projeto, o scaffolding mesmo.

Se você me acompanha, você deve ter visto várias vezes, mas eu acho importante seguirmos, porque vamos criar um projeto com o Next.js. Eu elogio bastante o quão simples é criar um projeto com Next.js, o que precisa colocar e tudo mais. Então eu vou seguir em cima da base que ele nos dá.

Então vou começar com yarn init –y. Lembrando que eu estou usando o Yarn, mas você pode usar o NPM, é só converter todos os comandos que eu estou usando. Via NPM seria também npm init –y, para criar o “package.json” para nós.

Logo na sequência, eu vou fazer yarn add react react-dom next. Isso seria o npm install, para você que está usando NPM. Vou adicionar essa versão base.

Lembrando, vamos usar TypeScript por vários fatores de documentação e outras coisas, e você pode pegar o conteúdo desse curso e aplicar um StoryBook nele, que é um curso que já tem na Alura também e que você pode aproveitar, inclusive, o curso é com a minha pessoa.

Criamos, e agora vamos fazer npx gitignore node, eu quero ter um arquivo “gitignore” para projetos Node.

Outra coisa que eu quero também é ter um arquivo “editorconfig”. Eu quero ter um arquivo e eu vou especificar que eu quero que a indentação seja de dois espaços e que ele sempre insira uma linha no final do arquivo para ficar bonito na hora em que abrirmos os pull requests no GitHub. Tudo isso é setup.

Inclusive, vamos fazer um git init para inicializarmos o repositório. Eu quero ter o máximo de coisas que vamos escrevendo para você ficar acostumado com esse passo a passo. Isso é só a base do projeto.

E como ele é um projeto Next, ele tem que ter a pasta “pages”. Dentro dessa pasta, outra coisa que precisaremos ter é um arquivo que represente a nossa index do projeto, então vou adicionar um arquivo chamado “index.tsx”, e dentro vou fazer export default function HomeScreen() {}.

E vamos fazer um return de uma div, só para começarmos, com o texto “Oi”. Eu quero começar só com isso para iniciarmos o projeto tendo essa base mais tranquila.

Vamos fazer git status. Eu vou tentar rodar o comando para inicializar o projeto agora: ”scripts”: { “start”: “next start”, “dev”: “next dev”, “build”: “next build” }.

Isso que eu estou criando é só a casca básica para começarmos a ter o projeto de fato. Vou rodar agora um yarn dev. Ele pede para adicionarmos mais algumas coisas para podermos usar o TypeScript.

Adicionamos, vamos ver o arquivo agora. Ele ainda está reclamando do react, mas acho que ele vai resolver agora. Vamos fazer yarn dev.

Ele criou o arquivo “tsconfig.json” para nós. Dentro do “index.js” ele parou de reclamar, e agora ele está reclamando no “tsconfig.json”. Ele falou que passou o “resolveJsonModule”. Então temos que colocar esse node. Faltou uma configuração, que é “resolveJsonModule”, seguido de ”moduleResolution”: “node”.

Eu vou salvar, e em teoria ele para de reclamar. Então adicionamos o setup base para criar o nosso projeto. Se eu abrir o meu navegador em “localhost:3000”, ele tem o nosso “Oi”.

Então qual é a minha ideia agora? Uma vez que temos esse “Oi” aparecendo, vamos começar a estruturar pensando num projeto estilo Gestalt, pensando nessa ideia de design system.

Lembra que não estaremos criando um design system, mas vamos aplicar os conceitos na prática. Porque para criar um design system de verdade, você precisa estar alinhado com o pessoal de design, tem muito mais pesquisa e tem uma série de coisas. No nosso caso a ideia é te dar uma base para caso você venha trabalhar com algum design system no futuro.

Voltando para o projeto, eu agora vou criar uma pasta source, e dentro dela vou criar duas coisas: vou criar um arquivo relacionado ao tema da nossa aplicação, então teremos uma pasta tema contendo o arquivo “theme.ts”, onde eu terei basicamente um objeto que vai representar tudo que é comum para a nossa aplicação.

E quando eu falo de tudo que é comum, é toda essa parte que temos no lado direito no Figma, de texto, cores, toda a parte de design tokens. Ele vai ter em código a representação de tudo que temos dentro dessa área do Figma, que representa os tamanhos de texto, os ícones. Tudo isso nós vamos agrupar nessa parte do tema de configuração.

Então o código será const theme = {}. Inicialmente, eu vou colocar só a fonte que vamos usar, então vou colocar typography: { fontFamily: ‘”Open Sans”, sans-serif”’ }. O copilot está me ajudando, eu vou desabilitar porque senão ele vai deixar você que está vendo o vídeo meio confuso.

Temos o const, e agora eu vou fazer um export disso: export default theme;. Está funcionando bem agora.

Uma vez que temos esse tema, pode não parecer nada, mas já estamos começando a estruturar o nosso projeto com isso. O próximo passo de estrutura será ter esse componente box. Então eu vou na pasta “src” e vou criar a pasta de “componentes”, e dentro dela vou criar o arquivo “Box.tsx”.

Nesse arquivo vamos fazer export default function Box() {}. O box pode ser qualquer tag que nós quisermos. Então eu vou abrir o return e vou dizer que o que vai sair dele é uma tag que terá estilos genéricos alinhados com uma folha de estilo que vamos passar. Então eu estou tentando já passar uma ideia de como isso vai ficar organizado. E o que sai dele é o children que vamos receber. Vamos receber alguma coisa e vamos retornar essa coisa.

Nas props dele eu vou dizer que ele vai receber o children, vai receber o “styleSheet” também, que serão basicamente as propriedades de estilo que nós queremos que ele retorne na tela para nós.

E junto com isso, eu vou dizer que a tag dele será a tag que recebermos ou uma div qualquer. E essa tag também virá como prop.

Então eu estou desenhando um componente muito genérico, que inicialmente parece que não faz nada, mas você já vai ver que ele faz muita coisa.

Com essa base que temos, agora eu posso entrar na nossa pasta “pages”, no “index.js”, e trazer esse Box. Trazendo esse box, só fazendo o ajuste dele, eu posso fazer o import dele. Ele volta uma pasta, sai de “pages” e vai para a pasta “src” e navega lá dentro.

Ele falou que está faltando algumas propriedades. Faltou passar o “styleSheet” e mais algumas coisas. Então eu vou passar o “styleSheet”, que inicialmente é um objeto genérico e eu vou estruturá-lo com vocês agora. Dentro dele não vamos receber coisas genéricas. Temos que ter um motivo para as coisas que recebemos. Então vou dizer que temos uma interface, que será o interface BoxProps.

Nesse BoxProps teremos o children, que será children: React.ReactNode;. Também faço o import do React no começo, para termos acesso a ele: import React from ‘react’;.

Essas propriedades do box eu coloco no final da linha, para ficar alinhado. A tag será qualquer string que recebermos. O “styleSheet” é uma propriedade que vai receber uma interface. E o que isso quer dizer? Nós teremos um contrato: você só pode passar essas coisas.

E como isso vai funcionar? Eu vou passar o “styleSheet” no começo do arquivo: interface StyleSheet {}. No nosso tema, acabamos de criar o “fontFamily”. Então a primeira coisa que o nosso box poderá receber será o “fontFamily”, que será uma string: fontFamily: string.

Uma vez que temos esse “fontFamily” como string, podemos voltar na nossa página, apertar “Cmd + Barra”, ou “Ctrl + Barra”, dependendo do que você estiver usando, e repara que ele já mostra que podemos passar essa propriedade.

Então estamos criando um atalho para fazer as coisas funcionarem. E eu vou passar fontFamily: theme.typography.fontFamily.

Repara que o tag deu errado, ele esperava receber alguma coisa de elemento. Eu vou inicialmente colocar tag: any;. Vamos resolver esse any depois, só para ele parar de reclamar inicialmente. Outra coisa: na tag eu vou passar que a tag será main: tag=”main”. Agora fica tudo certo.

O que nós temos agora? Nós fomos criando vários arquivos. Tínhamos aquela home inicial que não fazia nada. Agora temos esse box que recebe a tag main. Então se eu for no navegador e der um inspect, repare que ele tem a tag que estamos trabalhando, exatamente a tag main que estamos trabalhando.

Se formos entrar agora, temos o “styleSheet”. Quando olhamos o valor dele, vemos que ele tentou aplicar o fontFamily: ‘”Open Sans”, sans-serif”’. Tem um sinal a mais que eu posso remover no nosso tema, para tirar um bug que eu coloquei de propósito. Repara que a fonte está com serifa, e quando tiro o sinal que tinha a mais e salvo ela vira uma fonte sem serifa. Então ele está pegando a fonte que nós especificamos.

E mais importante: o nosso box é basicamente uma casca para escrevermos qualquer tag. A vantagem é que você não precisa escrever um CSS. Basta estarmos aplicando os estilos genericamente, diretamente nesse pedaço da interface, muito próximo com o que outras tecnologias mais modernas que nós temos fazem.

No front é muito comum hoje em dia vermos, por exemplo, a popularidade do Tailwind CSS, que é uma tecnologia que ascendeu bastante. E boa parte da ideia dele vem de definir os estilos diretamente nas tags que você está trabalhando.

Então essa estrutura que nós montamos é justamente para ter essa base para conseguirmos trabalhar. Já temos a casca do nosso projeto, e teremos todo o nosso projeto configurável a partir desse tema. Todas as nossas cores, tipografias, todas as coisas que temos para falar virão baseados nesse arquivo de tema e serão o setup inicial, a casca do nosso projeto.

Para esse vídeo é só. Ainda faremos mais alguns ajustes e configurações que são importantes para vários projetos em que você for trabalhar no seu dia a dia. Mas acho que inicialmente com isso já dá para começar e dar o primeiro passo.

Eu vou parando por aqui, e nos vemos num próximo vídeo. Então até o próximo vídeo, onde vamos terminar essas configurações, traremos configuração em nível de diferentes breakpoints, como lidar com tela pequena e com tela grande. Tudo isso no próximo vídeo, então vejo você daqui a pouco.

Sobre o curso Next.js Full stack: arquitetura de componentes Front-end

O curso Next.js Full stack: arquitetura de componentes Front-end possui 226 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de Next.JS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Começando as bases do projeto
• Estilização e componentes
• Ícones, imagens e cores
• Componentes de interação
• Dicas finais e próximos passos