Instalação do Next.js
Para começar a usar Next.js, você pode seguir o processo de instalação automatizado com o comando npx create-next-app. Este comando cria um novo projeto Next.js com a configuração inicial pronta para uso.
Passo 1: Iniciando a instalação
Abra o terminal ou prompt de comando e execute o seguinte comando:
$ npx create-next-app@latestPasso 2: Respondendo aos prompts
Durante a execução do comando, você será solicitado a fornecer algumas informações para personalizar seu projeto.
1. What is your project named?
Solicita que você forneça um nome para o seu projeto.
Exemplo: Se você digitar my-app, o diretório do projeto será criado com esse nome, e o package.json será configurado com esse nome.
2. Would you like to use TypeScript?
Permite que você escolha se deseja usar TypeScript, uma linguagem que adiciona tipagem estática ao JavaScript. Usar TypeScript pode ajudar a evitar erros comuns de codificação e melhorar a manutenção do código.
Recomendação: Se você já está familiarizado com TypeScript ou deseja aproveitar os benefícios da tipagem forte, então escolha “Yes”.
3. Would you like to use ESLint?
O ESLint é uma ferramenta de linting para JavaScript que ajuda a identificar e corrigir problemas de estilo e qualidade no código. Escolher “Yes” configura automaticamente o ESLint em seu projeto.
Recomendação: Se você deseja manter um padrão de código consistente e evitar erros, escolha “Yes”.
4. Would you like to use Tailwind CSS?
Tailwind CSS é um framework de CSS utilitário que permite criar designs personalizados rapidamente. Se você escolher “Yes”, o Next.js configurará automaticamente o Tailwind CSS em seu projeto.
Recomendação: Se você planeja usar Tailwind CSS para estilização, escolha “Yes”. Caso contrário, você pode optar por “No” e usar CSS tradicional ou outro método de estilização, como o CSS-in-JS.
5. Would you like to use src/ directory?
Esta opção permite que você escolha se deseja organizar seu código dentro de uma pasta src/. Essa prática é comum em projetos maiores, pois ajuda a manter o código mais organizado.
Recomendação: Se você está criando um projeto pequeno, “No” pode ser suficiente. Para projetos maiores ou se você preferir uma estrutura mais organizada, escolha “Yes”.
6. Would you like to use App Router? (recommended)
O App Router é uma nova abordagem de roteamento no Next.js que permite uma melhor organização e gerenciamento de rotas. Ele é recomendado para novos projetos.
Recomendação: Escolha “Yes” para aproveitar as facilidades do roteamento baseado na hierarquia dos arquivos e diretórios.
7. Would you like to customize the default import alias (@/*)?
Essa opção permite que você personalize o alias de importação padrão. O alias @/* é frequentemente usado para facilitar as importações, evitando caminhos relativos complexos.
Recomendação: Se você deseja usar um alias personalizado para suas importações, escolha “Yes”. Caso contrário, “No” usará o alias padrão.
8. What import alias would you like configured?
Se você escolheu personalizar o alias de importação, este prompt solicita que você forneça o nome do alias. O valor padrão é @/*, que é uma convenção comum.
Exemplo: Se você digitar @/*, você poderá usar esse alias em suas importações, como import Component from '@/components/Component';.
Conclusão
Essas opções permitem que você configure seu projeto Next.js de acordo com suas preferências e necessidades específicas, proporcionando uma base sólida para o desenvolvimento.
Após responder a todos os prompts, o Next.js configurará seu projeto automaticamente, instalando todas as dependências necessárias e criando a estrutura básica do seu projeto.
Depois que a instalação for concluída, você pode navegar até o diretório do projeto e iniciar o servidor de desenvolvimento com os seguintes comandos:
cd my-app
npm run devSeu projeto Next.js estará disponível em http://localhost:3000, pronto para desenvolvimento!