Introdução

A instalação do Next.js é muito simples e rápida. Abaixo você encontra o passo a passo para instalar o Next.js em seu projeto.

Requerimentos

É necessário que se tenha o Node e o npm instalados em sua máquina para que o Next.js funcione corretamente. O Node deve ser da versão 18.18 ou superior.

Para verificar se o Node e o npm estão instalados, execute os comandos abaixo no terminal:

npx create-next-app@latest

Instalação

O nosso projeto já está completamente configurado e pronto para ser utilizado.

Instalação Automática

O nosso projeto já está completamente configurado e pronto para ser utilizado. Porém, caso você deseje criar um novo projeto, podemos criá-lo com a CLI do Next.js.

node -v
npm -v

A CLI do Next apresentará algumas opções para a criação do seu projeto, para o template padrão, basta aceitar as opções padrão apresentadas.

No nosso projeto, utilizamos o sistema de roteamento mais recente, por meio do diretório /app ao invés de /pages.

Instalação Manual

Também podemos instalar o Next.js manualmente à um projeto. Primeiramente execute npm init -y para criar um arquivo package.json em seu projeto.

Instalaremos as dependências necessárias para o Next.js funcionar corretamente.

npm install next@latest react@latest react-dom@latest

Em seguida, adicione os scripts necessários ao seu arquivo package.json:

1

Como o Next utiliza um sistema de roteamento baseado em diretórios, é necessário criar um diretório chamado app na raiz (após o diretório src) do projeto. Nele você colocará os arquivos de rota do seu projeto.

Dentro desse diretório, crie um arquivo chamado layout.tsx e page.tsx adicione o seguinte código:

1

1

O arquivo layout.tsx serve como um layout padrão para todas as páginas do seu projeto. O arquivo page.tsx é a página inicial do seu projeto. Mais informações sobre o sistema de roteamento do Next.js podem ser encontradas aqui.

Configuração

A configuração do Next.js é muito simples e rápida. O Next.js já vem com uma série de configurações padrão que podem ser alteradas conforme a necessidade do seu projeto. O Typescript já vem configurado por padrão no Next.js, assim como o ESLint.

Caso deseje, é possivel alterar as configurações do Next.js, Typescript e ESLint; nos seus respectivos arquivos de configuração (next.config.ts, tsconfig.json e eslint.config.mjs).