DEV Community: cazim meskovic

Building Ultra-Fast Booking & Business Sites with Next.js 15 and Supabase (Adria Case Study)

cazim meskovic — Tue, 16 Jun 2026 11:19:18 +0000

When moving regional businesses in the Adria region away from WordPress, the biggest challenge isn't the static content—it’s handling dynamic features like live booking calendars, contact forms, and real-time availability without sacrificing those precious 100/100 Lighthouse scores.

At webizradaadria.com, we recently launched a high-performance web project for a luxury booking villa (Grand Villa Bosnae) where we had to implement a live booking calendar integration. Doing this on a traditional stack usually means bloated plugins and heavy JavaScript.

Here is how we solved it using Next.js 15 (App Router), Tailwind CSS, and Supabase to maintain sub-second loading times for users on slow mobile networks.

🛠️ The Tech Stack Architecture
To keep the site incredibly fast while handling dynamic booking states, we decoupled the architecture:

Frontend & Routing: Next.js 15 (utilizing partial prerendering to keep the layout static but the booking engine dynamic).

Styling: Tailwind CSS for utility-first, zero-runtime CSS.

Backend & Database: Supabase (PostgreSQL) for real-time calendar state updates and client data.

Hosting: Vercel, ensuring our serverless functions run as close to the user as possible.

💡 Key Optimization Techniques We Used

Optimizing the Live Booking Calendar
Instead of loading a heavy third-party iframe or a massive JavaScript library that ruins Core Web Vitals, we built a custom, lightweight calendar component.
We fetch the reserved dates from Supabase via Next.js Server Components. The initial state is rendered on the server, meaning the user sees the calendar instantly, and hydration overhead is minimal.
Static Content with Dynamic Holes (PPR)
Pages like izrada web stranica Rijeka or specific villa presentation pages are mostly static text and images. With Next.js 15, we can statically prerender 95% of the page at build time, while wrapping the live availability badge in a boundary. Google sees a fully indexed, lightning-fast static page, while the user gets real-time data.
Image Optimization for Retina Displays
Tourism and local business sites rely heavily on high-resolution imagery. We utilized the Next.js component coupled with modern formats (WebP/AVIF) and custom srcSets. Even on 4G mobile screens in coastal regions, images load instantly without causing layout shifts (CLS).

📈 The Results: 100/100 Lighthouse in Production
By moving away from monolithic databases and heavy client-side rendering, we achieved what most local business owners thought was impossible for a site with a live booking calendar:

Performance: 99-100/100

Accessibility: 100/100

Best Practices: 100/100

SEO: 100/100

More importantly, the Largest Contentful Paint (LCP) dropped under 0.8 seconds, directly boosting the client's conversion rate and search visibility in local regional queries.

💬 Let's Discuss!
How are you handling dynamic states (like bookings, real-time stock, or interactive maps) in Next.js 15 without letting third-party scripts ruin your performance scores? Do you rely on Supabase/Firebase, or do you build custom API routes?

Drop your thoughts and repo architectures below! 👇

Modernizing the Adria Web: Next.js 15 & Vercel Deployment for Local Businesses

cazim meskovic — Thu, 16 Apr 2026 08:34:30 +0000

Scaling local business websites in the Adria region requires more than just a functional UI. In 2026, performance and sub-second load times have become the primary differentiators for businesses in cities like Zagreb, Split, and Rijeka.

At webizradaadria.com, we have moved away from traditional monolithic CMS solutions to a modern stack powered by Next.js 15 and Vercel.

Why This Stack Matters for Local SEO

For a local business, appearing on the first page of Google is crucial. By leveraging Lighthouse optimization, we ensure that our clients hit 100/100 scores, which is a direct ranking factor.

You can see our detailed breakdown of SEO and Lighthouse optimization here.

Key Implementation Details:

Vercel Edge Network: Essential for serving content with low latency across the Mediterranean and Balkan regions.
Static Site Generation (SSG): We use this for our city-specific landing pages like Zagreb and Split to ensure instant navigation.
Server Actions: Minimizing client-side JavaScript to keep mobile performance high.

We recently documented our Vercel deployment workflow which has significantly improved our CI/CD pipeline for regional projects.

Are you building local business sites with Next.js? How are you handling the transition from WordPress for your clients? Let's discuss below!

Why Next.js 15 is the Ultimate Choice for SaaS Performance in 2026

cazim meskovic — Thu, 16 Apr 2026 08:15:43 +0000

The web development landscape in 2026 is no longer about just "having a website." It’s about sub-second load times and flawless Core Web Vitals. After migrating several high-traffic projects to Next.js 15, the results are undeniable.

At webcreates.dev, we’ve seen that users start dropping off if a page takes more than 1.2 seconds to become interactive. Next.js 15 allows us to hit that "instant-load" feeling that was previously reserved for simple static sites.

Key Takeaways:

Server Actions: Reducing the client-side footprint by moving logic to the server.
Advanced Image Optimization: Automated AVIF delivery is now a must.
Lighthouse 100/100: It’s a direct ranking factor for Google’s 2026 algorithm.

What are your experiences with Next.js 15 stability in production? Let's discuss in the comments.