Criando uma aplicação com create-next-app

Criando uma aplicação com create-next-app

O create-next-app é uma CLI que já traz tudo configurado para você em uma aplicação Next.js, assim só precisa se preocupar em codar sua aplicação e não a configurar webpack, babel e etc.. por exemplo.

Para criar uma aplicação simples utilizando create-next-app precisamos ter instalado em nossa máquina:

  • Node + NPM
  • yarn

Agora no terminal utilizaremos o seguinte comando dentro da pasta que desejamos criar nosso projeto

npx create-next-app
# ou
yarn create next-app

Eu particularmente separo minhas aplicações dentro de uma pasta chamada: www

Após ser executado você pode abrir o projeto na sua IDE, no meu caso estou utilizando o VScode, então basta utilizar os comandos abaixo:

cd nome-do-app

code .

A estrutura de pastas do projeto será igual a essa abaixo:

Criaremos uma pasta src na raiz do projeto e vamos jogar a pasta pages dentro dela:

Dentro de pages é onde você poderá criar todas as suas páginas, por padrão o Next ja irá fazer o roteamento da sua aplicação sempre que criar uma nova página, cada arquivo .js dentro de pages será uma rota.

Como nesse exemplo:

O roteador irá rotear automaticamente os arquivos nomeados index para a raiz do diretório.

pages/index.js → /
pages/blog/index.js → /blog

Agora basta editarmos a importação de css no arquivo _app.js :

Mudamos a importação para :

import '../../styles/globals.css'

Para rodar basta abrir o terminal integrado ou no próprio terminal e digitar:

yarn dev
# ou 
npm run dev

Acesse : http://localhost:3000/

E esse é o resultado!

É isso, bem simples criar um site utilizando create-next-app 😁