designo-multi-page-website with next-leaflet-tailwind-framer

What are you most proud of, and what would you do differently next time?

Most proud of: Completing the bonus challenge — integrating interactive Leaflet maps with OpenStreetMap in a Next.js App Router project, including solving the SSR issue with a two-layer next/dynamic approach.

Do differently next time: Start with the design system tokens and shared components fully locked in before touching any page, to avoid going back to fix inconsistencies across multiple files.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was integrating Leaflet with Next.js App Router. Leaflet relies on the browser's window object, which doesn't exist during server-side rendering, causing build failures. I overcame this by splitting the map into two layers — a "use client" Leaflet component and a separate client wrapper using next/dynamic with ssr: false — which is what Turbopack strictly requires.