Disclaimer: I am currently building a more advanced project — Betterlist — designed for managing Spotify playlists without any hassle. Check it out for a more refined and smoother experience.

next-spotify-v2

Source: Agê Barros

next-spotify-v2 is a simple project built with React 19 and Next.js 16 that fetches and displays data from the Spotify Web API. It uses Better Auth for login and Drizzle ORM for basic data handling.

Note: Currently, users cannot log in to the demo link due to Spotify's API Developer quota limits. The application is intended for local development and testing.

Working Demo: Vercel Link

---

Table of Contents

• Technologies and Libraries
• Features
• Local Development
• Configuration
• API and Resources
• TODO List

---

Technologies and Libraries

Core Frameworks

• Framework: Next.js 16 (App Router)
• Library: React 19
• Language: TypeScript

Backend and Auth

• Authentication: Better Auth
• Database ORM: Drizzle ORM
• Database: Postgres - Neon provider

State and Data Management

• Data Fetching: TanStack Query v5
• Client State: Zustand

Styling and Tooling

• Styling: Tailwind CSS v4
• Linting and Formatting: Biome
• Icons: Lucide Icons

---

Features

• Login: Authenticate with a Spotify account via Better Auth.
• Data Display: Fetches and lists top tracks, artists, and recently played tracks from the Spotify API.
• Library View: Displays your playlists, liked songs, followed artists, and albums.

---

Local Development

Since Spotify's Redirect URIs often require HTTPS for authentication, you must use a tunneling service like ngrok for the login flow to work locally.

1. Clone and Install

git clone https://github.com/ankitk26/next-spotify-app-router.git
cd next-spotify-app-router
npm install

2. Database and Execution

Push the database schema to your Postgres instance and start the server:

# Push schema
npx drizzle-kit push

# Run application
npm run dev

3. Setup Tunneling (Required)

1. Install ngrok and authenticate it.
2. Create a tunnel for your local server:

   ngrok http 3000

3. Copy the Forwarding URL (e.g., https://your-tunnel-id.ngrok-free.app).

---

Configuration

Add the following environment variables to your .env file. Replace <YOUR_NGROK_URL> with the URL generated by ngrok.

Environment Variables

DATABASE_URL=your_postgres_connection_string
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
BETTER_AUTH_SECRET=your_generated_secret
BETTER_AUTH_URL=<YOUR_NGROK_URL>

Spotify Dashboard Setup

1. Go to the Spotify Developer Dashboard.
2. Create an application to get your Client ID and Client Secret.
3. Under Edit Settings, add the following Redirect URI: <YOUR_NGROK_URL>/api/auth/callback/spotify

---

API and Resources

• Spotify API: Web API Documentation
• Authentication: Better Auth Documentation
• Database: Drizzle ORM Documentation
• Data Fetching: TanStack Query Docs
• Typography: Montserrat Font

---

TODO List

• Dynamic Theming: Basic color extraction from album art.
• Error Handling: Basic boundaries for API rate limits.