Comment connecter l'API Spotify avec NextJS14 et TypeScript

Introduction

Dans cet article, nous allons explorer comment intégrer l'API Spotify dans une application NextJS. Nous couvrirons les étapes nécessaires pour s'authentifier, se connecter et récupérer les données de Spotify afin d'améliorer votre projet NextJS avec des fonctionnalités musicales.

Prérequis

Avant de commencer, assurez-vous d'avoir les éléments suivants installés :

• Node.js (12.x ou plus récent)
• npm ou yarn
• Un éditeur de code (VSCode, par exemple)

Création du projet Next.js

Pour commencer, créez un nouveau projet Next.js en exécutant la commande suivante :

npx create-next-app@latest mon-app-spotify --typescript

Ensuite, accédez au dossier du projet :

cd mon-app-spotify

Installation de TailwindCSS

Installez TailwindCSS en suivant les commandes ci-dessous :

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Ensuite, configurez Tailwind en exécutant :

npx tailwindcss init -p

Ajoutez ./src/**/*.{js,ts,jsx,tsx} à la section content de votre fichier tailwind.config.js pour activer Tailwind dans vos fichiers TypeScript.

Configuration des variables d'environnement

Créez un fichier .env.local à la racine de votre projet pour stocker les clés API sécurisées :

SPOTIFY_CLIENT_ID=your_spotify_client_id 
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret

Authentification Spotify

Installez la bibliothèque next-auth pour gérer l'authentification :

npm install next-auth

Configurez next-auth pour utiliser Spotify comme fournisseur dans src/pages/api/auth/[...nextauth].ts :

import  NextAuth  from  "next-auth"
import  SpotifyProvider  from  "next-auth/providers/spotify"  
export  default  NextAuth({ 
	providers: [ 
		SpotifyProvider({ 
		clientId: process.env.SPOTIFY_CLIENT_ID, 
		clientSecret: process.env.SPOTIFY_CLIENT_SECRET, 
		authorization: { params: { scope: 'user-read-email playlist-read-private' } } 
		}), 
	], 
})

Récupération des données de Spotify

Pour récupérer des données de l'API Spotify, vous pouvez utiliser fetch dans vos fonctions getServerSideProps ou getStaticProps. Voici un exemple pour obtenir le profil de l'utilisateur :

export async function getServerSideProps(context) {
  const session = await getSession(context)

  if (!session) {
    return {
      redirect: {
        destination: '/api/auth/signin',
        permanent: false,
      },
    }
  }

  const res = await fetch('https://api.spotify.com/v1/me', {
    headers: {
      Authorization: `Bearer ${session.accessToken}`
    }
  })

  const data = await res.json()

  return {
    props: { data },
  }
}

Conclusion

Vous avez maintenant une application Next.js 14 avec TypeScript et TailwindCSS qui est connectée à l'API Spotify. Vous pouvez étendre ce projet en ajoutant d'autres fonctionnalités de l'API Spotify selon vos besoins.