Tutorial Next.js para Iniciantes

Web

Tutorial Next.js para Iniciantes

Luiz Duarte
Escrito por Luiz Duarte em 19/10/2024
Junte-se a mais de 34 mil devs

Entre para minha lista e receba conteúdos exclusivos e com prioridade

Tutorial atualizado em 19/10/2024!

Este tutorial requer que você já tenha familiaridade com ReactJS. Se esse não for o caso, recomendo que comece por esta série aqui.

Tem alguns anos já que o ReactJS tomou de assalto o mercado de frontend moderno tornando praticamente obsoletas as opções anteriores e mais tradicionais de se programar para web. Claro, existem os concorrentes como Angular e VueJS, mas React realmente reina em popularidade em diversos setores da indústria, dentre eles no mercado web3, que tem sido o meu foco nos últimos anos.

No entanto, ao longo do tempo desde a sua criação, o mercado React foi evoluindo e se adaptando, já que nenhuma tecnologia é perfeita, não é mesmo? Um dos maiores problemas do ReactJS padrão, por exemplo, é SEO, uma vez que SPAs (Single Page Applications) não são bem indexadas pelos mecanismos de busca. Outro problema do React é que ele é uma lib e não um framework, o que o torna bem “chatinho” de configurar toda vez que vai começar uma nova aplicação (eu ouvi React Router DOM?).

Para resolver estes e outros problemas é que foi criado o Next.js, um framework para ReactJS que já vem pré-configurado com tudo o que é mais comum nos projetos (como roteamento) e que também faz a renderização das páginas no lado do servidor, o tecnicamente chamado Server Side Rendering (SSR). Sim, é o mesmo princípio de se trabalhar com Node+EJS/Pug ou ASP.NET, mas agora no mundo React.

Entendido o que é NextJS e para que ele serve, neste tutorial vou lhe ajudar a aprender o básico deste framework já que ele está sendo cada vez mais exigido em vagas de emprego e projetos mundo afora. Se preferir, pode assistir ao vídeo abaixo ao invés de ler.

Curso Node.js e MongoDB

#1 – Hello World

Se você já programa em ReactJS você já tem na sua máquina tudo que é necessário para programar em NextJS, então vamos partir para o console e rodar o comando para criação de um novo projeto Next. Para isso usamos o utilitário Create Next App (CNA) que é muito semelhante ao famoso Create React App (CRA).

Ao rodar este comando ele vai te fazer uma série de perguntas, que o que recomendo no momento é:

  • usar TypeScript? Não (a menos que já saiba usar, ensino aqui);
  • usar ESLint? Não (a menos que já saiba usar);
  • TailWind CSS? Não (não mexeremos em estilos);
  • usar pasta src? Sim
  • usar pasta app? Não
  • App Router? Sim
  • customizar import alias? Não

Após responder estas perguntas, ele vai baixar e instalar tudo que é necessário para você ter um projeto NextJS funcionando. Para rodar o projeto, basta executar o comando abaixo na pasta do mesmo.

Isso vai fazer o processo de compilação e a execução de um servidor de testes em localhost:3000, para que você possa acessar o seu projeto no navegador, tendo como resultado (na data que escrevo este post) a imagem abaixo (ou muito parecido).

Para finalizarmos este Hello World, vá na pasta src/app e procure pelo page.js. É ele que representa a página que você acabou de ver e notará que é 99% semelhante a uma página ou componente funcional ReactJS. Se fizer qualquer edição nele e salvar, deve ver as alterações ao vivo no navegador, como no caso abaixo onde troquei a imagem central por título (h1) de olá mundo.

E com isso finalizamos esta primeira etapa, você tem um projeto NextJS funcionando na sua máquina e sabe como editá-lo.

Curso FullStack

#2 – Estrutura do Projeto

Antes de sair programando funcionalidades em nossa aplicação NextJS é importante a gente entender minimamente como está estruturada esta aplicação.

No nível raiz nós temos:

  • .next: página com a aplicação compilada, ou seja, do jeito que ela é executada;
  • node_modules: pasta com as dependências do projeto
  • public: pasta com os assets públicos e estáticos da aplicação como ícones, imagens, etc
  • src: pasta com os códigos do projeto, falaremos em mais detalhes desta pasta depois
  • .gitignore: se houver, é o arquivo de configuração do Git
  • jsconfig.json: arquivo de configurações
  • next.config.js: arquivo de configurações do Next
  • package.json: arquivo de configuração do projeto como um todo (explico melhor aqui)

Boa parte do seu tempo desenvolvendo vai ser dentro da pasta src, então vamos dar uma olhada na estrutura contida dentro dela antes de avançar.

  • /app: nesta pasta ficam as páginas da sua aplicação, como a page.js, mas também ficam algumas outras estruturas importantes, que falarei a seguir;
  • page.js: página inicial da sua aplicação (path raiz);
  • layout.js: arquivo “template” para o HTML que vai ser renderizado, servindo como uma estrutura global para as páginas;
  • page.module.css e globals.css: estilos CSS da aplicação, tanto os globais (globals.css), quanto os específicos de cada página (page.module.css);

Não é nada muito diferente do que vemos em aplicações React, certo? Uma das primeiras diferenças reais você vai ver no próximo bloco.

#3 – Roteamento de Páginas

Criar uma nova página em NextJS é muito simples. Basta que você vá na pasta src e crie uma nova pasta com o nome da seção do seu site que vai criar, por exemplo “about”. Dentro desta nova pasta, crie um novo arquivo com nome de page.js e coloque uma component function como faria no React, retornando o JSX a ser renderizado, como abaixo.

A grande diferença vem agora na questão do roteamento. Diferente do React onde teríamos de instalar uma dependência para o roteamento entre as páginas (a famosa lib React Router DOM), aqui no Next nós convencionamos que toda pasta adicionada em /app/ deve possuir uma rota de mesmo nome, automaticamente e que o conteúdo dela fica no page.js.

Assim, se eu tenho um app/about/page.js, então automaticamente o Next vai gerar pra mim uma rota /about na aplicação. Sério, pode testar logo após finalizar a sua edição do arquivo about.js.

Com exceção se precisar de subníveis, parâmetros, segurança, etc; esse roteamento mais básico já atende muito bem aos projetos mais simples.

E com isso finalizamos esta primeira rodada de aprendizados com Next.js, leia a parte 2 aqui!

TAGS:

Olá, tudo bem?

O que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

4 Replies to “Tutorial Next.js para Iniciantes”

LSOFECIA

É um óptimo conteúdo, deu pra entender como o Nextjs funciona

Luiz Duarte

Fico feliz que tenha gostado.

Matheus

Ótimo material, ficaria melhor ainda se atualizar o vídeo para a nova versão do next

Luiz Duarte

O texto está atualizado. O vídeo em breve eu devo fazer um aulão ao vivo no canal com a versão mais atualizada, fica de olho.