yarn create next-app
# or
npx create-next-app
Ao executar este comando, Next.js primeiro pedirá a você um nome de projeto. Aqui podemos usar qualquer nome que quisermos para identificar o projeto. Vou usar meu-nextjs-app.
Assim que a instalação for concluída, estamos prontos para começar a usar Next.js.
Navegue em seu terminal para o novo diretório onde seu projeto está localizado e execute:
yarn dev
# or
npm run devIsso iniciará seu servidor de desenvolvimento, que disponibilizará seu novo site em http: // localhost: 3000.
Se você abrir o seu http: // localhost: 3000 endereço, você agora deve ver o projeto padrão Next.js!
Etapa 2: Configurando o projeto com Git
Você vai querer definir esta próxima etapa por conta própria. Crie um novo repositório com seu provedor Git favorito que seja compatível com Vercel.
No momento em que escrevo isto, Vercel é compatível com GitHub, Gitlab e Bitbucket.
Se você está escolhendo um provedor pela primeira vez, o GitHub é uma opção sólida e fácil de começar.
Em seguida, você desejará adicionar seu projeto a esse novo repositório e enviar o projeto para o Git.
Preciso de ajuda? Confira “Adicionando um projeto existente ao GitHub usando a linha de comando” https://docs.github.com/en/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line
Para o restante deste passo a passo, farei referência ao GitHub, mas as instruções devem ser as mesmas para qualquer provedor compatível.
Etapa 3: Implantando Next.js com Vercel
Depois que seu projeto estiver configurado com GitHub, navegue até vercel.com e faça login.
Se você ainda não tem uma conta Vercel, deve criar uma agora. Eu recomendaria criar uma conta com sua conta GitHub, pois isso ajudará você a importar seu projeto.
Dentro do painel do Vercel, clique em Projeto de importação.
Em seguida, em Importar Repositório Git, clique em Continuar.
Vercel agora pedirá a URL do repositório. Esta será a página inicial do repositório que você acabou de criar para o seu projeto.
Depois de clicar em Continuar, o Vercel já detectou que seu projeto usa Next.js. Isso significa que não precisamos definir e personalizar configurações e podemos clicar em Implementar!
Neste ponto, a Vercel começará a trabalhar e começar a construir o novo projeto e implantá-lo em sua infraestrutura.
Assim que terminar, ele irá parabenizá-lo e fornecer um link para visitar seu site.
Clique em Visit e você será direcionado ao seu projeto ao vivo na internet:
O que acabamos de implantar?
Acabamos de criar um novo aplicativo React com Next.js e implementá-lo no Vercel.
Percorreremos cada etapa específica:
- Criar próximo aplicativo: Primeiro criamos um novo projeto Next.js em nosso computador. Isso nos forneceu um novo aplicativo React completo com dependências e código para começar com um site básico.
- Adicionar projeto ao Git: Adicionamos nosso novo projeto Next.js a um repositório Git online com suporte do Vercel. Isso nos permite interagir facilmente com o projeto com outros serviços como o Vercel.
- Conecte o Git ao Vercel: Importamos nosso projeto do Git para o Vercel. Isso permitiu que Vercel interaja com nosso código.
- Construir e implantar com Vercel: Vercel baixou nosso código, foi capaz de reconhecer que era um projeto Next.js, construiu nosso projeto e implantou a saída compilada em sua infraestrutura e a disponibilizou na web.
Se você estava esperando por mais etapas para divulgar seu projeto ao mundo, não há nenhuma! O ponto de entrada para publicar um novo projeto React agora está mais baixo do que nunca e Next.js e Vercel estão ajudando você a chegar lá.
Compreendendo CI / CD moderno com Git
Outro benefício de provedores de infraestrutura modernos, como o Vercel, é que ao utilizar o GitHub como uma conexão de serviço, o Vercel pode observar as mudanças em nossa filial principal.
Assim que o Vercel reconhecer que uma alteração foi feita, ele fará o download do código mais recente e executará novamente o mesmo processo que fizemos da primeira vez (além de qualquer cache e otimização).
Isso significa que sempre que houver novas alterações em nosso ramo de produção, elas serão implementadas automaticamente.
Faça uma mudança e observe a implantação automática
Para testar as implantações automáticas, vamos fazer uma mudança em nosso projeto.
Dentro de nosso projeto, vamos fazer uma mudança em parte do conteúdo da página dentro de pages/index.js. Vou mudar o título para “Projeto Next.js de Colby”.
<h1 className={styles.title}>
Colby's Next.js App
</h1>Em seguida, envie essa alteração para seu branch principal do Git e envie-o para o GitHub.
Se você esperar alguns segundos e navegar de volta para vercel.com, encontre seu projeto e clique na guia Implementações.
Você verá que seu projeto agora está em execução ou pode já ter sido concluído se você não for rápido o suficiente. Agora, se você abrir o link do seu site novamente, verá as mudanças implantadas!
O que aprendemos?
Next.js é uma estrutura da web que nos permite criar um novo aplicativo React de maneira rápida e fácil.
Isso, junto com outras estruturas semelhantes, pode ser útil para se tornar imediatamente produtivo, em vez de gastarmos tempo construindo nós mesmos a estrutura do projeto.
Vercel é uma plataforma de hospedagem e implantação que nos permite a integração com nosso provedor Git compatível favorito. Uma vez conectado, Vercel irá baixar nosso projeto, construir nosso projeto e distribuir a saída para a internet.
Ferramentas de infraestrutura modernas como o Vercel observarão as mudanças em nosso repositório Git e construirão e implantarão nosso projeto para que sempre vejamos a versão mais recente.
Saiba mais sobre o Jamstack!
Você pode aprender mais sobre o Jamstack, incluindo mais 2 tutoriais detalhados, com meu Manual do Jamstack.