Explore o poder da versão 13 do Next.js criando uma lista de países utilizando a API REST Countries.
- 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.
- 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.
- Estude sobre React 18 e Server Components.
- Utilize um framework CSS, como Tailwind, para ganhar agilidade na implementação.
Temos uma sugestão de design no Figma. Mas sinta-se livre para utilizar a criatividade e fazer o seu próprio design.
NextJS 13
Server ComponentsData fetchingNested layoutsRoutespages.tsxlayout.tsxerror.tsxloading.tsx
ReactHTML, CSS, JavaScript
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.
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.