Next.JS: full stack com lambdas

Formulário no Next.JS - Apresentação

Olá, pessoas, eu sou Mario Souto e seja bem-vindo a esse curso especial aqui, a nossa formação Next JS. Esse é o terceiro curso, onde começaremos a trabalhar com esse lado mais full stack do Next JS. Começaremos a trabalhar com a parte de criação de end-points, de APIs com Next JS, APIs Rest e tudo mais.

Tem bastante coisa legal para aprendermos, tanto de como funciona essa parte do servidor do Next JS, quanto a explorar mais recursos aqui. A ideia é construirmos um projeto de newsletter muito parecido com o do “filipedeschamps.com.br”. A ideia é ter o mínimo de front-end possível, não vamos colocar um milhão de coisas de front-end nela.

Mas a ideia é justamente conseguirmos fazer um projeto onde vamos seguir um whiteboard, tal como as empresas grandes fazem, então eu vou explicar passo a passo como funciona o processo, e a partir dessa definição, desse whiteboard, começaremos a usar esses recursos mais de back-end do Next JS.

Então, basicamente, neste curso vamos pegar um pouco de cada coisa, front-end, a parte de como fazemos no back-end para receber a informação, como salvar a informação e vou até, no final, mostrar como você pode usar alguma plataforma para disparar e-mail.

Eu sei que tem muita coisa legal para mostrar para você, então peço que você se inscreva aqui para continuar vendo e, na próxima aula, eu destrinchar um pouco melhor como são esses passos da parte de whiteboard, que é basicamente um quadro branco, é só um desenho, um esquema de como vamos trabalhar. Vamos aprender juntos?

Formulário no Next.JS - Quais ferramentas vamos usar e por quê?

Agora que eu já trouxe a sua curiosidade, vamos começar a falar um pouco sobre esse tal de whiteboard. Basicamente a ideia é que antes de sair programando, precisamos saber o que precisamos fazer. Então o pessoal de produto da empresa vai passar o que eles querem. No caso, aqui, eu vou fazer um pouco desse papel.

[00:00:18] Eu vou até te perguntar: já parou para pensar como funciona a parte de cadastro da newsletter do "filipedeschamp.com.br"? Ou qualquer newsletter, na verdade. Então o que acontece aqui, basicamente, é: você vai digitar o seu e-mail, você vai clicar em "Inscrever-se", e ele precisa salvar essa sua informação. É dessa forma que ele consegue trazer esse total de leitores ativos para conseguir nos mostrar.

Então toda essa parte de interação que temos de digitar, de clicar em enviar, esse e-mail que precisa ser salvo em algum lugar e depois até no seu e-mail, você recebe uma confirmação de que você foi inscrito. Isso é importante porque se você cadastrar o e-mail de outra pessoa, pode ser que a pessoa não queira, ou algo do gênero. Enfim, eu sei que dá para trabalharmos bastante coisa aqui.

Eu vou no fluxo mais simples, que é basicamente é só conseguirmos fazer a parte de guardar e de enviar o e-mail, que é inclusive o que está descrito no Notion que tenho aberto. No site, junto com o Next JS, teremos o campo de e-mail para fazer o OptIn, que é o nome que eles dão quando você está entrando em uma newsletter.

Depois vamos usar uma Lambda do Next JS, que é a parte que está relacionada com essa parte toda de usar os API routes do Next JS para poder trabalhar com servidor e ter esse lado mais full stack da ferramenta funcionando aqui conosco. Logo na sequência temos que disparar dois processos, um é o de salvar o e-mail da pessoa e o outro é mandar o e-mail confirmando que a pessoa está na newsletter.

E você pode trabalhar várias outras estratégias, você pode, por exemplo, dizer que agora que eu estou com essa pessoa na newsletter eu quero enviar um outro e-mail para ela confirmar, então o OptIn só acontece quando ela clica no e-mail que ela quer realmente receber. No caso, vamos só avisar que ela está participando aqui.

Mas eu já estou te dando essas ideias porque o conteúdo que eu vou te passar vai te habilitar a conseguir fazer esse tipo de coisa. As suas aplicações, o seu portfólio, os projetos que você vai fazer, terão muito mais vida agora, porque você não está fazendo só o passo simples de fazer funcionar. Você fará funcionar no front, no back, vai salvar a informação, a sua aplicação como um todo estará muito mais viva.

O ponto que eu vou te indicar já também é para você pegar o link que estará na descrição ou desta aula ou nos próximos capítulos, para você baixar o projeto base que nós temos, porque isso nos ajudará a ganhar um pouco mais de tempo, não teremos que criar toda a estrutura, já vamos trabalhar em cima de uma base, que inclusive é muito parecida com como é o meu site pessoal hoje em dia.

Então temos essa base que já fizemos nos módulos anteriores, que você pode assistir aqui na plataforma também, mas essa será uma página nova em cima dessa base que já temos aqui. Então no próximo vídeo já começamos com mais mão na massa. Por hora, baixe a base, teste e vamos aprender juntos. Até daqui a pouco.

Formulário no Next.JS - Criando nossa página da newsletter

Chegou o vídeo da prática. É o seguinte, é importante reforçar que você precisa ter o código base. Você pode vir neste repositório e clicar em fazer o download do ZIP dessa parte base do código. Eu, na minha máquina, já fiz o setup, eu vou até dar um zoom maior para você conseguir ver um pouco melhor as coisas que estamos trabalhando aqui.

Vou limpar o meu terminal, a ideia agora é basicamente rodar um yarn install & yarn dev, para entrarmos no modo de desenvolvimento do nosso projeto. Feito isso, eu vou clicar para abrir no navegador um link novo. Repare que ele já abriu aqui "Mario Souto", um menu que não temos em vídeo nenhum, mas que você pode fazer. Mas o foco principal, agora, é essa parte da "Newsletter", que é um botão laranja ao lado direito da foto de perfil. Precisamos ter algo na nossa newsletter.

O que podemos fazer? O que veio na minha cabeça, de primeira, é o seguinte: podemos muito bem só colocar o link da nossa newsletter. Eu vou abrir aqui "pages > index.tsx", vamos na nossa home. Feito isso, temos aqui toda a nossa parte de template e tudo mais. Vou aqui na HomeScreen.

Dentro da “HomeScreen.tsx” vamos procurar o nosso Feed.Header. Dentro do “Feed.tsx” podemos procurar aqui "Newsletter", que está apontando para lugar nenhum. Eu vou colocar para href="/newsletter". Vou salvar aqui, dado que esse botão será um link, quando carregar a página, repare que ele não foi.

Deixa eu tentar entender aqui, eu vou dar um "Inspect" um pouco, vou tirar um pouco o zoom, vou colocar do meu lado. Se eu der um "Inspect" no botão, eu cliquei com a seta do mouse no navegador de novo, ele ainda é um botão. Acho que faltou alguma configuração para fazermos nesse componente de botão de antes, nos códigos anteriores aqui.

O que eu vou fazer agora? Eu vou pegar esse botão e eu vou dizer que ele vai receber o href, e que ele é uma string, href?: string, aqui nas propriedades dele. Aqui embaixo eu vou pegar todas as outras props que estamos recebendo do botão e vou passar para o botão só se virar com elas normalmente aqui, {...props}.

Eu estou usando o GitHub Copilot na minha máquina, eu vou desligá-lo, porque senão ele fica o tempo todo sugerindo o código que eu vou digitar, e fica igual a esse spoiler que vocês tomaram agora. Mas, basicamente, só espalhando o nosso props e fazendo esse pequeno ajuste aqui, agora sim o nosso botão de "Newsletter" virou o link para newsletter.

Se eu clicar no botão, ele deveria nos levar para a nossa página da newsletter, que não existe ainda, mas vamos criar agora e vamos tentar nos inspirar um pouco na do "filipedeschamp.com.br". Vamos lá, o próximo passo agora será eu vir na pasta "pages", onde eu vou criar o newsletter. Tem que ser um arquivo, "newsletter.tsx". Isso aqui, no Next, nos faz criar uma página nova.

Voltando para cá, agora teremos export default function NewsletterScreen(), que é a nossa tela de newsletter, que vai retornar um componente react. No caso eu vou trabalhar igual vínhamos trabalhando até agora aqui, com essa estrutura de caixa e texto. Eu vou trazer aqui um <Box>, que virá do nosso import do próprio componente box.

Dentro dele terá uma outra caixa, eu vou fazer isso aqui só para eu conseguir fazer um styleSheet, onde temos o flex: 1,, o alignItems: 'center' e o justifyContent: 'center',. O copilot ainda está me ajudando, agora ele desativou. Aqui, do outro lado, eu quero styleSheet, vou trazer alignItems: "center",. Por um lado, ele ajuda também, agora eu estou digitando mais na mão, vai demorar um pouco mais.

Mas faz parte, o width: "100%",. Esse layout todo que eu estou fazendo aqui é só para ele conseguir ocupar a tela inteira e deixarmos o nosso miolo centralizado, tal como é nesta newsletter aqui. Então volta para o código, e só para conseguirmos ver alguma coisa, eu vou carregar uma imagem, onde eu vou colocar <Image src="https://github.com/omariosouto.png" alt="Foto do DevSoutinho" />.

Lembrando que eu tenho que carregar esse componente Image na nossa página. Está pronto. Então aqui, na imagem, eu vou até quebrar a linha, que é mais fácil estilizarmos também. Eu vou só colocar uma borda redonda para começarmos e vermos a tela. Então eu vou colocar agora um borderRadius: "100%". 50% já serve, mas aqui eu já tenho a estrutura mínima que eu queria colocar aqui.

Deixa eu salvar agora e vir no navegador. Vou até tirar o zoom. Está aqui a foto, grande, bonita aqui, o meu sorriso, enfim, eu consegui fazer a mesma cara da foto. Mas, enfim, vamos terminar de preencher isso. O que mais precisamos colocar aqui? Eu preciso, além disso aqui, fazer essa imagem ter um width: "100px",.

Lembrando que esses ajustes menores você pode fazer como você achar melhor, eu estou só trazendo uma base aqui. Eu vou fazer também o marginBottom: "16px". Junto com isso, eu vou colocar um tamanho máximo de maxWidth: "400px", porque vai ficar o máximo de largura, vai ficar em 400, vai ficar redimensionando dado o 100 que colocamos aqui. E o padding: "16px" para ter essa medida padrão.

Então, em teoria, eu posso até colocar um texto aqui também, <Text>, vou chamar de Newsletter do DevSoutinho. Será que vai ficar bom? Será que não vai? Eu não sei, deixa eu colocar um <Text variant="heading2">. Isso tudo nós já fizemos antes, se você quiser ver essa parte dos estilos, você pode só voltar nos outros vídeos.

Olha que bonito, já está bem mais legal a página. No código nós podemos colocar não só o marginBotton, mas o marginTop: "16px" também. Já temos outra cara quando você acessa a página. No caso da página do "filipedeschamps" é invertido, então podemos descer o nosso texto e tirar essa margem que eu coloquei.

Mas a ideia é só você ver que o layout que estamos criando não é nada muito complexo, é uma coisa simples e direta. O ponto que faltou agora seria o botão para fazermos a parte do cadastro, então eu vou colocar aqui um button, que ele será um <Button fullWidth >, ou seja, eu quero que ele ocupe o máximo possível aqui.

No styleSheet dele eu vou colocar uma marginTop: "16px". Vou na página, dá para clicar já. Aqui tem que ser Cadastrar. Então já estamos chegando lá, está ficando bonito isso aqui. Acho que o único ponto que faltou agora foi o campo de texto. Só que tem um detalhe, no nosso "src" nós nunca criamos um componente de texto, um componente específico.

Esse componente que estamos criando não é um layout que veio do nosso Figma base que viemos usando até agora, aqui estamos só nos inspirando nessa página do "filipedeschamps". Então o que eu vou indicar para fazermos neste vídeo? Como um componente específico dessa página, eu vou criar algo chamado de <NewsletterTextField />. Por que eu estou criando isso aqui e não na pasta dos componentes?

Porque ele só existe para essa página aqui, então faz mais sentido eu ter ele neste contexto do que criar algo global que não é reutilizado em lugar nenhum. Lembre-se sempre da máxima que é: evite o reuso antes do uso. É isso o que eu estou fazendo aqui. Para poder dar sequência nisso, eu basicamente só vou colocar o placeholder="Informe seu email".

Aqui em cima eu vou criar esse código. Ou pode ser aqui embaixo também, function NewsletterTextField(), e podemos vir trabalhando com ele. Então a primeira coisa, eu terei aqui interface NewsletterTextFieldProps. Vou dizer que teremos as props desse componente nessa pegada, function NewsletterTextField(props: NewsLetterTextFieldProps).

Por hora eu vou fazer o return. Como isso é um campo de texto, ele terá uma caixa em volta e um input lá dentro, que eu vou usar aquele nosso <BaseComponent /> para criar, que é uma estrutura primordial de componente que nós temos, que eu posso passar qualquer tag para ele como as="". Então vai como um ass="input".

Só de colocar essa estrutura mínima e dizer que temos um placeholder?: string;, eu posso vir nessa <Box> e espalhar as nossas {...props}. Eu quero deixar as props o mais perto possível do HTML padrão mesmo. Vou salvar, vou para a página e olha só, já tenho. Ele está feio, mas podemos melhorar, trazer mais beleza para o nosso campo.

O próximo ponto será colocar o styleSheet aqui. No styleSheet eu vou colocar uma borda de 1 pixel sólido na cor preta, border: "1px solid #000",. Vou colocar o borderRadius: "4px",, o padding: "8px", e o width: "100%", para ocupar tudo o que ele tem direito aqui. Junto com o <Box, que também terá o seu styleSheet com um width: "100%".

Lembrando que aqui eu estou meio que me baseando, você pode vir inspecionando o elemento na página do "filipedeschamps" e, por exemplo, podemos vir, dar um "Inspect", e procurar por "border-color". Isso nós vamos procurar neste "Computed" e tentarmos pegar "border-left-color". Ele usa a cor preta base no campo dele. Se pegarmos um pouco mais específico, talvez, ele tem aqui esse RGB 195, 195, 195.

Nós podemos trocar, podemos fazer, no nosso código, ser border: "1px solid rgb(195, 195, 195)",. Olha a página, não está talvez 100% da ideia, mas vai de você ir ajustando aqui. Por exemplo, talvez podemos colocar um maxWidth: "300px". Na página já ficou um pouco melhor. Você pode colocar um margin top ou um margin bottom nas coisas e ir aprimorando como estamos.

Mas, na prática, para este vídeo, o que eu queria mostrar para vocês era só esse começo, de como começaremos a estruturar a nossa newsletter para então começarmos a seguir os próximos passos. Basicamente temos a primeira parte do campo de e-mail, só que faltou também ter a parte de validação dele, então vamos começar a trabalhar com a validação no próximo vídeo, daqui a pouco, eu vejo você lá.

Sobre o curso Next.JS: full stack com lambdas

O curso Next.JS: full stack com lambdas possui 96 minutos de vídeos, em um total de 24 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:

• Formulário no Next.JS
• Backend no Next.JS
• Banco de dados
• Envio de e-mail