Tutorial Next.js para Iniciantes

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.

#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).

npx create-next-app nextjs-tutorial

1	npx create-next-app nextjs-tutorial

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.

npm run dev

1	npm run dev

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.

#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.

function About() {
    return (
        <>
            <h1>About</h1>
        </>
    )
}

export default About;

function About() {

return (

<h1>About</h1>

</>

)

}

export default About;

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.