escola.all.dev.brEscola de Programação

Fundamentos do Next.js 15

0/26 aulas0%
pratica

Configurando seu primeiro projeto Next.js 15 com create-next-app

Aprenda sobre configurando seu primeiro projeto next.js 15 com create-next-app

45 min
Aula 2 de 5

Módulo 1: Introdução e Setup do Next.js 15

Aula: Configurando seu primeiro projeto Next.js 15 com create-next-app

Olá, futuro desenvolvedor Next.js! 👋 Nesta aula prática, você dará o primeiro passo para construir aplicações web modernas e de alta performance. Vamos configurar seu primeiro projeto Next.js 15 usando a ferramenta oficial create-next-app. Prepare-se para codificar! 🚀

1. Introdução ao create-next-app

create-next-app é a maneira oficial e recomendada de iniciar um novo projeto Next.js. Pense nele como um assistente inteligente que configura toda a estrutura básica, as dependências essenciais e os arquivos de configuração para você. Isso significa menos tempo configurando e mais tempo desenvolvendo!

Por que usar create-next-app?

  • Setup Rápido e Otimizado: Ele garante que seu projeto comece com as melhores práticas e configurações recomendadas pelo time do Next.js.
  • Consistência: Todos os projetos iniciados com ele seguem uma estrutura padrão, facilitando a colaboração e a manutenção.
  • Modelos (Templates): Permite iniciar projetos com funcionalidades específicas já configuradas (como integração com CMS, testes, etc.).

Vamos mergulhar na prática!

2. Configurando seu Projeto Next.js 15

Para começar, você precisará ter o Node.js (versão 18.17 ou superior) instalado em sua máquina. Se ainda não tiver, pause aqui e instale-o.

2.1. Criando um Projeto Básico

A forma mais comum de iniciar um projeto é usando o comando create-next-app sem opções adicionais, permitindo que você personalize as configurações básicas.

npx create-next-app@latest

Ao executar este comando, o terminal fará algumas perguntas interativas:

# Exemplo de interação no terminal:
 
What is your project named? my-nextjs-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Explicação das opções:

  • my-nextjs-app: O nome da sua pasta de projeto.
  • TypeScript: Recomendado para projetos maiores e para aproveitar a tipagem estática.
  • ESLint: Ferramenta para garantir a qualidade e consistência do código.
  • Tailwind CSS: Um framework CSS utilitário popular para estilização rápida.
  • src/ directory: Organiza seu código fonte dentro de uma pasta src.
  • App Router: O novo sistema de roteamento do Next.js (recomendado e foco deste curso).
  • Import alias: Ajuda a criar caminhos de importação mais limpos (ex: @/components/Button ao invés de ../../components/Button).

2.2. Iniciando o Servidor de Desenvolvimento

Após a criação do projeto, você precisará navegar até a pasta do projeto e instalar as dependências.

# 1. Navegue para a pasta do seu projeto
cd my-nextjs-app
 
# 2. Instale as dependências (usando npm, yarn ou pnpm)
npm install
# ou
# yarn install
# ou
# pnpm install
 
# 3. Inicie o servidor de desenvolvimento
npm run dev
# ou
# yarn dev
# ou
# pnpm dev

Ao executar npm run dev, o Next.js iniciará um servidor de desenvolvimento local, geralmente na porta 3000. Você verá algo como:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Agora, abra seu navegador e acesse http://localhost:3000. Você deverá ver a página inicial padrão do Next.js! 🎉

2.3. Criando Projetos com Modelos (Templates) Oficiais

create-next-app também permite iniciar projetos a partir de exemplos oficiais, que já vêm com configurações e integrações pré-definidas. Isso é ótimo para explorar funcionalidades específicas ou para iniciar projetos com requisitos mais complexos.

Exemplo 1: Projeto com Cypress (para Testes E2E)

Se você planeja integrar testes End-to-End (E2E) com Cypress desde o início, pode usar o modelo with-cypress.

npx create-next-app@latest my-nextjs-cypress-app --example with-cypress

Este comando fará o download do exemplo with-cypress do repositório oficial do Next.js e o configurará em sua nova pasta my-nextjs-cypress-app.

Exemplo 2: Projeto com CMS (TinaCMS)

Para um projeto que precisa de um sistema de gerenciamento de conteúdo (CMS) headless, como o TinaCMS, você pode usar o modelo cms-tina.

npx create-next-app@latest my-nextjs-cms-app --example cms-tina

Este comando configurará um projeto Next.js com TinaCMS já integrado, fornecendo uma base sólida para um site com conteúdo gerenciável.

Após criar um projeto com um template, lembre-se sempre de:

  1. Navegar até a pasta do projeto: cd my-nextjs-cypress-app (ou my-nextjs-cms-app).
  2. Instalar as dependências: npm install.
  3. Iniciar o servidor de desenvolvimento: npm run dev.

3. Estrutura Básica de um Projeto Next.js

Ao criar um projeto Next.js com o App Router (que é o padrão recomendado), você encontrará uma estrutura de pastas semelhante a esta:

my-nextjs-app/
├── app/                  # Contém todas as suas rotas, layouts e páginas (App Router)
│   ├── layout.tsx        # Layout principal da sua aplicação
│   └── page.tsx          # Página inicial (/)
├── public/               # Ativos estáticos como imagens, fontes, etc.
│   └── next.svg
├── .next/                # Pasta gerada pelo Next.js (não edite!)
├── node_modules/         # Dependências do projeto
├── package.json          # Metadados do projeto e scripts
├── next.config.js        # Configurações do Next.js
├── postcss.config.js     # Configurações do PostCSS (se usar Tailwind)
├── tailwind.config.ts    # Configurações do Tailwind CSS (se usar Tailwind)
├── tsconfig.json         # Configurações do TypeScript (se usar TypeScript)
└── .env                  # Variáveis de ambiente (opcional)

A pasta app/ é o coração do seu projeto Next.js 15, onde você definirá suas rotas e componentes.

4. Exercícios Práticos

É hora de colocar a mão na massa! Siga os passos abaixo para configurar seus primeiros projetos Next.js.

Exercício 1: Projeto Básico com App Router

Seu objetivo é criar um novo projeto Next.js 15 do zero, usando as configurações padrão recomendadas.

  • Abra seu terminal.
  • Execute o comando para criar um novo projeto: npx create-next-app@latest
  • Responda às perguntas interativas da seguinte forma:
    • What is your project named?: meu-primeiro-nextjs
    • Would you like to use TypeScript?: Yes
    • Would you like to use ESLint?: Yes
    • Would you like to use Tailwind CSS?: Yes
    • Would you like to use src/ directory?: No
    • Would you like to use App Router? (recommended): Yes
    • Would you like to customize the default import alias (@/*)?: Yes
    • What import alias would you like configured?: @/* (padrão)
  • Navegue para a pasta do projeto: cd meu-primeiro-nextjs
  • Instale as dependências: npm install (ou yarn install, pnpm install)
  • Inicie o servidor de desenvolvimento: npm run dev
  • Abra seu navegador e verifique se a aplicação está rodando em http://localhost:3000.
  • Abra o projeto em seu editor de código (ex: VS Code) e explore a estrutura de pastas.

Exercício 2: Projeto com Template de Testes (Cypress)

Vamos criar um segundo projeto, desta vez usando um template pré-configurado para testes E2E.

  • Volte para a pasta pai (fora de meu-primeiro-nextjs): cd ..
  • Execute o comando para criar um novo projeto com o template with-cypress: 
    npx create-next-app@latest meu-nextjs-com-cypress --example with-cypress
  • Navegue para a pasta do projeto: cd meu-nextjs-com-cypress
  • Instale as dependências: npm install
  • Inicie o servidor de desenvolvimento: npm run dev
  • Abra seu navegador e verifique se a aplicação está rodando em http://localhost:3000.
  • Abra o projeto em seu editor de código e observe a pasta cypress/ e os arquivos de configuração relacionados.

Exercício 3 (Desafio Opcional): Personalizando a Página Inicial

No seu projeto meu-primeiro-nextjs, faça uma pequena alteração na página inicial.

  • No seu editor de código, abra o arquivo app/page.tsx (ou src/app/page.tsx se você escolheu a pasta src).
  • Localize o texto "Get started by editing app/page.tsx" (ou similar).
  • Altere este texto para "Olá, Next.js 15! Meu primeiro projeto! 👋".
  • Salve o arquivo.
  • Volte para o navegador (http://localhost:3000). Graças ao "Hot Module Replacement" do Next.js, você deverá ver a alteração instantaneamente, sem precisar recarregar a página manualmente! ✨

5. Resumo e Próximos Passos

Parabéns! 🎉 Você configurou com sucesso seu primeiro projeto Next.js 15 e aprendeu a usar a poderosa ferramenta create-next-app. Dominar esta etapa é fundamental para qualquer jornada com Next.js.

Nesta aula, você aprendeu a:

  • Utilizar create-next-app para iniciar projetos Next.js.
  • Instalar dependências e iniciar o servidor de desenvolvimento.
  • Criar projetos a partir de templates oficiais, como with-cypress.
  • Entender a estrutura básica de pastas de um projeto Next.js com App Router.

Na próxima aula, vamos aprofundar na estrutura de pastas do Next.js 15, com foco no App Router, e entender como as rotas, layouts e componentes funcionam juntos para construir sua aplicação.

Até lá, continue explorando seus novos projetos! 😉

Ver Curso

© 2025 Escola All Dev. Todos os direitos reservados.

Configurando seu primeiro projeto Next.js 15 com create-next-app - Fundamentos do Next.js 15 | escola.all.dev.br