DEV Community

Cover image for Build a Map App with Next.js 16, Leaflet, and Shadcn UI
jQueryScript
jQueryScript

Posted on

Build a Map App with Next.js 16, Leaflet, and Shadcn UI

Next.js Leaflet Starter: A production-ready template for building interactive map applications with Next.js 16 and vanilla Leaflet.

Key features:

πŸ“ Full CRUD for points of interest with 14 category types

πŸ—ΊοΈ Multiple tile providers with theme-aware basemaps

πŸ“ Built-in measurement tools for distance and area

πŸ” Debounced country search with keyboard navigation

πŸ’Ύ LocalStorage persistence and GeoJSON import/export

πŸ“± Mobile-optimized with drawer UI and responsive layouts

⚑ Next.js 16 App Router with optimized client boundaries

The template handles server-side rendering while maintaining clear client boundaries for map interactions.

You get TypeScript configurations, Tailwind CSS styling, and shadcn/ui components already integrated into a working environment.

πŸ‘‰ Blog Post

πŸ‘‰ GitHub Repo

πŸ‘‰ Live Demo

Top comments (0)