https://github.com/doctorpok42/test-dernier-cri
Petite application qui vous permet d'interroger une API afin de récupérer (ici des posts / articles) pour les afficher sur un site.
https://github.com/doctorpok42/test-dernier-cri
Last synced: 3 months ago
JSON representation
Petite application qui vous permet d'interroger une API afin de récupérer (ici des posts / articles) pour les afficher sur un site.
- Host: GitHub
- URL: https://github.com/doctorpok42/test-dernier-cri
- Owner: DoctorPok42
- Created: 2021-05-26T10:02:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-31T19:57:25.000Z (over 3 years ago)
- Last Synced: 2025-01-10T09:20:25.758Z (4 months ago)
- Language: Less
- Homepage: https://test-dernier-cri.vercel.app/
- Size: 226 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Test-Dernier-Cri [](https://www.codefactor.io/repository/github/doctorpok42/test-dernier-cri)
Petite application qui vous permet d'interroger une API afin de récupérer (ici des posts / articles) pour les afficher sur un site.
(Si vous rencontrez un problème avec ce repo, ouvrez une issue et je vous aiderez.)
(Pensez à changer votre fichier config.js pour y mettre votre `recherche / query`, `APIKEY` et votre langue `lang`
## Lancement
Tout d'abord assurez vous bien que vous avez téléchargé l'entièreté du projet !
Ensuite ouvrez un terminal à la racine du projet et commencer par installer les dépendances
```
npm i
```
Enfin vous pouvez lancer l'application en faisant :
```
npm run dev
```
Puis pour voir le résultat vous pouvez vous rendre dans votre navigateur et tapez : [http://localhost:3000/](http://localhost:3000/)
## Détails
Dans le fichier `pages/index.js` on fait une requête API à ce site [newsapi](https://newsapi.org/) pour récupérer des `articles`.
```Js
export async function getStaticProps() {
const articles = await fetch(
`https://newsapi.org/v2/top-headlines?q=${query}&from=2021-05-29&to=2021-05-29&sortBy=popularity&apiKey=${APIKEY}&pageSize=20&language=${lang}`
).then((r) => r.json());
return {
props: {
articles,
},
};
}
```
On va ensuite faire un
```Js
{articles.articles.map((articles) => ( ... ))}
```
Pour charger tous les articles et pouvoir ainsi les afficher sur notre page d'accueil.
## Fichiers Important
```Js
pages/index.js // La page d'accueil
config.js // le fichier contenant le nom de la recherche, l'APIKEY et la langue
styles/globale.scss // Le scss
```
## Sources
NextJs : [nextjs.org](https://nextjs.org/)
API : [newsapi](https://newsapi.org/)
[ - DoctorPok ]