🗺️ Modern Map in Next.js with Mapbox

Lightweight, clean and beautifully-designed map with Next.js, Mapbox, shadcn ui, and Tailwind. Customizable and extensible component design.

next-maps-demo.mp4

⚡ Stack

• Next.js (App Router)
• Tailwind CSS
• shadcn/ui
• Mapbox GL JS
• Mapbox Searchbox API

🔍 Features

• 📍 Mapbox GL interactive map
• 🔎 Mapbox Searchbox API
• 🎨 Clean UI with shadcn/ui
• ⚡ Responsive & fast
• 📱 Mobile-friendly layout

🚀 Getting Started

First, install dependencies and start the development server:

git clone https://github.com/AnmolSaini16/next-maps.git
cd your-repo
npm install
npm run dev

🔐 Environment Variables

NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_access_token
NEXT_PUBLIC_MAPBOX_SESSION_TOKEN=your_uuidv4_session_token

📦 Deployment

Deploy on Vercel in seconds.

📚 Docs

• Next.js Docs
• Mapbox GL JS
• Tailwind CSS
• shadcn/ui Docs

🤝 Contributing

Contributions are welcome! If you’d like to improve this project, feel free to fork it and open a pull request.

☕ Support Me

If you find this project useful, consider supporting me:

Sponsor on github