How to Build a High-Conversion Dentist Website with Next.js 14 + Tailwind (Source Code)

zeyd ajraou — Thu, 15 Jan 2026 14:50:20 +0000

If you do freelance work, you know the drill: A local business (Dentist, Plumber, Real Estate) needs a website. They have a budget, but they need it yesterday.

You could use Wix or WordPress, but then you're stuck dealing with slow plugins and security updates forever.

I prefer building with Next.js 14 (App Router). It's faster, more secure, and I can charge a premium for "Custom Code."

I recently built a complete Dentist Website System, and I want to share the architecture and a key component so you can build one too.

The Architecture

For a local business site, you don't need complex state management. You need SEO and Structure.

Here is the folder structure I use for maximum SEO points:

/app
  ├── /services        # Individual service pages (Roots, Whitening)
  ├── /gallery         # Before/After photos (Crucial for dentists)
  ├── /contact         # Booking form + Map
  ├── layout.tsx       # Navbar & Footer persist here
  └── page.tsx         # The High-Conversion Homepage

The "Hero" Component
The most important part of a dentist site is the Hero Section. It needs 3 things:

A trustworthy headline.

A clear "Book Now" Call-to-Action.

A smiling human face (social proof).

Here is the clean Tailwind + React code for a responsive Hero section you can copy:

import Link from "next/link";
import { Phone } from "lucide-react";

export default function Hero() {
  return (
    <section className="w-full bg-slate-50 py-12 md:py-24 lg:py-32">
      <div className="container px-4 md:px-6">
        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 xl:grid-cols-2">
          <div className="flex flex-col justify-center space-y-4">
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter text-teal-900 sm:text-5xl xl:text-6xl/none">
                Gentle Care for Your <span className="text-teal-600">Perfect Smile</span>
              </h1>
              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-400">
                Experience modern dentistry in a comfortable environment. We specialize in cosmetic transformations and emergency care.
              </p>
            </div>
            <div className="flex flex-col gap-2 min-[400px]:flex-row">
              <Link
                className="inline-flex h-10 items-center justify-center rounded-md bg-teal-600 px-8 text-sm font-medium text-white shadow transition-colors hover:bg-teal-700 focus-visible:outline-none"
                href="/contact"
              >
                Book Appointment
              </Link>
              <Link
                className="inline-flex h-10 items-center justify-center rounded-md border border-gray-200 bg-white px-8 text-sm font-medium shadow-sm transition-colors hover:bg-gray-100 hover:text-teal-900"
                href="/services"
              >
                View Services
              </Link>
            </div>
          </div>
          {/* On mobile, this image stacks below the text */}
          <div className="flex items-center justify-center">
             <div className="relative h-[350px] w-[350px] rounded-full bg-teal-100/50 flex items-center justify-center">
                <span className="text-teal-800 font-medium">Image Placeholder</span>
             </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Want the full template?
I realized I was rebuilding the same "Services Grid," "Contact Form," and "Before/After Gallery" for every client.

So I bundled the entire project into a Next.js 14 Starter Template.

It includes:

✅ 5 Pre-built Pages (Home, Services, Gallery, Contact, About)

✅ Mobile Responsive Navbar (Hamburger menu working)

✅ Booking Form UI

✅ TypeScript & Tailwind configured

If you are a freelancer, you can grab this, customize the colors, and deliver a client site in about 3 hours.

Download the Dentist Pro Template Here

Happy coding!

The Easiest Way to Setup Supabase SSR in Next.js 14

zeyd ajraou — Thu, 15 Jan 2026 12:23:13 +0000

If you are like me, you are tired of setting up the same Authentication boilerplate for every new project.

Connecting Next.js 14 (App Router) with Supabase requires a specific setup to handle Cookies correctly during Server-Side Rendering (SSR). If you get it wrong, your user sessions won't persist, or you'll get hydration errors.

I spent this weekend finalizing a clean server.ts utility that handles this perfectly. I'm sharing it here so you can just copy-paste it into your utils/supabase folder.

The Code

First, make sure you have the packages installed:

npm install @supabase/ssr @supabase/supabase-js

Then, create a file at utils/supabase/server.ts and drop this in:

import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

  // Return null if Supabase is not configured
  if (!supabaseUrl || !supabaseAnonKey) {
    return null
  }

  const cookieStore = await cookies()

  return createServerClient(
    supabaseUrl,
    supabaseAnonKey,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet: { name: string; value: string; options: CookieOptions }[]) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  )
}

Why this works

The magic happens in the setAll method. In Next.js Server Components, you cannot write cookies (only read them). This helper detects that context. If you try to set a cookie from a Server Component, the try/catch block safely ignores it, preventing your app from crashing, while still allowing Middleware to handle the session refresh.

Want to skip the setup entirely?

I realized I was rewriting this logic (plus Stripe, Tailwind, and Auth forms) every single time I started a project.

So I built a complete Next.js + Supabase Starter Kit that has all of this pre-configured, including:

✅ Supabase Auth (Google + Email)

✅ Stripe Subscription Payments

✅ Tailwind Dashboard & Landing Page

✅ Fully Typed (TypeScript)

It saves about 3-4 days of setup time.

You can grab the Starter Kit here

(P.S. I added a discount code FIRST10 for %50 OFF for the first 10 people from this community!)

DEV Community: zeyd ajraou

How to Build a High-Conversion Dentist Website with Next.js 14 + Tailwind (Source Code)

The Architecture

The Easiest Way to Setup Supabase SSR in Next.js 14

The Code