The 2026 web stack: a case study in Next.js, Carbon, Drizzle, Better Auth, Resend, Stripe, Motion, Sanity and Vercel

October 12, 2026 · Guides · 9 min read

Most web products launched in 2026 come down to the same handful of decisions: a framework, a UI system, a database layer, authentication, email, payments, animation, content and hosting. This case study looks at one stack that answers each of those with a specific tool: Next.js, Carbon, Drizzle, Better Auth, Resend, Stripe, Motion, Sanity and Vercel.

It covers what each tool is responsible for, how they connect, what changed in each over the past year, and where the combination is weaker than the alternatives. Versions and features are current as of October 2026.

The stack at a glance

• Next.js: the application framework, covering routing, rendering, caching and server code.
• Carbon: IBM's Carbon Design System, providing components, icons and design tokens.
• Drizzle: the TypeScript ORM and migration tool for a SQL database.
• Better Auth: sign-in, sessions, organisations and permissions.
• Resend: transactional email, with templates written in React Email.
• Stripe: payments, subscriptions and invoices.
• Motion: animation and gestures in React.
• Sanity: structured content for marketing pages, docs and the blog.
• Vercel: hosting, compute, preview deployments and the AI Gateway.

Two things are deliberately missing from the list: the database itself and observability. Drizzle needs a Postgres, MySQL or SQLite database behind it, which most teams on this stack get from a managed Postgres provider such as Neon or Supabase. Logging and error tracking are covered in the trade-offs below.

How the pieces fit together

The stack splits into three layers, and most architecture mistakes come from mixing them up.

Content that the marketing team owns

Sanity holds anything a non-developer edits: landing pages, pricing copy, case studies, docs and changelogs. Next.js fetches it with GROQ queries and renders it in server components. Visual editing lets editors click on part of a preview and edit the field behind it.

Data that the product owns

User accounts, teams, subscriptions and the product's own records live in the SQL database. Drizzle defines the schema in TypeScript, generates migrations and runs queries. Better Auth writes its user, session and account tables through Drizzle's adapter, so authentication data sits in the same database as everything else.

Rule of thumb: if a marketer edits it, it goes in Sanity. If the app writes it, it goes in the database.

Events that connect them

Stripe and Resend sit at the edges, reacting to things users do. A typical paid sign-up looks like this:

1. A visitor lands on a pricing page whose copy comes from Sanity.
2. They create an account with Better Auth, which stores the user through Drizzle.
3. Resend sends a verification email built with React Email.
4. They pay through Stripe Checkout. Stripe sends a webhook to a Next.js route handler, which updates the subscription in the database.
5. Resend sends a welcome email and receipt, and the app unlocks paid features.

Carbon and Motion form the interface layer across all of it, and Vercel runs the whole thing, with a preview deployment for every pull request.

What each tool brings in 2026

Next.js 16

Next.js 16 shipped on October 21, 2025, followed by 16.2 in March 2026 and 16.3 in June 2026, which focused on AI tooling. The changes that matter most for this stack:

• Turbopack is the default bundler for both development and production builds.
• Cache Components replace the old implicit caching. You opt in with the "use cache" directive, so it's always clear what is cached.
• The React Compiler is stable, which removes most hand-written memoisation.
• middleware.ts is deprecated in favour of proxy.ts.
• Next.js DevTools MCP lets coding agents inspect routes, caching behaviour and errors in a running app.

If you're still on Next.js 15, its maintenance support ends on October 21, 2026. New projects should start on 16.

Carbon Design System

Carbon is IBM's open-source design system. Its React package, @carbon/react, provides components, icons, themes and design tokens, with a strong focus on accessibility and dense, data-heavy interfaces. That makes it a natural fit for dashboards, admin tools and B2B products, and a less obvious one for consumer marketing sites.

Two developments this year are worth knowing about. Carbon MCP, in public preview, gives coding agents Carbon's component docs, usage guidance and code examples, and can audit code against Carbon's rules. IBM has also announced Carbon v12, with a new visual style, motion built into components, and its Carbon for Products library of 21 components and 24 patterns opening up to the community. Some v12 behaviour is already available in v11 behind feature flags.

One practical note for Next.js: Carbon's styles are written in Sass, and its interactive components use React hooks, so they need to render inside client components in the App Router.

Drizzle ORM

Drizzle is a TypeScript ORM that stays close to SQL. You define tables in TypeScript, Drizzle Kit generates migration files, and queries are fully typed without a separate code-generation step.

Drizzle 1.0 is in release candidate as of October 2026, while the stable npm release is still on the 0.45 line. The 1.0 line reworks the internals, introduces a second version of relational queries and adds support for Effect. Teams starting now usually pin the release candidate for the ORM, Kit and Seed packages together; teams with production apps on 0.45 can wait for the stable release.

Keep it patched. A SQL-identifier escaping vulnerability was fixed in 0.45.2 and 1.0.0-beta.20. It affects apps that build identifiers or aliases from user input.

Better Auth

Better Auth is a TypeScript authentication framework that runs inside your own app and stores data in your own database. It covers email and password, social sign-in, passkeys, two-factor authentication, organisations and roles, SSO and an OAuth 2.1 provider, mostly through plugins.

It is now the default choice in its category: the Auth.js project, formerly NextAuth, is part of Better Auth, so new projects that would once have used NextAuth generally start here.

With Drizzle, you install the @better-auth/drizzle-adapter package, generate the auth tables with the Better Auth CLI and apply them with Drizzle Kit. Re-run the generator whenever you add a plugin, because plugins add tables and columns. Better Auth's Stripe plugin links Stripe customers and subscriptions to users, which removes a good deal of webhook code.

Resend

Resend is an email API built for developers by the team behind React Email. Templates are React components, so they can share design tokens and copy with the rest of the app.

React Email 6.0 shipped in April 2026 with an open-source visual editor you can embed in your own app, ready-made templates for authentication and e-commerce, and a single react-email package for all components. Resend has also released a remote MCP server, so agents can send and inspect email directly.

Resend is strongest for transactional email: verification, password resets, receipts and product notifications. Teams with heavy marketing automation often keep a dedicated campaign tool and use Resend only for product email.

Stripe

Stripe handles checkout, subscriptions, invoices, tax and the customer billing portal. At Stripe Sessions in April 2026 the company announced 288 products and features, with a clear focus on making its API easy for AI agents to use and on payments made by agents themselves.

For a typical SaaS on this stack, the setup is Stripe Checkout or the Payment Element to take payment, the billing portal for plan changes, and a webhook route in Next.js that keeps the database in sync. Treat the webhook as the source of truth for subscription status, not the redirect after checkout.

Motion

Motion, formerly Framer Motion, is the most widely used animation library for React. It handles layout and exit animations, gestures, scroll-linked effects and spring physics. The package is now simply motion, imported from motion/react.

Carbon has its own motion guidelines and tokens, and v12 will build more motion into its components. Use Motion for product-specific choreography, such as onboarding sequences, page transitions and chart animations, and match its timing to Carbon's tokens so the two feel like one system. Always respect the user's reduced-motion setting.

Sanity

Sanity stores content as structured data and lets you define the editing interface, Sanity Studio, in code. In 2026 it describes itself as a Content Operating System with AI built in.

In March 2026 Sanity announced Agent Context, Content Agent, Functions, an Agent API and an MCP server. In practice, agents can query and edit content against your real schema, editors can run bulk audits and updates from the Studio or from Slack, and Functions can trigger translation or distribution when content changes. By June, its MCP server could create a project, deploy a schema and deploy a working Studio without touching the CLI.

This article was drafted directly into Sanity through that MCP server.

Vercel

Vercel builds and hosts the app, creates a preview deployment for every pull request, and runs server code on Fluid Compute. Fluid lets one function instance serve several requests at once and bills for active CPU time, which keeps costs down for apps that spend much of their time waiting on databases or AI models.

Vercel now calls itself the AI Cloud. Its recent additions include the AI Gateway for routing requests across hundreds of models, Vercel Sandbox for running agent-generated code in isolation, and the Workflow SDK for long-running jobs. At Ship 2026 in London it also launched eve, an open-source TypeScript agent framework.

Why this combination works

• One language end to end. Everything from the database schema to the email templates is TypeScript and React, so one engineer can follow a feature from the database to the inbox.
• You own your user data. Better Auth and Drizzle keep users and sessions in your database rather than a third-party auth service.
• Clear ownership. Sanity owns content, the database owns product data and Stripe owns money. Each has one source of truth.
• Ready for coding agents. Most of the stack ships MCP servers or agent tooling, so agents work from current documentation and real data instead of outdated training data.
• Previews everywhere. Vercel preview deployments, Sanity drafts and releases, and Stripe test mode mean every change can be checked before customers see it.

Where it's weaker

• Carbon looks like enterprise software. That's a strength for B2B tools. For a consumer brand you'll spend time theming it, or a lighter system may suit you better.
• Two major versions in flight. Drizzle 1.0 and Carbon v12 are both in transition, so expect migrations in the next year.
• More moving parts than an all-in-one platform. Nine tools means nine dashboards, nine sets of keys and several bills. Platforms that bundle database, auth and storage reduce that, at the cost of control.
• Coupling to Vercel. Next.js runs elsewhere, but Fluid Compute, the AI Gateway and image optimisation work best on Vercel. Price it against your expected traffic early.
• No observability included. Add error tracking and structured logging from day one, ideally on OpenTelemetry so you can change providers later.

Who this stack is for

It suits B2B SaaS products, internal tools and dashboards with a marketing site attached, built by a small TypeScript team that wants to own its user data. It's a weaker fit for consumer apps that need a playful visual identity, teams that want a single backend platform, and apps that must run outside a serverless environment.

Getting started: a sensible build order

1. Create the Next.js 16 app and deploy it to Vercel straight away, so every branch gets a preview.
2. Provision Postgres, add Drizzle and write the first migration.
3. Add Better Auth with the Drizzle adapter, then generate and apply the auth tables.
4. Install @carbon/react and Sass, and set up the theme in a client layout.
5. Create the Sanity project, define schemas for marketing pages and connect it with next-sanity.
6. Add Resend with React Email templates for verification and password reset.
7. Add Stripe products and prices, the checkout route and the webhook handler.
8. Add Motion last, once the interface has settled.