mp-lista-de-paises-next
🌍 Lista de Países usando Next.js
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.
👉🏽 Sobre esse mini-projeto
Tecnologias sugeridas
NextJS 13
Server ComponentsData fetchingNested layoutsRoutespages.tsxlayout.tsxerror.tsxloading.tsx
Pré-requisitos
ReactHTML, 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.