advanced next.js starter kit for maplibre GL usage with react-typescript

Save some minutes by adapting this modern next.js typescript project to your needs. It comes with a custom maplibre-gl-js layer or jsx rendering output in your common next.js stack. ✌️

The JSX rendering output is a bit slower than the layer rendering output. But it is more flexible and you can use the full power of react. The layer rendering output is unbelievably fast but you can only use the limited way of displaying layers in maplibre-gl-js, which can't really be overlapped.

You will need a maptiler account to use the maplibre-gl-js library. You can get a free account here. A simple mapbox-to-maplibre-gl resolver is already in place in next.config.js.

Replace the MAPTILER_KEY in .env.local.example with your own key and rename the file to .env.local. Dont share your key with anyone.

more infos very soon...

👀 please create PR if you have some ideas to improve this starter.

🎰 Under the hood:

• Framework: next.js / react
• State Management: zustand
• UI:
  • tailwind
    • styled components
    • tailwind styled components
  • Lucide Icons
  • react-resize-detector (almost deprecated)
• Map:
  • Maplibre GL JS
  • react-map-gl
• Development
  • typeScript
  • eslint
  • prettier
  • husky
  • lint-staged
  • lodash

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.