I want to add Spotify Now Playing, Top Tracks, and Top Artists to my app using spotify-now-playing-headless.

My framework is: [React + Vite / Next.js App Router].
My desired UI is: [describe layout, style, and where it belongs].
My server platform and secret store are: [describe them].

First inspect the existing app and follow its conventions. Read the package README at https://github.com/sushilburagute/spotify-now-playing-headless and the implementation guide at https://spotify-headless.sush.dev/agent-guide.md. Install the package and use its documented entry points.

Implement a trusted server endpoint for Spotify data. In Next.js App Router, prefer the package's route factories. In a Vite app, use SpotifyClient in a separate server or serverless endpoint. Keep SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, and SPOTIFY_REFRESH_TOKEN on the server; never expose them through VITE_* variables or client code. Persist any rotated refresh token through onRefreshToken.

Build accessible UI using useNowPlaying, useTopTracks, and useTopArtists. Handle loading, errors, nothing playing, and manual refresh. Use the response types rather than assuming raw Spotify API shapes. Add clear environment setup instructions without committing credentials. Verify the build and relevant user flow. Tell me what you changed and what I need to configure.