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

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

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

736f858c-27d1-4e88-9cdd-4326b77f116b_terminal.avif

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:

2.png

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

3.avif

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'

4.avif

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!

5.avif

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