How I Built a Clean Sleep Calculator Using Next.js, TypeScript, and Sleep Cycle Math

Bedtime Target = Desired Wake Time − (90 minutes × Number of Cycles) − Sleep Latency

Wake Time Target = Bedtime + Sleep Latency + (90 minutes × Number of Cycles)

// lib/calculateSleepCycles.ts

const CYCLE_LENGTH_MINUTES = 90;
const DEFAULT_LATENCY_MINUTES = 15;
const CYCLE_OPTIONS = [3, 4, 5, 6] as const;

export interface SleepCycleOption {
  cycles: number;
  totalSleepMinutes: number;
  targetTime: string;
  isRecommended: boolean;
}

export interface SleepCalculationInput {
  anchorTime: string; // "HH:MM" 24hr format
  mode: "wakeUp" | "bedtime";
  latencyMinutes?: number;
}

export function calculateSleepCycles({
  anchorTime,
  mode,
  latencyMinutes = DEFAULT_LATENCY_MINUTES,
}: SleepCalculationInput): SleepCycleOption[] {
  const anchorDate = parseTimeToDate(anchorTime);

  return CYCLE_OPTIONS.map((cycles) => {
    const cycleMinutes = cycles * CYCLE_LENGTH_MINUTES;
    const offsetMinutes =
      mode === "wakeUp"
        ? -(cycleMinutes + latencyMinutes)
        : cycleMinutes + latencyMinutes;

    const targetDate = addMinutes(anchorDate, offsetMinutes);

    return {
      cycles,
      totalSleepMinutes: cycleMinutes,
      targetTime: formatTime(targetDate),
      isRecommended: cycles === 5 || cycles === 6,
    };
  }).reverse();
}

function parseTimeToDate(time: string): Date {
  const [hours, minutes] = time.split(":").map(Number);
  const date = new Date();
  date.setHours(hours, minutes, 0, 0);
  return date;
}

function addMinutes(date: Date, minutes: number): Date {
  return new Date(date.getTime() + minutes * 60_000);
}

function formatTime(date: Date): string {
  return date.toLocaleTimeString("en-US", {
    hour: "numeric",
    minute: "2-digit",
    hour12: true,
  });
}

// CalculatorForm.tsx
"use client";

import { useMemo, useState } from "react";
import {
  calculateSleepCycles,
  type SleepCycleOption,
} from "@/lib/calculateSleepCycles";

export default function CalculatorForm() {
  const [mode, setMode] = useState<"wakeUp" | "bedtime">("wakeUp");
  const [anchorTime, setAnchorTime] = useState("06:00");

  const options: SleepCycleOption[] = useMemo(
    () => calculateSleepCycles({ anchorTime, mode }),
    [anchorTime, mode]
  );

  return (
    <div className="flex flex-col gap-5">
      <div className="flex rounded-xl bg-zinc-100 p-1 text-sm font-semibold">
        <button
          type="button"
          onClick={() => setMode("wakeUp")}
          className={`flex-1 rounded-lg px-3 py-2 transition-colors ${
            mode === "wakeUp" ? "bg-white shadow-sm text-indigo-600" : "text-zinc-500"
          }`}
        >
          I need to wake up at...
        </button>
        <button
          type="button"
          onClick={() => setMode("bedtime")}
          className={`flex-1 rounded-lg px-3 py-2 transition-colors ${
            mode === "bedtime" ? "bg-white shadow-sm text-indigo-600" : "text-zinc-500"
          }`}
        >
          I'm going to bed at...
        </button>
      </div>

      <label className="flex flex-col gap-1 text-sm text-zinc-500">
        {mode === "wakeUp" ? "Wake-up time" : "Bedtime"}
        <input
          type="time"
          value={anchorTime}
          onChange={(e) => setAnchorTime(e.target.value)}
          className="rounded-lg border border-zinc-200 px-3 py-2 text-lg font-medium text-zinc-900 outline-none focus:border-indigo-500"
        />
      </label>

      <ul className="flex flex-col gap-2">
        {options.map((opt) => (
          <li
            key={opt.cycles}
            className={`flex items-center justify-between rounded-lg border px-4 py-3 ${
              opt.isRecommended
                ? "border-indigo-200 bg-indigo-50"
                : "border-zinc-100 bg-white"
            }`}
          >
            <span className="font-mono text-lg font-bold text-zinc-900">
              {opt.targetTime}
            </span>
            <span className="text-sm text-zinc-500">
              {opt.cycles} cycles · {(opt.totalSleepMinutes / 60).toFixed(1)}h
              {opt.isRecommended && (
                <span className="ml-2 rounded-full bg-indigo-600 px-2 py-0.5 text-xs font-semibold text-white">
                  Best
                </span>
              )}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How long is one sleep cycle?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A standard human sleep cycle lasts roughly 90 minutes, alternating between non-REM and REM sleep."
      }
    }
  ]
};

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
/>