Building Fast Modern Web Apps with Next.js, Tailwind CSS & TypeScript

Building on the web in 2026 feels more refined than ever. The triad of Next.js, Tailwind CSS, and TypeScript has become my default stack for turning ideas into polished products.

Here are three key architectural practices I rely on.

1. Server-First Default with Selective Interactivity

One of the greatest benefits of the Next.js App Router is that components are Server Components by default. That means zero client-side JavaScript overhead for static layout and content:

// app/notes/page.tsx - Server Component
import { getAllNotes } from "@/lib/notes";
import Link from "next/link";

export default async function NotesIndex() {
  const notes = await getAllNotes();

  return (
    <ul className="divide-y divide-zinc-200 dark:divide-zinc-800">
      {notes.map((note) => (
        <li key={note.slug} className="py-3">
          <Link href={`/n/${note.slug}`} className="hover:underline">
            {note.title}
          </Link>
        </li>
      ))}
    </ul>
  );
}

Only add "use client" when you genuinely need DOM event listeners, browser APIs, or reactive local state (like our interactive bio switcher or canvas simulation).

2. Type-Safe API Contracts

Writing plain JavaScript in modern applications introduces invisible hazards. TypeScript turns those runtime surprises into compile-time confirmations:

export interface ProjectItem {
  id: string;
  name: string;
  description: string;
  technologies: readonly string[];
  link?: string;
  github?: string;
  featured: boolean;
}

3. Tailwind CSS v4 & Minimal Design

With Tailwind v4's CSS-first @import "tailwindcss"; and native CSS variables, styling is faster and leaner. Sticking to a disciplined, curated palette (zinc neutrals, subtle borders, high-contrast typography) yields timeless, distraction-free websites that load instantly.