Informações do Projeto

Explore o poder da versão 13 do Next.js criando uma lista de países utilizando a API REST Countries.

🔨 Requisitos

  • Utilize a API REST Countries para obter os dados dos países.
  • Utilize o Next.js na versão mais atual para construir a estrutura do projeto e gerenciar as rotas da aplicação.
  • Garanta que sua aplicação se comporta bem em celulares, tablets e desktops.
  • Implemente a funcionalidade de exibir uma lista de países, mostrando sua bandeira e seu nome em português.
  • Ao clicar em um país, você deverá exibir em uma nova rota a página de detalhes do país
    • Exiba a capital, população, continente e região e as línguas faladas no país.
    • Exiba o número da população em números simplificados, por exemplo: 1.000.000 deve ser 1M e 1000 deve ser 1K.
    • Exiba uma lista dos países que fazem fronteira com o país exibido. Ao clicar em um dos países que fazem fronteira, redirecione para a página desse país.
  • Faça o deploy da sua aplicação e submeta no Codante.

🔨 Desafios extras para quem quer ir além

  • Implemente uma sessão de "países que falam a mesma língua", abaixo dos "países que fazem fronteira".
  • Implemente uma busca na lista de países.

🔍 Dicas

  • Estude sobre React 18 e Server Components.
  • Utilize um framework CSS, como Tailwind, para ganhar agilidade na implementação.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Mas sinta-se livre para utilizar a criatividade e fazer o seu próprio design.

🔗 Link do Figma

image

👉🏽 Sobre esse mini-projeto

Tecnologias sugeridas

NextJS 13

  • Server Components
  • Data fetching
  • Nested layouts
  • Routes
  • pages.tsx
  • layout.tsx
  • error.tsx
  • loading.tsx

Pré-requisitos

  • React
  • HTML, CSS, JavaScript

❓ FAQ

Posso utilizar outros frameworks ou outras versões do Next?

Esse projeto foi pensado para praticar a versão 13 do NextJS, utilizando React 18 com Server Components. Por isso, a resolução oficial será feita dessa forma.

Sinta-se livre para fazer de outras maneiras, caso você esteja estudando outros conteúdos. Mas considere que a solução oficial poderá não cobrir isso.

Posso usar features experimentais do Next?

Sim. Algumas features ainda estão em alpha e portanto não são recomendadas para uso em produção. Como esse se trata de um projeto para aprendizado, você pode aproveitar para experimentar essas features.

Inspiração

REST Countries API with color theme switcher