React: migrando componentes para Next.js

Apresentando o instrutor e o curso

Olá, estudantes. Precisamos discutir uma demanda importante para trabalharmos juntos em mais um curso. Sou o instrutor Pedro, um homem branco, com barba e cabelo escuros. Estou vestindo roupas pretas e me encontro em um ambiente iluminado pelas cores rosa e azul.

Sejam bem-vindos a mais um curso de React no modo Carreiras Alura. Este curso está repleto de conteúdo para trabalharmos, pois a demanda é crucial. Vamos começar mencionando que o Culturama entrou em contato solicitando nossa ajuda para encontrar a melhor pessoa possível para melhorar o SEO (otimização para motores de busca) e a performance do site. Os usuários têm reclamado que, às vezes, as imagens travam e a experiência de navegação não é satisfatória. Portanto, a performance do site precisa ser aprimorada.

Analisando a performance atual do site

Já adiantei um pouco do trabalho utilizando o Google Lighthouse para verificar a pontuação atual e identificar melhorias. A pontuação obtida foi de 32, o que indica uma performance bastante baixa. Precisamos realizar mudanças significativas para melhorar essa performance e, quem sabe, alcançar uma pontuação de 97. O que acham, estudantes? Vamos trabalhar para aumentar essa pontuação e, talvez, atingir 97, 99 ou até mesmo 100.

Preparando-se para o curso e introduzindo o Next.js

Para este curso, é essencial que já tenhamos consumido conteúdo sobre React, TypeScript, Tailwind CSS, funcionamento de Hooks, funcionamento do Context e tudo mais que engloba essa parte do ecossistema do React. Nosso foco será transformar o projeto do Culturama, que atualmente utiliza apenas o React, em um projeto que utilize o Next.js. Vamos introduzir conceitos mais avançados dos frameworks, e nada mais justo do que trabalhar com o Trending Topics dos frameworks, que no momento é o Next.js. Ele oferece diversos recursos de roteamento com app router, tratamento de imagem, entre outros, que melhoram a performance da aplicação. Ao final dessa jornada, alcançaremos uma pontuação excelente.

Incentivando a preparação e o aprendizado

Vamos juntos! Prepare sua garrafa de água para se hidratar. Estou sempre com a minha ao lado. Se desejar, pegue um lanche ou doce para se sentir confortável durante o aprendizado. Afinal, precisamos estar bem alimentados para absorver todo o conhecimento que o Next.js nos proporciona.

Iniciando o projeto do zero

Não traremos código pronto; vamos criar o projeto do zero. Migraremos os componentes existentes, o que envolverá bastante "Ctrl+C" e "Ctrl+V", mas também faremos muitas coisas do zero, no terminal, criando o projeto, as configurações e entendendo o propósito de cada comando. Está sensacional! Prepare-se, pois a jornada será maravilhosa. Tenho certeza disso. Nos encontraremos na sequência para entender como o projeto está funcionando e o que podemos fazer. Até lá!

Introduzindo frameworks modernos no desenvolvimento com React

Agora, vamos retomar um assunto que provavelmente já vimos em cursos anteriores ou em outras trilhas: a utilização de frameworks modernos no desenvolvimento com React. Primeiramente, o que são os frameworks e por que vamos utilizá-los? Vamos abordar esse assunto de forma mais aprofundada, entendendo o que eles resolvem para nós, o que é mais importante, e quais são os benefícios que trazem ao nível de código.

Basicamente, os frameworks são conjuntos de ferramentas, bibliotecas e convenções que, no caso da nossa utilização do React, estendem as funcionalidades que o React já possui. Em vez de adicionarmos várias bibliotecas externas em um projeto React simples, como uma para gerenciar rotas, outra para diferentes funcionalidades, os frameworks oferecem uma estrutura mais sólida, agregando essas funcionalidades e ferramentas que precisaríamos buscar de fontes externas. Com isso, os frameworks aceleram o desenvolvimento do projeto e padronizam a estrutura do código e do projeto como um todo.

Explorando o Next.js como framework moderno

Por exemplo, o Next.js, que será o framework moderno que utilizaremos no projeto do Culturama, é baseado na organização das pastas, ou seja, do diretório em que o projeto está construído. Vamos entender mais adiante, em detalhes, como isso funciona. A padronização da estrutura do projeto será muito importante daqui para frente, especialmente ao trabalharmos com frameworks modernos.

Especificamente sobre o Next.js, que será nosso objeto de estudo durante este curso, ele é um framework full stack, ou seja, possui tanto uma parte front-end quanto uma parte back-end. No entanto, não vamos nos aprofundar na parte de back-end do Next.js, conhecida como BFF (Back-end for Front-end), neste primeiro momento, pois é um conteúdo mais avançado. Nosso foco será na parte de front-end e na organização dos arquivos, bem como o Next.js lida com projetos voltados para o front-end.

Recursos e vantagens do Next.js

O Next.js traz recursos prontos, como o roteamento automático baseado em pastas, sem a necessidade de ferramentas externas. Vamos ver isso na prática. Ele também oferece uma renderização híbrida, que foi uma grande inovação do Next.js em relação a outros frameworks concorrentes. Com o Next.js, podemos realizar renderização tanto do lado do cliente quanto do lado do servidor, e será interessante ver isso na prática e entender como habilitar essa renderização e até mesclar as duas abordagens.

O Next.js oferece um pacote de otimizações para imagens, fontes e performance da aplicação como um todo, além de recursos para SEO (Search Engine Optimization), que é a otimização para motores de busca. Isso ajuda a ranquear nosso site em locais de destaque nos mecanismos de busca, como o Google. O Next.js já traz todos esses recursos integrados, sem a necessidade de buscar em fontes externas ou outras bibliotecas.

Comparando Next.js com React "Vanilla"

O Next.js é um framework que expande o React, adicionando estrutura, performance e capacidade de front-end e back-end no mesmo ambiente. Ele acopla várias funcionalidades que o React já possui e as traz dentro do pacote do Next.js, melhorando a performance e a estrutura, o que é crucial para o gerenciamento de rotas e outros aspectos da aplicação. Trata-se de um framework full stack, permitindo acesso à parte do back-end na mesma estrutura, tornando-o muito poderoso.

Comparando com o React "Vanilla", que é o React sem a utilização de nenhum framework, o Next.js oferece vantagens significativas. No React, o roteamento precisa ser feito manualmente, utilizando bibliotecas como o React Router DOM. Já no Next.js, o roteamento é automático, baseado na estrutura de pastas do diretório. Enquanto o React possui uma estrutura somente de front-end, o Next.js oferece uma arquitetura full-stack, possibilitando renderização no servidor e interação com o back-end sem bibliotecas externas.

Criando o projeto Culturama com Next.js

Além disso, no React, várias configurações manuais são necessárias, como a instalação de dependências e bibliotecas externas. No Next.js, há um conjunto de ferramentas previamente configuradas, tornando o processo mais automatizado e facilitando o início do projeto com um conjunto completo de utilidades.

Para criar nosso projeto, utilizaremos o comando npx create-next-app, conforme a documentação do Next.js, com a flag @latest para obter a versão mais atualizada. O nome do projeto será Culturama, e passaremos as flags para configurar automaticamente o TypeScript e o Tailwind. Também utilizaremos a flag --app para indicar o uso do roteamento através do app-router, que será discutido em mais profundidade posteriormente. A flag --src-dir será usada para criar o diretório src com uma estrutura pré-definida.

Para isso, utilizamos o seguinte comando:

npx create-next-app@latest culturama --typescript --tailwind --app --src-dir

Com esse comando inicial, o projeto já será gerado com diversas configurações prontas, permitindo a transição do nosso Culturama, que atualmente funciona com React puro e Vite, para o framework Next.js. Vamos explorar o código do Culturama na estrutura do React com Vite e, em seguida, criar o projeto com Next.js para migrar pastas, arquivos, componentes e telas.

Nos vemos na sequência para continuar nossa jornada de aprendizado no framework Next.js, subindo degrau por degrau.

Explorando a estrutura do projeto React

Estou dentro da pasta do nosso projeto, ou seja, do projeto que vamos construir durante o curso. Dentro desse diretório, já temos um projeto feito somente com React do Culturama. Na estrutura que estamos chamando de repositório "Trabalhando com Frameworks Modernos", utilizamos o terminal integrado do editor de texto, que está sendo compartilhado na tela, e digitamos o comando para navegar até a estrutura do projeto existente:

cd react-culturama

Na aba lateral esquerda, conseguimos visualizar toda a estrutura do projeto e verificamos que é um projeto React com o Vite, bem simples. Ele possui a pasta public, onde estão os arquivos que serão disponibilizados para o estático do site, gerado pelo build do Vite. Aqui, temos somente o favicon, que é o ícone que aparece no topo do site, na barra de navegação.

Detalhando a estrutura de pastas do projeto

Dentro da pasta src, encontramos uma estrutura simples de um projeto React. Temos a pasta assets, com os arquivos relacionados a imagens, fontes e outros elementos do projeto. Há também uma pasta components, onde estão todos os componentes utilizados no projeto. A pasta context é utilizada para o gerenciamento de informações na aplicação, através do useContext do React.

Temos a pasta hooks, que será muito utilizada. Posteriormente, vamos transferir toda essa parte de hooks, utilitários e tipagem para o lado do Next.js. Os hooks facilitam nossa utilização. Existe também uma pasta chamada pages, que contém as páginas do projeto. Quando fizermos a migração para o Next.js, entenderemos melhor como diferenciar uma parte de detalhe de uma parte de evento, entre outros aspectos.

Configurando o roteamento da aplicação

Além disso, temos a parte de router, que é o roteamento da aplicação. Ela utiliza as páginas dentro do diretório pages, mencionado anteriormente. Vamos ver como configuramos o roteamento utilizando o react-router-dom:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home';
import Events from '../pages/Events';
import Categories from '../pages/Categories';
import EventDetail from '../pages/EventDetail';
import NotFound from '../pages/NotFound';
import Search from '../pages/Search';


const router = createBrowserRouter([
{
path: '/',
element: <App />,
errorElement: <NotFound />,
children: [
{
index: true,
element: <Home />,
},
{
path: 'eventos',
element: <Events />,
},
{
path: 'categorias',
element: <Categories />,
},
{
path: 'categorias/:categoryId',
element: <Categories />,
},
{
path: 'eventos/:eventId',
element: <EventDetail />,
},
{
path: 'buscar',
element: <Search />,
},
],
},
]);


export const AppRouter = () => <RouterProvider router={router} />;

Definindo tipagens e interfaces

Por fim, há uma pasta types, onde está toda a parte de tipagem utilizada na aplicação. Vamos dar uma olhada em como definimos as interfaces para as categorias e eventos:

export interface Category {
  id: number;
  name: string;
}


export interface Event {
id: number;
name: string;
image: string;
description: string;
date: string;
categoryId: number;
location: string;
}


export interface DataContextType {
categories: Category[];
events: Event[];
loading: boolean;
error: string | null;
getEventsByCategory: (categoryId: number) => Event[];
searchEvents: (query: string) => Event[];
refreshData: () => Promise<void>;
}

Iniciando o servidor e rodando a aplicação

No terminal, começamos rodando o servidor com o seguinte comando:

npm run server

O projeto utiliza um json-server para simular informações vindas de um back-end. Trata-se de um back-end controlado, que não aprofunda em serviços específicos. Já trouxemos um serviço pronto que traz eventos e categorias reais para ilustrar na aplicação.

Com o servidor rodando na localhost:3001, abrimos uma nova instância do terminal e digitamos o comando para rodar a aplicação:

npm run dev

Inicialmente, esquecemos de mudar de pasta, então utilizamos o comando:

cd react-culturama

E, em seguida, rodamos novamente:

npm run dev

Explorando as funcionalidades do projeto Culturama

O projeto começou a rodar na porta 5173. Vamos abrir via terminal e, agora, temos no navegador a ilustração de como está funcionando o nosso projeto do Culturama. O Culturama é um site que traz um calendário e uma agenda de eventos. Esses eventos são reais, mas as datas e localizações são fictícias. Temos separação por categoria e por data. O projeto está completo. Por exemplo, ao clicar na amostra de cinema brasileiro, marcada para o dia 29/10 em Brasília, Distrito Federal, e selecionar "ver", temos uma seção inteira de detalhes do evento.

Nessa seção, encontramos a imagem do evento, algumas informações adicionais, data e hora, e localização. A parte de localização ainda não está integrada com o mapa, e essa integração não é nosso objetivo no momento. Há também uma seção de compra de ingressos, que ainda não está funcional, mas todas as informações de categoria, organização, idioma do evento, descrição, contato e telefone estão disponíveis. Além disso, há uma seção de eventos relacionados, que mostra eventos com descrições semelhantes ou do mesmo organizador.

Navegando por categorias e funcionalidades de busca

Podemos navegar por categorias, como shows, arte, teatro e fotografia. O site oferece diversas funcionalidades que já estão operacionais, inclusive o campo de busca. Ao pesquisar por "teatro" e pressionar "Enter", não encontramos resultados porque não há eventos com "teatro" no nome, descrição ou localização. No entanto, ao acessar a página de categorias e clicar em "teatro", um filtro específico por categoria é aplicado, mostrando eventos como Hamlet, Quebra-Nozes e festival de dança urbana, que incluem teatro na descrição.

Nosso projeto funciona totalmente com informações reais, exceto pela localização e datas, que são fictícias para fins de estudo. Agora que conhecemos a estrutura do Culturama, vimos como ele funciona internamente, o código e sua organização, é hora de iniciar um novo projeto utilizando o Next.js. Vamos explorar as diferenças e nuances entre os projetos, utilizando o React Vanilla, que chamaremos de Vanilla, apenas com o Vite para build.

Iniciando a migração para Next.js

Vamos desenvolver um novo projeto migrando o código existente para o framework Next.js com React. Vamos iniciar o desenvolvimento desse novo projeto baseado no que já temos com o React. Vamos juntos, estudantes!