Next.js: conheça o framework React

Criando o projeto - Apresentação

Olá! Hoje vamos falar de Next.js com Vinny Neves, instrutor da Alura.

Audiodescrição: Vinicios Neves é um homem de pele clara com rosto oval. Tem olhos castanho-escuros, sobrancelhas grossas, nariz comprido e boca larga. Tem a cabeça raspada, usa barba e bigode, óculos de grau com armação quadrada preta. Está com uma camisa preta e sentado em uma cadeira cinza. Ao fundo, há uma parede onde são projetadas luzes nas cores azul e roxo.

Neste curso, vamos trabalhar e entender as principais diferenças entre desenvolver uma aplicação React que roda do lado da cliente e desenvolver uma aplicação Next, que roda majoritariamente do lado do servidor. Vamos dar uma olhada no projeto que vamos desenvolver.

Temos aqui um projeto no Figma (ferramenta de design) muito bonito, o nome da aplicação é Code Connect, e vamos lidar com posts. Vamos listar vários posts de forma paginada, e além disso, vamos trabalhar com a página de detalhe do post.

Este é o primeiro curso que vai utilizar o Code Connect como projeto, virão mais no futuro. Com essas duas páginas e esses componentes, vamos passar por todos os principais recursos e técnicas utilizadas pelo Next.

Requisitos do curso

Para acompanhar melhor este curso você deve conseguir utilizar pela primeira vez esse lado do servidor, ou seja, nós já estamos acostumados a desenvolver com React. Essa é a base que você precisa ter, estar acostumado com React.js. Agora vamos migrar, sair do lado do cliente para o lado do servidor, entendendo como o Next faz todo esse roteamento.

Esperamos que você esteja tão animado ou animada quanto nós para desenvolver o Code Connect, e nós estaremos esperando você no próximo vídeo!

Criando o projeto - Preparando o projeto

Está na hora de começarmos a programar e transformar o Code Connect de um simples desenho para uma versão funcional de uma aplicação Next. Para fazer isso, precisamos iniciar a nossa aplicação.

Vamos iniciar do zero, sem um projeto base para começar. Precisaremos da ajuda do Next desde o início.

E para fazer isso, sempre podemos começar consultando a documentação.

Instalando o Next

No navegador, no endereço nextjs.org/docs, estamos na seção Getting Started - Installation para começar a instalação. A própria equipe do Next recomenda que executemos o comando npx create-next-app@latest para realizar nosso setup, ou seja, baixar e configurar tudo o que o Next precisa para funcionar corretamente.

Vamos rodar este comando de forma parecida com uma pequena diferença. Neste curso, vamos focar e utilizar a versão 14 do Next. Portanto, não podemos pedir a versão mais recente.

Quando dizemos que queremos a versão 14, estamos dizendo para o npx que queremos que a versão principal (major) seja a 14. Contanto que comece com "14.", pode ser a mais recente, mas deve ser a versão 14. Mesmo que saiam versões 15, 16, 17, 18, queremos usar a versão 14 neste momento.

Voltando para o terminal, já estamos na nossa área de trabalho. Vamos rodar um pwd, que indica que estamos na pasta de usuário dentro do desktop, que é onde gostamos de criar os projetos.

Vamos executar o comando npx create-next-app@14, seguido da tecla Enter. Este comando vai fazer algumas perguntas. A primeira pergunta é "qual é o nome do seu projeto?". Podemos usar code-connect que é o nome disponível para nós. Então, ele irá perguntar se queremos usar TypeScript, ESLint ou Tailwind CSS, e nossa resposta para todas será "não".

Porém, quando perguntado se queremos usar o diretório src, a resposta será "sim", pois nossa aplicação ficará dentro deste diretório. Ele também perguntará se queremos usar o App Router, que atualmente é a versão mais recente do roteador, uma forma de trabalhar com roteamento no Next, e vamos dizer que sim. Não queremos customizar o atalho @ para fazer os imports.

Após inicializar o projeto, ele vai instalar o React, o React DOM e o Next. Uma vez que ele terminar de fazer tudo o que precisa, vamos acessar cd code-connect/, ou seja, entrar dentro desta pasta, vamos limpar o terminal, e testar para ver se essa instalação do Next está funcionando.

Testando e rodando o Next

Para fazer isso, para iniciar o ambiente de desenvolvimento do Next, vamos usar o comando npm run dev. Esse comando vai garantir que tudo funcione como deveria. Quando estiver tudo pronto, estará disponível na porta 3000 do seu localhost.

Clicaremos com o botão direito do mouse sobre a URL http://localhost:3000 e selecionaremos a opção Open Link. Essa opção está disponível a depender do sistema operacional que você use.

Acessando http://localhost:3000 no navegador, a página apresentará detalhes sobre o Next e uma instrução semelhante ao que temos quando criamos uma aplicação React. De modo geral, ele dirá que, para começar a trabalhar, podemos editar o arquivo que está dentro de src, chamado page.js.

Limpando o projeto no VS Code

Agora, podemos começar a desenvolver. Precisamos abrir o VS Code. Após abri-lo, fecharemos o projeto que está aberto e pediremos para ele abrir a pasta que acabamos de criar, clicando em Open Folder. Dentro de Desktop, temos o code-connect, e pediremos para ele abrir este projeto.

Já com a pasta aberta, podemos começar a trabalhar e fazer uma limpeza clássica. Quando vem no React, seja com o Vite ou com o Create React App, sempre tem algumas coisas que o script entrega para nós para mostrar mais ou menos como funciona. E agora, vamos limpar tudo isso.

Acessaremos src > globals.css, que são estilos globais da aplicação. Queremos remover todo o código que está nesse arquivo, os estilos globais serão definidos por nós, não pelo Next. Ele tem também um page.module.css, que também vamos limpar. Não precisamos excluir esse arquivo, pois provavelmente vamos usá-lo. Vamos deixá-lo ali, mas sem estilos, porque não vamos ver nada que não seja coisas que nós escrevemos ali na tela.

Depois, vamos para page.js e ele tem toda a marcação HTML. Repare, o Home, que está dentro do page.js, é um componente React normal, como conhecemos. Portanto, vamos excluir tudo o que tem dentro das chaves e deixar só a tag main. Vamos renderizar um "Olá Mundo".Portanto, a nossa página Home só vai exibir esse "Olá Mundo". Podemos limpar os imports. Portanto, dentro do page, ficou o nosso "Olá Mundo".

export default function Home() {
    return {
        <main>
            Olá mundo
        </main>
    }
}

O Next já oferece, por padrão, um layout.js. Este é o layout base de toda a aplicação. Por padrão, ele já existe. Ele faz import de fontes do Google e tem algumas informações ali de metadata. Por enquanto, não queremos dar atenção a isso. Vamos deletar todos os imports que ele fazia.

Não queremos que o título seja "Create Next App". Queremos criar o "Code Connect". Portanto, vamos trocar o title. E aqui, estamos falando da metainformação, que é o título que fica ali na aba, 'Code Connect'. Quanto à descrição, podemos criar uma agora, "Uma rede social para devs". E isso ficará como meta description da página.

Por último, dentro da função RootLayout, temos o idioma, lang, que está como em inglês, mas nossa aplicação terá conteúdo em português brasileiro ('pt-br'). Agora, podemos tirar o className, porque não fazemos mais a importação da fonte router. Portanto, ficamos com nosso layout base do Next, apenas com a tag html e a tag body, passando o título para dentro.

export const metadata = {
  title: 'Code Connect',
  description: 'Uma rede social para devs!',
}

export default function RootLayout({ children }) {
  return (
    <html lang="pt-br">
      <body>{children}</body>
    </html>
  )
}

Fizemos várias alterações de código. Inclusive, na pasta pública, podemos excluir o logo da versão do Next. Não vamos usar essas imagens. E agora, se voltarmos ao navegador, deveríamos ter algo parecido com o nosso "Olá mundo".

Voltando ao navegador, temos o texto "Olá mundo". Vamos pedir para o Google Chrome abrir o Developer Tools clicando com o botão direito do mouse sobre a página e clicando em Inspecionar.

Gostamos de estar sempre olhando para o console. Se ele indicar algum erro em vermelho, conseguimos ver o que fizemos de errado ou o que aconteceu. E, além disso, também ficamos de olho no terminal. Por quê? O principal ponto do Next é que temos coisas acontecendo do lado do servidor. No React, a maioria das coisas, vão acontecer do lado do cliente. Então, se aconteceu algo errado, o terminal, onde rodamos o nosso npm run dev, pode dar alguma dica para ver o que aconteceu.

Agora que já criamos a aplicação base, fizemos uma limpeza nela, podemos começar a evoluir o nosso Code Connect.

Criando o projeto - Criando o componente Aside

Agora que nossa aplicação está limpa e pronta para receber o código que queremos escrever, vamos estilizá-la, começar a trabalhar e deixá-la com a aparência do Code Connect que temos no Figma.

Vamos começar estilizando o body. Queremos que o fundo fique com a cor que nossa pessoa designer, a Isa, preparou. Com o Figma aberto, clicamos no fundo, estamos com o Dev Mode ligado e conseguimos pegar esse background que é um gradiente linear. Vamos copiar esse estilo que o próprio Figma está nos oferecendo e voltar agora para o VS Code.

Ajustando a cor de fundo

Vamos fechar tudo que está aberto, exceto o globals.css. Lembrem-se que esse arquivo será responsável pelos estilos globais da aplicação. Nesse arquivo, que está limpo, vamos selecionar o body e aqui estamos falando de CSS normal. Depois, vamos colar o estilo que veio do Figma.

A única coisa que vamos fazer é limpar essa variável CSS que o Figma sugere, mas que não estamos usando. Basicamente, o que fizemos foi aplicar um background para o body. Além disso, vamos remover a margem que ele já tem por padrão e definir que a altura mínima é 100vh, ou seja, pega tudo que está disponível para o body, pelo menos. Se ultrapassar, deixa passar, mas a altura mínima será essa.

body {
  background: linear-gradient(180deg, #0E1112 0%, #00090E 100%);
  margin: 0;
  min-height: 100vh;
}

Depois de escrever esses estilos, vamos importá-los novamente. Então, mudamos para o arquivo layout.js e na primeira linha vamos fazer um import './'. Não queremos page.module.css, como o VS Code está sugerindo, mas o globals.css.

import './globals.css'

Assim, personalizamos os estilos globais e ajustamos no layout. Vamos ver se isso funciona? Vamos voltar ao navegador, no Code Connect na porta 3000 e ele já aparece para nós com um fundo azulado, muito parecido com o que temos no Figma.

Criando o componente `Aside`

Voltando ao Figma, vamos criar um componente para começar a montar nosso layout. Vamos trabalhar nesse projeto em vários cursos diferentes durante a formação. Então, ele vai evoluir junto com nossas habilidades.

Vamos começar pelo Aside, que é um componente que fica ao lado. Basicamente, ele tem a logo do Code Connect e várias opções. Por enquanto, só vamos colocar a logo ali dentro.

Já fizemos o download da logo. Em "Preparando o Ambiente", tem todos os links que você precisa para baixar as imagens e tudo que vamos usar durante o curso. Então, qualquer dúvida, volte lá e pegue sua logo.

Vamos arrastar o arquivo da logo diretamente da pasta de Downloads para dentro do VS Code. E onde vamos colocá-la? Lembrem-se, estamos vindo do mundo do React, seja com o Vite ou com o próprio Create React App, já temos esse conceito de pasta pública, que é a pasta pela qual o Next vai prover os arquivos estáticos. Então, a logo é um desses arquivos, vamos arrastar o logo.png para dentro da pasta public, que é justamente onde tinha a logo do Next e da Vercel.

Com a logo no lugar, podemos criar nosso primeiro componente. Aqui, vamos começar a organizar o projeto. Dentro de src, vamos criar uma pasta clicando com o botão direito sobre ele e selecionando New Folder.

Vamos criar uma pasta com o nome de components. Dessa vez, vamos escrever um código em inglês para ficar bem parecido com o que vemos no mercado. Então, dentro da pasta components, vamos criar o componente Aside. Vamos colocar a primeira letra maiúscula, porque ele é um componente React. E ali dentro, vamos criar um arquivo chamado index.jsx. Então o caminho todo será src > components > Aside > index.jsx. Isso vai nos ajudar a importar esse componente mais facilmente.

Vamos criar uma constante dentro do arquivo index.jsx. Essa constante vai se chamar Aside. Antes de criar, vamos inserir um export, assim já criamos exportando. Essa constante vai receber uma arrow function (função de seta).

O Vinny Neves costuma criar componente React sempre com arrow function. Se você cria como function direto, não tem problema. Vai funcionar do mesmo jeito.

Então, esse Aside vai fazer o retorno de algum HTML. Vamos colocar entre parênteses. E vamos retornar um <aside>. E aqui dentro, podemos colocar nossa logo. Como a temos disponível na pasta pública, podemos usar a tag img. O src dela vai ser absoluto, ou seja, /, que é a raiz do nosso endereço, logo.png.

Vamos colocar um texto alternativo. Vamos chamar de "Logo da Code Connect, que é a nossa rede social. Vamos importá-lo e colocá-lo no nosso layout.

A ideia do layout é colocar ali dentro o código que vai ser comum a toda a aplicação.

export const Aside = () => {
    return (<aside>
        <img src="/logo.png" alt="Logo da Code Connect" />
    </aside>)
}

Vamos dar uma olhada no Figma para ter certeza de que o Aside vai estar sempre disponível. Então, estamos olhando para a página inicial e o Aside está ali. Vamos olhar mais para baixo no Figma. E dentro da página de detalhe do que foi postado ali no blog, também tem o Aside.

Então, esse componente realmente é um bom candidato para ficar no nosso layout. Ou seja, independentemente da página, vamos exibir esse componente. Então, para não ficar replicando, correndo o risco de esquecê-lo, vamos montar nosso layout base.

Voltando para o layout.js, antes de chamar o children, que é onde vai vir a aplicação, quebramos a linha para ficar a abertura da tag body, children e o fechamento da tag body em linhas separadas.

Antes de chamar o children, chamamos o Aside. O VS Code já está sugerindo como primeira opção o Aside que está dentro da pasta de componentes que se chama Aside.

Antes de mostrar o resultado, repare que, na linha 1, temos o import do Aside. E repare que ele começa com um arroba. Quando fomos criar nossa aplicação, lembra que falamos do alias, do apelido, do atalho? Essa é a ideia desse arroba.

O arroba quer dizer que é a pasta src, ou seja, o arroba significa src independentemente de onde estejamos na hierarquia. Assim sendo, dentro desse src, temos uma pasta chamada components e uma pasta chamada Aside. Percebeu como que o arroba funciona? O arroba aponta diretamente para esse src.

import { Aside } from '@/components/Aside'
import './globals.css'

export const metadata = {
  title: 'Code Connect',
  description: 'Uma rede social para devs!',
}

export default function RootLayout({ children }) {
  return (
    <html lang="pt-br">
      <body>
        <div className='app-container'>
          <Aside />
          {children}
        </div>
      </body>
    </html>
  )
}

Nosso componente está importado, devidamente escrito no nosso JSX. Vamos ver o resultado no navegador. Voltamos para o Google Chrome, voltamos para o Code Connect. Vamos tirar o zoom da aplicação. E está lá o Code Connect. Ainda está sem estilo, está colado no canto. Vamos evoluir esse estilo devagar. Aí podemos começar estilizando essa caixinha que fica aí em volta. Ou seja, eles têm um container, com a borda arredondada, uma cor diferente da do fundo. Então, vamos fazer isso.

Usando os módulos CSS

No Figma, clicamos no componente Aside. No menu lateral direito, vamos descer um pouco até o título Style, para localizar os estilos do componente. Ele já nos informa o border radius e o background. Então, podemos copiar o código e voltar para a nossa aplicação.

O Next permite que estilizemos a aplicação de várias formas diferentes. Tanto que ele até sugeriu o Tailwind no nosso primeiro vídeo, onde começamos a criar a nossa aplicação.

Optamos por não utilizar o Tailwind. Vamos usar o que o Next oferece por padrão, que são CSS modules. Ou seja, módulos CSS. Isso faz com que consigamos escrever CSS no escopo dos componentes sem que isso vaze para fora do componente. Evitando que afetemos outros lugares da aplicação, com cores e estilos no geral.

Dentro do Aside, vamos pedir um novo arquivo, clicando com o botão direito sobre a pasta Aside no menu Explorer e selecionando New Folder. Vamos chamar de aside.module.css, com letras minúsculas.

Dentro aqui desse arquivo aside.module.css, vamos criar uma classe .aside, que vai representar os nossos estilos. Vamos colar o que veio do Figma. Então, temos uma border-radius: 8px e o background.

Vamos remover o conceito de variável que o Figma está sugerindo, porque não temos isso. E também temos um padding. Voltamos ao navegador para resgatar qual é o padding.

Para cima e para baixo, o padding é 40. Para o lado e para o outro, é 16. Vamos aplicar isso. Então, temos o nosso padding, que é 40 pixels para cima e para baixo, 16 pixels para um lado e para o outro. Isso vai estilizar e começar a apresentar o formato, as cores e a borda que precisamos.

.aside {
    border-radius: 8px;
    background: #171D1F;
    padding: 40px 16px;
}

Então, como é que fazemos para importar e aplicar esses estilos dentro do nosso componente? Lá no arquivo index.jsx, que está dentro de Aside e de components, vamos importar usando o import.

Precisamos dar um nome para o que vamos importar. Vamos chamar de styles (estilos). Então, import styles from './'. Reparem que o VS Code já nos sugeriu aside.modules.css. Confirmaremos pressionando a tecla Enter.

import styles from './aside.modules.css'

E para aplicar esse estilo é CSS Modules da mesma forma que usamos no React. Vamos chamar o className e ao invés de passar uma classe, por exemplo, Aside, para ele aplicar os estilos, vamos fazer diferente.

Vamos passar do objeto que acabamos de pegar, styles., seguido do nome da classe que criamos, aside. O objeto CSS do CSS Modules vai conter todos os estilos que pegarmos. E estamos pegando o aside. Reparem que esse .aside tem a ver com a classe que criamos no nosso CSS.

Se criássemos no arquivo aside.module.css, ao invés de Aside, cambalhota, o nome que teríamos de pegar lá no nosso componente dentro de index.jsx seria cambalhota.

O nome da classe que colocamos em className é o nome da propriedade que vamos pegar no styles.

Com isso, na teoria, vamos ter o nosso componente estilizado. Vamos ver? Voltando ao Google Chrome, no Code Connect, que está rodando na 3.000. Ele está esticado porque ele está com o display block, pegando toda a aplicação, mas ele já está com o padding que pedimos. Abrindo o Inspecionar, já conseguimos ver o padding de 40 para cima e 40 para baixo, 16 para um lado e 16 para o outro. E lá dentro tem uma imagem.

Então, com isso, criamos um componente React e usamos os CSS modules. Detalhe: o Next oferece isso por padrão. Só usamos. Então, agora, ainda temos coisa para fazer, mas continuamos no próximo vídeo.

Sobre o curso Next.js: conheça o framework React

O curso Next.js: conheça o framework React possui 133 minutos de vídeos, em um total de 48 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:

Criando o projeto
Criando um card para os posts
Obtendo dados da API
Paginando dados
Páginas dinâmicas