Case Study · Next.js · E-Commerce

Case Study: How I Built the LUNA Fashion Website (Next.js)

A full technical case study of building the LUNA by Navneet boutique e-commerce website — architecture decisions, SEO strategy, WhatsApp integration, and results delivered.

JS

Jatinder Sandhu

Published 29 June 2026

Client

LUNA by Navneet

Category

Fashion Boutique

Stack

Next.js · Tailwind

Timeline

3 weeks

The Brief

LUNA by Navneet is a women's fashion boutique specialising in premium Indian ethnic wear — salwar suits, lehengas, and designer kurtis. The owner had been running the business purely through Instagram and WhatsApp, with no website. She wanted a professional online presence that could showcase collections, attract new customers through Google, and convert visitors into WhatsApp enquiries and direct orders.

The key constraint: a tight budget, a three-week deadline before a new collection launch, and a client who needed to manage products herself without touching code.

The Problem with WordPress for This Project

My first instinct was WooCommerce — it is the obvious choice for a fashion e-commerce site. But after reviewing the requirements, I moved to Next.js for three reasons:

  • The client was not doing cart-based purchasing — she wanted WhatsApp enquiries and DMs, not a full checkout flow. WooCommerce overhead would be wasted.
  • Page speed was critical for Google rankings in the ethnic fashion niche. Next.js with static generation outperforms WordPress by a large margin.
  • She had a fixed collection that changed 3–4 times a year — not a dynamic inventory that needed a full CMS.

Architecture Decisions

Next.js App Router with Static Generation

All product pages and category pages are statically generated at build time. This means every page is pre-built HTML served from the CDN edge — sub-200ms load times globally. No server cold starts, no database queries per request.

Product data in JSON, not a database

With 40–60 products per collection and updates only a few times a year, a database would be overengineering. Products live in a typed TypeScript JSON file. The client sends me the new collection data and images; I push an update and Vercel redeploys in 90 seconds.

Image optimization with next/image

Fashion products live and die by image quality. Next.js next/image automatically generates WebP and AVIF variants, applies responsive srcsets, and lazy loads off-screen images. The client's high-resolution product shots deliver fast on mobile without sacrificing quality.

WhatsApp as the conversion layer

Every product has a pre-filled WhatsApp CTA that includes the product name, colour, and size. Clicking “Order via WhatsApp” opens a conversation with the product details pre-loaded — zero friction for the customer, zero manual message handling for the owner.

Tech Stack

Framework

Next.js 14 (App Router)

Styling

Tailwind CSS

Animations

Framer Motion

Images

next/image (WebP/AVIF)

Hosting

Vercel (Edge Network)

Analytics

Google Analytics 4

SEO

Next.js Metadata API

Forms

WhatsApp wa.me links

Domain

Custom domain + SSL

SEO Strategy

This was a brand-new domain with no existing authority. The SEO priority was local and niche: rank for searches like “Indian ethnic wear UK”, “salwar kameez online UK”, “designer kurti boutique”.

What I implemented:

  • Structured metadata on every page — unique title, description, and Open Graph image per product and category.
  • JSON-LD schema for LocalBusiness (with address, phone, opening hours) and Product schema on individual product pages.
  • Sitemap.xml and robots.txt generated via Next.js route handlers.
  • Each category page targets a specific keyword cluster — lehenga, salwar suit, kurti — with semantic HTML and descriptive content.
  • Image alt text populated from product data — not generic "product image 1" patterns.
  • Google Search Console verified and initial sitemap submitted on launch day.

WhatsApp Integration Details

The WhatsApp integration was the most important feature for conversion. Here is how the pre-filled message link is built:

// Product CTA link builder

const buildWhatsAppLink = (product: Product, size: string) => {

const message = encodeURIComponent(

`Hi LUNA! I'm interested in:`\n

`*${product.name}*`\n`Colour: ${product.colour}`\n`Size: ${size}`

)

return `https://wa.me/${WHATSAPP_NUMBER}?text=${message}`

}

When a customer taps “Order via WhatsApp”, their WhatsApp opens with a ready-to-send message containing the product name, colour, and size they selected. The owner receives an instant, structured enquiry with no ambiguity.

Results

98/100

Lighthouse Score

<1.2s

Average Page Load

3 wks

Build to Launch

Top 3

Local Search Rankings (4 months)

Within four months of launch, LUNA was ranking on page 1 for several target keywords in the UK ethnic wear niche. WhatsApp enquiries went from 5–8 per week (Instagram only) to 25–30 per week. The client was able to sell out the Eid collection entirely through the website-to-WhatsApp funnel.

Key Lessons

Match the stack to the actual conversion flow

WooCommerce would have been the “standard” choice, but it would have added complexity that did not serve this client. The conversion action was WhatsApp — not a cart checkout. Removing friction from the actual conversion path was more valuable than feature completeness.

Static generation is underused for small e-commerce

Most small fashion brands default to Shopify or WooCommerce because they see “e-commerce” as one category. But for boutiques with curated collections and enquiry-based sales, a fast static Next.js site outperforms both on SEO and page speed — at lower long-term cost.

SEO is a launch-day decision, not a retrofit

Metadata, structured data, sitemap, and alt text were built in from day one — not added later. Every page was SEO-ready before it was indexed. This compounds: the site started ranking within 6–8 weeks of launch rather than 6–8 months.

Conclusion

LUNA is one of my favourite projects because the constraints forced smart decisions. A smaller scope — no checkout, no CMS, no cart — led to a faster site, a cleaner codebase, and a better outcome for the client. Sometimes the right technical answer is doing less, not more.

If you are a boutique owner or small fashion brand thinking about your online presence, I would be happy to talk through your options. A bespoke Next.js site may be simpler and more effective than you think.

Want a website like this for your business?

I build fast, SEO-ready websites for boutiques, local businesses, and small brands. Get in touch to discuss your project.

Get in Touch →
ShareXLinkedIn

About the Author

Hi, I'm Jatinder Sandhu, a Full-Stack Developer with 6+ years of experience building websites, web applications, business management systems, and AI-powered solutions using technologies like Next.js, React, Node.js, and MongoDB.

I share practical technology guides, development tutorials, and business growth insights based on real-world experience working on client projects.

If you're looking to build a website, custom software, business automation system, or AI-powered solution, explore my portfolio at jatinder.malwaland.com.