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 **😁