Objeto: criação de aplicação Web e páginas, "do zero", numa aplicação Next JS
Principais termos técnicos abordados: npm, next, JavaScript, JSON, HTML
Requisitos para as instruções funcionarem: ter node JS instalado
Requisitos para compreensão das instruções: noções bem básicas de programação e HTML
Como ler essa receita: instruções, dentro dos passos da receita e que requerem ação sua no computador, estarão escritas em cor azul. Comentários sobre os passos estarão em fonte normal, cor preta. Comandos, código-fonte, termos técnicos ou configuração explícita, estarão com fonte diferenciada.
Observação: instruções de terminal serão comandos Linux. Adapte caso esteja usando outro sistema operacional
Abrir um terminal e criar um diretório para o novo projeto.
mkdir next0 && cd next0
Você pode substituir next0 por algum nome de sua preferência.
npm init -y
Isso cria um arquivo package.json, que é essencial para gerenciar dependências. Verifique o conteúdo do diretório para confirmar a criação desse arquivo.
Instalar next no projeto.
npm install next
Depois disso, teremos o Next JS instalado em nosso projeto Node JS. Tecnicamente, o Next JS é uma dependência do nosso projeto Node JS que foi criado no passo anterior.
Abra o projeto em sua IDE preferida. Se for o VSCode, basta digitar:
code .
Devemos acrescentar script para inicialização da aplicação web em modo desenvolvedor.
Abrir arquivo package.json (está na raiz do projeto) na sua IDE (ou em qualquer editor).
Esse é um arquivo de configuração da sua aplicação web, escrito com as regras de sintaxe do JavaScript Object Notation, o tal JSON (leia "jêizon"). É um formato de arquivo extremamente importante, melhor se acostumar com ele e procurar entendê-lo. Nesse arquivo deve constar, como dependência, ao menos, o próprio Next JS. Outras dependências, como banco de dados, react etc. irão constar nesse arquivo também. Mas por enquanto nossa tarefa é mais simples, vamos acrescentar um script.
As linhas que, no arquivo, estão assim...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
Apague-as e deixe-as assim...
"scripts": {
"dev": "next dev",
"test": "echo \"Error: no test specified\" && exit 1"
},
Cuidado para não esquecer a vírgula após a chave se houver mais entradas após "scripts"! E, se não houver nenhuma entrada "scripts" no arquivo, simplesmente acrescente essa entrada. O package.json final deve ficar mais ou menos assim:
{
outros dados...
"scripts": {
"dev": "next dev",
"test": "echo \"Error: no test specified\" && exit 1"
} ,
"dependencies": {
"next": "^10.0.7"
}
}
Para que esse script? Ele vai permitir que você inicialize sua aplicação web pelo npm, a mesma ferramenta que criou o projeto Node JS e nele incorporou o Next JS lá nos passos 2 e 3. Voltaremos a esse ponto adiante.
Criar um diretório de nome pages
Tem que ser "pages" o nome do diretório, e dentro do diretório raiz do projeto. Não invente de ser criativo aqui. Você pode fazer isso através de seu ambiente de desenvolvimento ou através de um terminal anexo ao seu ambiente de desenvolvimento ou através de um terminal independente. Escolha uma opção e seja feliz.
Criar, dentro do diretório pages, um arquivo index.js
Abri-lo para edição.
Escrever, no arquivo index.js, uma função JavaScript que retorna uma marca HTML.
export default function Home(){
return (
<div>
<h2>
Viva Santana!
</h2>
</div>
)
}
Pronto. Você agora tem uma página na sua aplicação web. No mundo Next JS, que é o framework sob o qual sua aplicação vai rodar, uma página, em linhas gerais, é uma função exportada por default num arquivo dentro do diretório pages (ou subdiretórios). Note que a gente não chama a função Home em momento algum, apena a definimos. É o Next JS que vai chamar essa sua função e usar o resultado dela. Mas precisamos inicializar a nossa aplicação.
No terminal, na raiz do seu projeto, escrever:
npm run dev
Isso deve inicializar um servidor web na porta 3000 da sua máquina e nele instalar a sua aplicação. Que, por enquanto, tem apenas uma página, mas essa página pode ser acessada por navegadores web.
Abrir um navegador no endereço http://localhost:3000
O servidor vai buscar essa rota por default. Outras rotas têm que ser escritas explicitamente.
Quando o acesso a essa página é solicitado pelo navegador, o servidor web vai passar a requisição para o Next JS (lembre-se, o next é um framework, e sua página está "subordinada" a ele). O Next JS vai identificar que há uma função exportada por default naquela página e vai fazer o que for necessário para que a função seja invocada e seu resultado seja incorporado à página HTML que será visualizada no navegador. Note que escrevemos apenas uma parte da página. Todo o restante foi montado pelo framework. Quando acessar a página, clique com o botão direito do mouse e acione a opção de visualizar ou inspecionar o código HTML da página. Você deverá perceber que é até com certa dificuldade que achamos o div resultante da função que escrevemos, tanto código HTML além dele existe na página.
Para atividades iniciais, especialmente se o foco é entender o básico de rotas e o funcionamento do Next.js, a estrutura pages/ é mais indicada. Ela é simples, direta e já atende aos requisitos de criação de páginas e rotas que você mencionou. Conforme você avançar e precisar de mais flexibilidade e funcionalidades avançadas, a migração para a estrutura app/ pode ser natural.
Página oficial do Next JS: nextjs.org
Vídeo básico: www.youtube.com/watch?v=EW7m2WIvFgQ
Com as versões mais recentes do Next.js, o processo de inicialização de projetos foi simplificado e automatizado. A abordagem recomendada é usar o comando create-next-app, que configura todo o ambiente automaticamente, incluindo a instalação de dependências, estrutura de diretórios e scripts iniciais.
Aqui está como criar e iniciar um projeto de forma atualizada:
Criar um novo projeto: Em vez de criar o diretório manualmente e configurar o package.json, execute o seguinte comando:
npx create-next-app@latest nome-do-projeto
npx: Executa pacotes Node.js sem instalá-los globalmente.
create-next-app@latest: Baixa a versão mais recente do instalador do Next.js.
nome-do-projeto: Substitua pelo nome do seu projeto.
Escolha das opções: Durante a execução do comando, você será solicitado a selecionar algumas configurações, como:
Tipo de projeto (JavaScript ou TypeScript).
Inclusão de ESLint para padronização de código.
Uso de Tailwind CSS ou outros frameworks de CSS.
Configuração de diretórios específicos, como app/ (para usar o App Router).
Iniciar o servidor de desenvolvimento: Após criar o projeto, entre no diretório e inicie o servidor:
cd nome-do-projeto
npm run dev
Estrutura básica criada automaticamente: O comando create-next-app cria a estrutura padrão, que inclui os diretórios necessários, como:
pages/ ou app/ (dependendo da escolha).
public/ para assets estáticos.
styles/ para arquivos de CSS.
Arquivos de configuração como package.json e next.config.js.
Esse método é mais eficiente, garante que você esteja alinhado com as práticas atuais do Next.js e elimina erros manuais durante a configuração inicial.
Crie novos arquivos js no diretório pages e escreva novas funções, teste para ver se o navegador exibe a função exportada como default
Tente usar, nos novos arquivos js, funções apenas exportadas (não default) no arquivo index.js (isso requer um real e 99 de desenrolômetro de sua parte enquanto programador, apenas escrever as marcas não há de funcionar)