Utiliser une API avec Next.js et Vercel

Les API externes sont souvent utilisées pour récupérer des données et des fonctionnalités supplémentaires pour une application web. Dans ce tutoriel, nous allons voir comment intégrer une API externe à une application Next.js et la déployer sur Vercel.

Prérequis

Avant de commencer, assurez-vous d'avoir une API externe prête à être utilisée. Si vous n'avez pas d'API, vous pouvez en trouver une sur un site comme https://www.publicapis.com/. Vous aurez également besoin de Node.js et NPM installés sur votre ordinateur.

Étape 1 : Créer un nouveau projet Next.js

La première étape consiste à créer un nouveau projet Next.js en utilisant le générateur de projet. Ouvrez votre terminal et exécutez la commande suivante :

npx create-next-app my-next-app

Cela va créer un nouveau projet Next.js nommé "my-next-app". La commande va installer toutes les dépendances nécessaires et configurer le projet avec un ensemble de fichiers et de dossiers de base.

Une fois que la commande est terminée, vous pouvez vous rendre dans le dossier du projet en exécutant la commande suivante :

cd my-next-app

Étape 2 : Installer les dépendances

Dans cette étape, nous allons installer les dépendances nécessaires pour interagir avec l'API externe. Nous allons utiliser Axios pour effectuer des requêtes HTTP à l'API. Exécutez la commande suivante dans votre terminal pour installer Axios :

npm install axios

Étape 3 : Créer un composant qui utilise l'API

Maintenant que nous avons installé Axios, nous pouvons créer un composant qui utilise l'API externe. Dans cet exemple, nous allons récupérer les dernières nouvelles en utilisant l'API NewsAPI. Voici le code du composant :

import axios from 'axios';

function LatestNews() {
  const [news, setNews] = useState([]);

  useEffect(() => {
    axios.get('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY')
      .then(response => setNews(response.data.articles))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      <h2>Dernières nouvelles</h2>
      <ul>
        {news.map((article, index) => (
          <li key={index}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default LatestNews;

Dans ce code, nous importons Axios et nous utilisons la méthode get pour récupérer les dernières nouvelles de l'API NewsAPI. Nous stockons les données récupérées dans l'état news et les affichons sous forme de liste.

N'oubliez pas de remplacer YOUR_API_KEY par votre propre clé d'API.

Étape 4 : Déployer l'application sur Vercel

Maintenant que notre application est prête, nous pouvons la déployer sur Vercel. Si vous n'avez pas encore de compte Vercel, vous pouvez en créer un gratuitement sur https://vercel.com/signup.

Pour déployer l'application, créez un nouveau compte sur Vercel et connectez-le à votre compte GitHub. Ensuite, allez dans le répertoire de votre projet et suivez les étapes suivantes :

  1. Exécutez la commande suivante pour initialiser un nouveau dépôt Git :
git init
  1. Créez un nouveau dépôt sur GitHub et ajoutez le dépôt distant à votre dépôt Git local :
git remote add origin https://github.com/votre-utilisateur/votre-depot.git
  1. Ajoutez tous les fichiers et dossiers de votre projet en utilisant la commande suivante :
git add .
  1. Effectuez votre premier commit en utilisant la commande suivante :
git commit -m "Premier commit"
  1. Déployez votre application sur Vercel en utilisant la commande suivante :
vercel

Cette commande va déployer votre application sur Vercel. Vercel va automatiquement détecter que vous utilisez Next.js et installer les dépendances nécessaires.

Une fois le déploiement terminé, vous pouvez accéder à votre application en utilisant le lien généré par Vercel.

Conclusion

Dans ce tutoriel, nous avons vu comment intégrer une API externe à une application Next.js et la déployer sur Vercel. Nous avons utilisé Axios pour interagir avec l'API et afficher les données dans notre application. Nous avons également vu comment déployer notre application sur Vercel en utilisant Git.

En utilisant les étapes décrites ci-dessus, vous pouvez facilement intégrer n'importe quelle API externe à votre application Next.js et la déployer sur Vercel.