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.

🔗 Link do Figma

NextJS 13

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

• React
• HTML, 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.