Next JS 15 + Sanity: A Modern Counselling Website Build

A comprehensive look at developing a professional counselling website that balances performance, accessibility, and content management. Please feel free to check out the site here at www.wilkinsoncounselling.co.uk.

Project Overview

Jessica needed a modern, professional website to establish her online presence as a BACP-registered counsellor. The project required a solution that would be easy for a non-technical client to manage while delivering excellent performance and user experience.

Wilkinsoncounselling.co.uk website

Key Requirements

  • Professional, calming design reflecting the counselling practice
  • Easy content management for the client
  • Strong SEO foundation for local search visibility
  • Mobile-first responsive design
  • Fast loading times for better user experience
  • Contact form with email integration
  • Separate sections for adult and child counselling services

Technology Stack

  • Frontend: Next JS 15 with App Router
  • Styling: Tailwind CSS
  • CMS: Sanity Studio
  • Animations: Framer Motion
  • Email: Resend API
  • Hosting: Vercel
  • Icons: React Icons

Design & User Experience

Visual Identity

The design needed to convey trust, professionalism, and calm – essential qualities for a counselling practice. I chose a soothing colour palette centred around teal with soft, organic shapes and subtle animations.

wilkinsoncounselling.co.uk colour palette

Typography

  • Headlines: DM Serif Display for elegance and professionalism
  • Body Text: Montserrat for excellent readability
  • Both fonts were optimised with `font-display: swap` and preloading for performance

wilkinsoncounselling.co.uk colour palette

Layout Philosophy

The layout follows a clear hierarchy with generous white space, making information easily digestible. Each section serves a specific purpose in the user journey from awareness to contact.

Technical Implementation

Next JS 15 Architecture

I chose Next JS 15 for its cutting-edge features and performance optimisations:

// Dynamic routing with catch-all segments
export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
const pages = await getAllPages();

return pages
.filter((page: SanityPage) => page.slug !== "404")
.map((page: SanityPage) => ({
slug: [page.slug],
}));
}

Sanity CMS Integration

I chose to go with Sanity for the CMS because it is so very developer friendly, and i’ve used it for many projects here and there and it’s just awesome. It has a generous free plan which is more than enough for a small website such as this. I intend to update my site to use a similar setup to this build, then i’ll have to write a new post about my updated website.

export const pageQuery = groq`*[_type == "page" && slug.current == $slug && published == true][0] {
title,
description,
content[] {
_type,
...,
selectedServices[]-> {
_id,
title,
description,
image,
imageAlt,
link {
href,
text
}
}
}
}

Content Management Features

Dynamic Page Builder

Created a flexible component system allowing Jessica to build pages from reusable blocks:

  • Hero sections with customisable CTAs
  • Service showcases with image and text
  • Testimonials carousel
  • Contact forms
  • Rich text content blocks

Advanced Features

Contact Form with Email Integration

Built a robust contact form using Resend API:

// Honeypot spam protection
const honeypot = formData.get("companyName");
if (honeypot) {
return NextResponse.json({ error: "Spam detected" }, { status: 400 });
}

// Send auto-reply email
await resend.emails.send({
from: "jessica@wilkinsoncounselling.co.uk",
to: email,
subject: "Thank you for your enquiry",
react: AutoReplyEmail({ name }),
});

wilkinsoncounselling.co.uk contact form with next js

Lessons Learned

Performance First

Early optimisation is crucial. What looks good in design tools might not perform well in production, especially on mobile devices.

Progressive Enhancement

Start with a solid, accessible foundation and enhance with JavaScript. This ensures the site works for everyone.

Client Education

Spending time to create clear documentation and training for the CMS pays dividends in long-term client satisfaction.

SEO is Technical

Modern SEO requires technical implementation from day one – sitemaps, meta tags, structured data, and Core Web Vitals all matter.

Conclusion

Building the website for Jessica was an excellent opportunity to combine modern web technologies with real business needs. The project successfully delivered a professional, performant website that empowers the client to manage her content while providing an excellent user experience for potential clients.

The choice of Next JS 15 with Sanity CMS proved ideal for this use case, offering the performance benefits of static generation with the flexibility of dynamic content management. The focus on Core Web Vitals and SEO has positioned the site well for organic discovery.

Most importantly, the website serves its primary purpose: helping people find and connect with mental health support in a welcoming, professional environment.