Receita-Next-01

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

Passo 1

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.

Passo 2

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.

Passo 3

Instalar next no projeto.

npm i 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. Você pode ver a versão do next instalada dando uma olhada no conteúdo do package.json. Quando da escrita desta receita, meu package.json ficou assim:

{

  "name": "next0",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "description": "",

  "dependencies": {

    "next": "^15.1.1"

  }

}

Isso significa que a versão do next instalada pelo comando foi a 15.1.1. 

Passo 4

Abra o projeto em sua IDE preferida. Se for o VSCode, basta digitar:

code .

Passo 5

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": "^15.1.1"

  }

}

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.

Passo 6

Criar um diretório de nome app

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.

Passo 7

Criar, dentro do diretório app, um arquivo page.js

Abri-lo para edição.

Se ligue que os nomes têm que ser precisamente esses, então não invente moda.

Passo 8

Escrever, no arquivo page.js, uma função JavaScript que retorna uma marca HTML.

export default function Home(){

    return (

        <div>

            <div>Menu principal</div>

            <div>

                <h1>

                    Viva Santana!

                </h1>

            </div>

        </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 de nome page.js dentro de um diretório app (ou subdiretórios de app). 

Note que a gente não chama a função Home em momento algum, apenas a definimos. É o Next JS que vai chamar essa sua função e usar o resultado dela, se você respeitar a burocracia dos nomes de diretório e arquivos. 

Mas precisamos inicializar a nossa aplicação para ver a mágica.

Passo 9

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.

Passo 10

Abrir um navegador no endereço http://localhost:3000

O servidor web que você inicializou no passo anterior vai receber uma requisição HTTP do navegador solicitando a página default ou a página raiz. O next, que a gente pode entender como nosso servidor, vai associar uma requisição dessas ao componente exportado por default que está dentro do arquivo page.js que está dentro do diretório app. Por isso a importância de manter os nomes e de exportar uma função como default no page.js. 

Esse caminho que a gente criou no nosso projeto (app/page.js) define uma rota. 

Uma rota, essencialmente, é uma página pública, "linkável", servida pelo seu app web. Se sua máquina tiver um endereço IP púbico você pode mandar o link http://SEU_IP_PUBLICO:3000 no grupo de zap da família e escrever "mãe, eu sou um programador web". Não vai ser bem verdade ainda, mas você estará no caminho certo.

Agora vamos ter uma ideia melhor do buraco onde estamos nos metendo. 

Clique com o botão direito do mouse na página exibida no navegador e dê uma olhada no código fonte.

Deve estar mais ou menos assim. 

Veja que a única coisa que a gente escreveu em termos de código (a função Home no app/page.js, cujo retorno está em destaque na imagem) não dá nem 5% da página que é enviada ao navegador (note a barra de navegação no cato superior difeito). É que o NextJS é um framework - um sistema funcional e cheio de tecnologias agregadas a ele que permite que a gente encaixe nossos componentes no meio desse emanharado de tecnologias.

Quando o acesso a essa página é solicitado pelo navegador, a requisição da "página default" vai chegar ao 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 no app/page.js 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á enviada efetivamente em resposta à requisição do navegador. Note que escrevemos apenas uma parte da página. Todo o restante foi montado pelo framework. 

- Ah, professor, e se eu quiser fazer mais rotas no meu sistema?

Calma que o Brasil é nosso. Você faz isso nos exercícios.  

Para saber mais

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

Nota sobre a forma mais avençada de iniciar um projeto Next.js

Com as versões mais recentes do NextJS, o processo de inicialização de projetos foi simplificado e automatizado. A abordagem recomendada para quem já entende um pouco bem sobre programação Web é 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. O comando também permite puxar projetos-exemplo do github. Para quem está iniciando, recomendo a abordagem descrita acima, pois você vai ver menos código e menos arquivos que você não escreveu.

Aqui está como criar e iniciar um projeto de forma avançada:

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

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

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

4. 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 da versão do next).

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

Exercícios

1. Crie novos diretórios dentro do diretório app. Dentro de cada novo diretório, escreve um arquivo page.js e, dentro de cada arquivo page.js, escreva uma função exportada por default ao estilo da função Home em app/page.js. Teste para ver se o navegador exibe a função exportada como default. Se você criou um diretório rota1 dentro de app e fez tudo direitinho, vai poder ver uma página quando acessar http://localhost:3000/rota1

2. Crie novas funções no app/page.js. Essas funções devem exportar componentes JSX como a própria função Home, mas sem ser por default (use apenas o export). Tente usar, nos novos arquivos js dos novos diretórios, as funções apenas exportadas (não default) no arquivo app/page.js (isso requer um real e 99 de desenrolômetro de sua parte enquanto programador, apenas escrever as marcas não há de funcionar)