Three open-source tools now shape how the web gets built.

A pricing card needs a new badge. A developer opens the file, types a few words into a class attribute, and the browser beside her editor redraws the card before her hands have left the keyboard. She accidentally passes the price in as text instead of a number, and a red squiggle appears under the mistake before the code has even run. Then she pushes the change, and the page goes out already laid out for phones, its images resized for each screen and its fonts served from the same place as the page.

Three tools are doing the work in that minute: Next.js, TypeScript and Tailwind CSS. Each began as an answer to a specific frustration. Together they have become something close to the standard kit for building on the web, to the point that Next.js's own project starter now sets up all three by default.

A framework, and why you want one#

Start with React, the open-source library Meta created for building interfaces out of reusable components. React draws the buttons. It does not decide how pages map to web addresses, where data comes from or how the finished site reaches a server. That is the job of a framework: the scaffolding of conventions and tools that turns a pile of components into a working app.

Next.js, created by the team at Vercel in 2016 and released under the MIT open-source license, is that scaffolding for React. Its App Router uses folders as the map of the site. A folder called pricing with a page file inside becomes /pricing, and a layout file wraps every page beneath it, so the header and navigation stay put as visitors move around.

Many details that teams once built by hand come included. The Image component serves each device a correctly sized picture in modern formats such as WebP, loads it only as it scrolls into view and reserves its space so the page does not jump. The font module self-hosts fonts, Google Fonts included, so the visitor's browser never sends a request to Google, and text does not shift as fonts arrive. Turbopack, the bundler that packages an app's code, became the default in Next.js 16; the team says it brought two to five times faster production builds and up to ten times faster Fast Refresh, the live reload you see while editing.

The server is back, and it is fast.#

The big idea in modern Next.js is React Server Components: components that run on the server, fetch their own data and send the finished result to the browser rather than the code that produced it. A product page can query a database directly, and that query never reaches the visitor's device. Server Actions work in the other direction, letting a form call a function on the server without a hand-built API in between.

Rendering used to be a choice made page by page. Static pages were built ahead of time and served from a content delivery network; dynamic pages were rendered fresh for every request. Cache Components, introduced in Next.js 16, dissolve that choice. A developer marks individual components with a "use cache" directive, and a single page can stream a prerendered article alongside a personalized greeting rendered at request time, in one response. Since Next.js 16.4, released this October, every new app starts with Cache Components switched on, and the team says the model will become the default in Next.js 17.

Next.js 16.3 added Instant Navigations, a set of tools that make server-rendered apps feel as quick as apps that run entirely in the browser. Links prefetch just enough of the next page to show its outline the moment someone clicks, and new developer tools flag any navigation that is not instant. The same release cut memory use during long development sessions by up to 90 percent. Version 16.4 brought React 19.3, with stable View Transitions for animating changes between screens. And since 16.2, a stable Adapter API lets hosting platforms build first-class support for Next.js, so the same app can deploy to many clouds.

A spellchecker for code#

JavaScript is famously forgiving. It will happily add a number to a word, or let a function receive something it never expected, and leave the surprise for a user to find. TypeScript, which Microsoft unveiled on October 1, 2012, adds a type system: a way of labeling what kind of value each piece of data is, so a checker can catch mismatches while the code is still being written. Its own site sums it up as "JavaScript with syntax for types."

TypeScript is a superset of JavaScript, so it builds on the language rather than replacing it, and the types are stripped away at build time, leaving plain JavaScript that runs anywhere JavaScript runs. It also infers most types on its own, which is how an editor can autocomplete a field name or flag an error without the developer labeling everything.

type Plan = { name: string; monthlyPrice: number };

function PriceTag({ plan }: { plan: Plan }) {
  return <p>{plan.name}: ${plan.monthlyPrice} a month</p>;
}

<PriceTag plan={{ name: "Pro", monthlyPrice: "12" }} />;
// Type 'string' is not assignable to type 'number'.

This year TypeScript was rebuilt from the inside. TypeScript 6.0, released in March, was the last version built on the original JavaScript codebase. TypeScript 7.0, released in July, is a native port of the compiler to Go, a language designed for fast, parallel programs, and it keeps the original's structure and logic so both give the same answers. Microsoft reports full builds typically 8 to 12 times faster: the VS Code codebase went from 125.7 seconds to 10.6. In the editor, opening a file with an error in that same project dropped from about 17.5 seconds to under 1.3. Parsing, type checking and output now run in parallel, and TypeScript 7.1 entered beta on October 20.

Styling without leaving the markup#

CSS, the language that styles web pages, has traditionally lived in separate stylesheets full of class names someone had to invent and then remember. Tailwind CSS flips that. It is utility-first: it supplies a large vocabulary of small, single-purpose classes such as flex, pt-4 (padding on top) and text-center, and developers compose them directly in the HTML. A button's look is written on the button.

The approach sounds messy until you try it. Nothing needs naming, nothing gets orphaned in a forgotten stylesheet, and because Tailwind generates only the classes a project actually uses, its site says most Tailwind projects ship less than 10 kB of CSS to the browser.

Version 4.0, released in January 2025, rebuilt the engine. On Tailwind's own benchmark, a full build fell from 378 milliseconds to 100, and rebuilds that need no new CSS now finish in microseconds. Setup shrank to a single line, @import "tailwindcss", and customization moved into CSS itself: design tokens such as brand colors and breakpoints are declared in an @theme block and exposed as native CSS variables. The engine leans on modern browser features, including cascade layers, built-in container queries and a default palette in the OKLCH color space, which allows more vivid colors on wide-gamut screens. Version 4.1 added text shadows and masks, and 4.3, in May 2026, added first-party scrollbar styling.

Adam Wathan started Tailwind nearly a decade ago to style his own projects. By September 2026, when Tailwind Labs announced it was joining Shopify, the framework was being installed more than 110 million times a week. It remains open source under the MIT license, maintained by the same team.

How the three fit together#

Each tool is useful alone. Together they answer the three questions every web page faces: what runs where, what shape the data takes and what it all looks like.

Run Next.js's project starter with its recommended defaults and you get the App Router, TypeScript, Tailwind CSS, the ESLint code checker, Cache Components and Turbopack in one step. A single file can then hold all three ideas:

// app/plans/page.tsx, a Server Component
type Plan = { id: string; name: string; monthlyPrice: number };

export default async function PlansPage() {
  const plans: Plan[] = await getPlans(); // runs on the server only

  return (
    <ul className="grid gap-6 sm:grid-cols-3">
      {plans.map((plan) => (
        <li key={plan.id} className="rounded-2xl border p-6 shadow-sm">
          <h2 className="text-lg font-semibold">{plan.name}</h2>
          <p className="text-3xl font-bold">${plan.monthlyPrice}</p>
        </li>
      ))}
    </ul>
  );
}

The function runs on the server, so the database call never ships to the browser. The Plan type means a misspelled field, or a price stored as text, is caught before the page is built. And the class names read almost like a description: a grid that becomes three columns on wider screens, rounded cards with a border and a soft shadow. Since Next.js 16.3, a build can hand its type checking to TypeScript 7 with a single dependency bump.

The same qualities make the stack friendly to AI coding assistants. Types give an assistant a precise map of the code, Tailwind keeps styling next to the markup it affects, and new Next.js apps include an AGENTS.md file that points coding agents to documentation matching the installed version.

Small teams, big surfaces#

The remarkable thing about this toolkit is how much hard work it absorbs. Routing, image handling, caching, type safety, responsive layout and a design system that lives in the code once each demanded a specialist. Now a team of a few people can build a fast, polished product on one stack that is open source from top to bottom, and spend its time on what makes the product its own. The Next.js docs, the TypeScript handbook and the Tailwind CSS docs are the place to start.