Seu objetivo é criar um portal de notícias responsivo utilizando o framework Next.js. O site deve consumir uma API pública de notícias e exibir os dados no frontend. Escolha uma API que ofereça uma chave de API gratuita ou utilize uma chave de API de teste.
- Configurar um projeto Next.js (Next.js by Vercel - The React Framework).
- Criar uma página inicial que exiba cards das notícias da API pública.
- Os cards podem conter:
- Título da notícia [Obrigatório]
- Fragmento da notícia [Opcional]
- Uma imagem ilustrativa da notícia [Opcional]
- Autor [Opcional]
- Data da Publicação [Opcional]
- Cada card, ao ser clicado, deve redirecionar o usuário para uma página de detalhes para exibir as informações completas de uma notícia específica.
- Páginas de detalhes podem conter:
- Título [Obrigatório]
- Texto da notícia [Obrigatório]
- Data de publicação [Opcional]
- Autor [Opcional]
- Configurar uma API do Next.js para lidar com as requisições do backend. (Saiba mais em Routing: API Routes | Next.js)
- Garantir que o código esteja versionado em um repositório Git e fazer commits regulares e semânticos ao longo do desenvolvimento.
Você pode utilizar uma API pública de notícias de sua escolha para obter os dados. Alguns exemplos de APIs populares incluem:
- News API: https://newsapi.org/
- New York Times: https://developer.nytimes.com/apis
- GNews API: https://gnews.io/
Você pode encontrar mais APIs públicas no https://github.com/public-apis/public-apis#news
Fique a vontade para usar qualquer outra API de sua preferência também!
Você deve anexar o resultado do desafio no formulário de inscrição em um documento ZIP contendo o código do projeto e quaisquer instruções adicionais necessárias para executá-lo localmente. Lembre-se de não incluir a pasta node_modules e capriche no seu README.md!
Recomendamos que visite alguns sites com esse propósito para se familiarizar com o formato. Seguem alguns exemplos:
- Nexo Jornal: https://www.nexojornal.com.br/;
- Poder360: https://www.poder360.com.br/;
- Reuters: https://www.reuters.com/;
Certifique-se de seguir as melhores práticas de desenvolvimento, organização de código e estrutura do projeto. Sinta-se à vontade para utilizar bibliotecas e ferramentas adicionais (além do Next.js) e para criar outras funcionalidades. Vale lembrar que a ideia do desafio é mostrar o seu processo de trabalho e aprendizado!