Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.

About Spotify Clone

Project Tutorial: build Spotify 2.0 with NEXT.JS 12.0

• Nextjs12
• React
• Debounce
• Tailwind css
• Spotify api
• Oauth jwt
• Access/refesh token
• NextAuth
• Recoil

Setup Project with Spotify API

1. Go to Spotify for developer
2. Click Dashboard then log in
3. Click Create an app
4. Copy file .env.local.sample and rename to .env.local
5. Copy value from Spotify app that you create in 3. and Fill in .env.local

NEXT_PUBLIC_CLIENT_ID = Client ID
NEXT_PUBLIC_CLIENT_SECRET = click show client secret and copy it

6. Click Edit Settings in your Spotify app. Then add Redirect URIs http://localhost:3000/api/auth/callback/spotify

Note:

• JWT_SECRET is your some super secret value
• spotifyApi.play can use only Spotify Premium

Run project

1. npm i
2. npm run dev

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).