Introdução ao Next.js no Windows

Um guia para ajudá-lo a instalar o sistema de estrutura da Web Next.js e iniciar no sistema Windows.

Next.js é uma estrutura JavaScript adaptada para a criação de aplicativos Web baseados em React, oferecendo suporte para aplicativos Web renderizados estáticos e do lado do servidor. Criado com as melhores práticas em mente, o Next.js permite criar aplicativos Web "universais" de maneira consistente, exigindo configuração mínima. Esses aplicativos Web renderizados em servidor "universais", também conhecidos como "isomórficos", compartilham código entre o cliente e o servidor. Next.js permite que os desenvolvedores criem aplicativos da Web rápidos, escaláveis e amigáveis para SEO com facilidade.

Para saber mais sobre o React e outras estruturas JavaScript baseadas no React, consulte a página de visão geral do React .

Pré-requisitos

Este guia pressupõe que você já tenha concluído as etapas para configurar seu ambiente de desenvolvimento Node.js, incluindo:

• Instale a versão mais recente do Windows 10 (Versão 1903+, Build 18362+) ou Windows 11
• Instale o Windows Subsystem for Linux (WSL), incluindo uma distribuição Linux (como o Ubuntu) e certifique-se de que está a ser executado no modo WSL 2. Você pode verificar isso abrindo o PowerShell e digitando: wsl -l -v
• Instalar Node.js no WSL 2: Isso inclui um gerenciador de versões, gerenciador de pacotes, Visual Studio Code e a extensão de desenvolvimento remoto.

Recomendamos o uso do Subsistema Windows para Linux ao trabalhar com aplicativos NodeJS para melhor velocidade de desempenho, compatibilidade de chamadas do sistema e paridade ao executar servidores Linux ou contêineres Docker.

Importante

Instalar uma distribuição Linux com WSL criará um diretório para armazenar arquivos: \\wsl\Ubuntu-20.04 (substitua o Ubuntu-20.04 por qualquer distribuição Linux que você esteja usando). Para abrir este diretório no Explorador de Arquivos do Windows, abra a linha de comando WSL, selecione o diretório base usando cd ~e digite o comando explorer.exe . Tenha cuidado para não instalar o NodeJS ou armazenar arquivos com os quais você trabalhará na unidade C montada (/mnt/c/Users/yourname$). Isso diminuirá significativamente os tempos de instalação e construção.

Instalar Next.js

Para instalar o Next.js, que inclui a instalação next, react, e react-dom:

1. Abra uma linha de comando WSL (ou seja, Ubuntu).

2. Crie uma nova pasta de projeto: mkdir NextProjects e digite esse diretório: cd NextProjects.

3. Instale Next.js e crie um projeto (substituindo 'my-next-app' pelo que você gostaria de chamar de seu aplicativo): npx create-next-app@latest my-next-app.

4. Depois que o pacote tiver sido instalado, altere os diretórios para a nova pasta do aplicativo e, em seguida, cd my-next-appuse code . para abrir seu projeto Next.js no VS Code. Isso permitirá que você examine a estrutura de Next.js que foi criada para seu aplicativo. Observe que o VS Code abriu seu aplicativo em um ambiente WSL-Remote (conforme indicado na guia verde no canto inferior esquerdo da janela do VS Code). Isso significa que, enquanto você estiver usando o VS Code para edição no sistema operacional Windows, ele ainda está executando seu aplicativo no sistema operacional Linux.

   

5. Existem 3 comandos que você precisa saber uma vez que Next.js é instalado:

   • npm run dev para iniciar Next.js no modo de desenvolvimento.
   • npm run build para criar o aplicativo para uso em produção.
   • npm start para iniciar um servidor de produção Next.js.

   Abra o terminal WSL integrado no VS Code (View > Terminal). Certifique-se de que o caminho do terminal está apontado para o diretório do projeto (isto é, ~/NextProjects/my-next-app$). Em seguida, tente executar uma instância de desenvolvimento do seu novo aplicativo Next.js usando: npm run dev

6. O servidor de desenvolvimento local será iniciado e, assim que as páginas do teu projeto estiverem concluídas, o teu terminal exibirá

   - Local: http://localhost:3000
   ✔ Ready
   

   Selecione este link localhost para abrir seu novo aplicativo Next.js em um navegador da Web.

   

7. Abra o app/page.tsx arquivo no editor do VS Code. Encontre Get started by editing.. e substitua tudo o que está dentro da <p> tag por This is my new Next.js app!the page title. Com seu navegador da Web ainda aberto para localhost:3000, salve sua alteração e observe que o recurso de recarregamento a quente compila e atualiza automaticamente sua alteração no navegador.

Você pode usar o depurador do VS Code com o seu aplicativo Next.js pressionando F5 ou acessando Ver > Depurar (Ctrl+Shift+D) e Ver > Consola de Depuração (Ctrl+Shift+Y) na barra de menus. Se seleccionares o ícone de engrenagem na janela de Depuração, será criado um ficheiro de configuração de inicialização (launch.json) para guardar os detalhes da configuração de depuração. Para saber mais, consulte Depuração de código VS.

Para saber mais sobre Next.js, consulte os Next.js documentos.