🗺️ Modern Map in Next.js with Mapbox

Lightweight, interactive and customizable map built with Next.js App Router, styled with Tailwind CSS, and powered by Mapbox GL JS. UI components via shadcn/ui.

next-maps-demo.mp4

⚡ Stack

• Next.js (App Router)

• Tailwind CSS

• shadcn/ui

• Mapbox GL JS

• Mapbox Searchbox API

• Geist font (via next/font)

🔍 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