This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.
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
- Go to Spotify for developer
- Click
Dashboard
thenlog in
- Click
Create an app
- Copy file .
env.local.sample
and rename to.env.local
- 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 valuespotifyApi.play
can use only Spotify Premium
npm i
npm run dev
Preview the example live on StackBlitz:
Deploy the example using Vercel:
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).