Projeto desenvolvido em um desafio do Bootcamp da @Rocketseat para exibir as cidades mais visitadas do mundo - Interface desenvolvida em Chakra UI.
-
Integração com Prismic CMS como back-end - conceito de JAMStack
-
Sistema usado para os carregamento das páginas em getStaticProps` do Next.js seguindo o exemplo de aulas anteriores.
-
Country: Key Text
Nota: Integração com Prismic CMS (seguindo o exemplo do Gabriel Borges.
-
Acesse o Prismic.oi e crie uma conta, se caso ainda não tenha uma ou faça o login em sua conta.
-
Crie um novo Custom Type com o nome
continent(este nome não é opcional caso vá usar este projeto como está). -
Use a estrutura abaixo do Modelo do Custom Types
-
- slug: UID
-
- Title: Key Text
-
- Summary: Key Text
-
- Description: Rich Text
-
- Slider: Image
-
- Banner: Image
-
- Country: Number
-
- Languages: Number
-
- Cities: Number
-
- City List: Key Text
-
- Cities100: Group
-
- Thumbnail: Image
-
- Flag: Image
-
- City: Key Text
-
Após criar a estrutura, insira as informações criando um novo Document e preenchendo os campos corretamente de acordo com a estrutura.
-
Após inserir uns 5 itens de Document, vá para o próximo passo.
- Vá até as engrenagens na mesma janela do seu Documents, que está localizado na parte inferior sob o ícone de engrenagem ⚙.
- Então clique em API & Security.
- Copie a linha api access (ex: https://seu-projeto.cdn.prismic.io/api/v2).
- Abra o projeto no seu Visual Code.
- Renomei o arquivo
.env.examplepara.env.local. - Cole sua api em
PRISMIC_API_ENDPOINT. - Após isso, salve as alterações.
- Siga para o próximo passo...
1 - Faça um clone do projeto para sua máquina com o comando abaixo:
git clone git@github.com:andrelinos/worldtrip.git2 - Em seguida, acesse a pasta do projeto:
cd worldtrip3 - Agora execute:
npm run dev
# ou
yarn dev4 - Abra seu navegador no seguinte endereço: http://localhost:3000, se tudo foi corretamente, você verá o resultado no seu navegador.
Nota: Você precisa primeiro criar as informações no Prismic.