Introdução ao Next.js no Windows

Next.js é uma estrutura para criar aplicativos JavaScript renderizados pelo servidor com base em React.js, Node.js, Webpack e Babel.js. Ele é basicamente um projeto genérico para o React, criado de acordo com as práticas recomendadas, que permite criar aplicativos Web “universais” de forma simples e consistente, praticamente com qualquer configuração. Esses aplicativos Web “universais” renderizados pelo servidor também são chamados de “isomórficos”, o que significa que o código é compartilhado entre o cliente e o servidor.

Para saber mais sobre o React e outras estruturas JavaScript baseadas no React, confira 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 o ambiente de desenvolvimento do Node.js, incluindo:

• Instalar o Node.js: isso inclui um gerenciador de versões, um gerenciador de pacotes, o Visual Studio Code e a extensão de desenvolvimento remoto.

Recomendo usar a instalação padrão do Node.js para evitar futuros problemas de configurações de path e varáveis de ambiente no windows.

Instalar o Next.js

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

1. Abra uma linha de comando cmd.
2. Crie uma pasta de projeto, mkdir NextProjects, e insira este diretório: cd NextProjects.
3. Instale o Next.js e crie um projeto (substituindo “my-next-app” pelo nome que você gostaria para seu aplicativo): npx create-next-app my-next-app.
4. Depois de instalar o pacote, altere os diretórios para sua nova pasta de aplicativo, cd my-next-app, e use code . para abrir o projeto Next.js no VS Code. Assim, você pode examinar a estrutura do Next.js criada para seu aplicativo. Observe que o VS Code abriu seu aplicativo em um ambiente WSL remoto (como indicado na guia verde na parte inferior esquerda da janela do VS Code). Isso significa que, enquanto você estiver usando o VS Code para editar no sistema operacional Windows, ele ainda estará executando seu aplicativo no sistema operacional Linux.
5. Há três comandos que você precisará saber quando o Next.js estiver instalado:
   • npm run dev para executar uma instância de desenvolvimento com recarga dinâmica, observação de arquivo e nova execução de tarefa.
   • npm run build para compilar seu projeto.
   • projeto.npm start para iniciar seu aplicativo no modo de produção. Abra o terminal no VS Code (Exibir > Terminal). Verifique se o caminho do terminal está indicando o diretório do projeto (por exemplo, C:\users\NextProjects\my-next-app).
   • Em seguida, tente executar uma instância de desenvolvimento do novo aplicativo Next.js usando: npm run dev ele pode ser executado pelo cmd do windows ou pelo console do Visual Code.

Visualização da Aplicação:

1. O servidor de desenvolvimento local será iniciado e, depois que a criação das páginas do projeto for concluída, o terminal exibirá “compilado com êxito – pronto em http://localhost:3000“. Selecione esse link do localhost para abrir o novo aplicativo Next.js em um navegador da Web.
2. Abra o arquivo pages/index no editor do VS Code. Localize o título da página <h1 className='title'>Welcome to Next.js!</h1> e altere-o para <h1 className='title'>Meu primeiro aplicativo com Next.js</h1>. Com o navegador da Web ainda aberto em localhost:3000, salve sua alteração e observe que o recurso de recarga dinâmica compila e atualiza automaticamente a alteração no navegador.
3. Vejamos como o Next.js lida com erros. Remova a marca de fechamento </h1> para que o código de título agora tenha esta aparência: <h1 className='title'>This is my new Next.js app!. Salve essa alteração e observe que será exibido o erro “Falha ao compilar” no navegador e no seu terminal, informando que se espera uma marca de fechamento para <h1>. Substitua a marca de fechamento </h1>, salve, e a página será recarregada.

Deseja saber mais sobre programação Clique aqui.