How to Set Up a Next.js 15 Project with TypeScript and Tailwind CSS in 2026

Next.js 15 is the framework I reach for on almost every new full-stack project — vCardly, Himaal Pure, and Kurthi all ship on it. In this guide I'll walk you through the exact setup I use in production: Next.js 15 with the App Router, TypeScript, Tailwind CSS v4, ESLint, Prettier, and a clean folder layout that scales from a marketing site to a multi-tenant SaaS.

This is the 2026 setup — not a 2023 tutorial repackaged. We're using the App Router (the new default), Tailwind v4 (CSS-first config), and the modern Turbopack dev server.

Prerequisites

• Node.js 20 LTS or 22 — Next.js 15 dropped Node 18 support. Check with node -v.
• A package manager — I use pnpm for speed and disk savings, but npm and yarn work too.
• Git — for version control and Vercel deploys.
• VS Code with the official Next.js, ESLint, and Tailwind CSS IntelliSense extensions.

Step 1 — Create the project

Run the official scaffolder. The flags below skip the interactive prompts and give you the exact stack I use:

pnpm create next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir=false \
  --import-alias "@/*" \
  --turbopack

What each flag does:

• --typescript — TypeScript is non-negotiable for production work. Catches half your bugs before you ship.
• --tailwind — installs Tailwind v4 and wires it into globals.css.
• --app — uses the App Router (Server Components, streaming, the modern way).
• --import-alias "@/*" — lets you write import x from "@/lib/x" instead of fragile relative paths.
• --turbopack — the new Rust-based dev server. ~10x faster cold start than webpack.

Step 2 — Understand the folder structure

After scaffolding, your project looks like this:

my-app/
├── app/                # App Router — every folder is a route
│   ├── layout.tsx      # Root layout (wraps every page)
│   ├── page.tsx        # Homepage (/)
│   ├── globals.css     # Tailwind imports + design tokens
│   └── favicon.ico
├── public/             # Static assets served from /
├── next.config.mjs     # Next.js config
├── tsconfig.json       # TypeScript config
├── postcss.config.mjs  # PostCSS pipeline for Tailwind
└── package.json

The mental model: each folder under app/ is a URL segment. Drop a page.tsx in it and it renders. Drop a layout.tsx and it wraps every child route.

Step 3 — Tailwind CSS v4 (CSS-first config)

Tailwind v4 changed the config model. There's no more tailwind.config.js in most projects — you configure design tokens directly in CSS. Open app/globals.css:

@import "tailwindcss";

@theme {
  --color-brand: #3b6cf2;
  --font-display: "Geist", system-ui, sans-serif;
}

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
}

Now you can use bg-brand and font-display as utilities anywhere. This is faster, simpler, and one less config file to maintain.

Step 4 — Write your first page with proper SEO metadata

Replace app/page.tsx with this template. It includes the metadata that Google, ChatGPT, and Perplexity actually use:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My App — Next.js 15 Starter",
  description: "Production-ready Next.js 15 starter with TypeScript, Tailwind, and proper SEO.",
  openGraph: {
    title: "My App",
    description: "Production-ready Next.js 15 starter.",
    type: "website",
  },
};

export default function Home() {
  return (
    <main className="mx-auto max-w-2xl px-6 py-16">
      <h1 className="text-4xl font-bold tracking-tight">Hello, Next.js 15</h1>
      <p className="mt-4 text-neutral-600">
        This page renders on the server, ships zero JS to the client, and is SEO-friendly out of the box.
      </p>
    </main>
  );
}

Run pnpm dev and open http://localhost:3000. The page is server-rendered, type-safe, and ranks well by default.

Step 5 — ESLint and Prettier

Next.js ships ESLint by default. Add Prettier so formatting stays consistent across your team:

pnpm add -D prettier prettier-plugin-tailwindcss eslint-config-prettier

Create .prettierrc in the project root:

{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "plugins": ["prettier-plugin-tailwindcss"]
}

The Tailwind plugin auto-sorts your class names. No more arguments about ordering.

Step 6 — Deploy to Vercel (60 seconds)

The fastest deploy path:

1. Push your repo to GitHub.
2. Go to vercel.com and click Import Project.
3. Pick the repo. Vercel auto-detects Next.js, picks the right build command, and ships in ~40 seconds.

You now have a production URL with global CDN, automatic HTTPS, and preview deployments for every PR. For a personal site, the free tier is more than enough.

If you want to self-host on your own server instead (DigitalOcean, AWS, Hetzner) read my guide on deploying Next.js to DigitalOcean with NGINX and Let's Encrypt.

Common pitfalls to avoid

• Putting "use client" on the root layout. You lose server rendering for the entire tree. Only mark the leaf component that actually needs client state.
• Importing huge libraries at the top of layout.tsx. They ship to every page. Lazy-load with next/dynamic instead.
• Forgetting generateStaticParams for dynamic routes. If you're using output: "export", dynamic routes need explicit params or builds fail.
• Skipping the <Image> component. Plain <img> tags wreck your Core Web Vitals. Always use next/image.

Frequently asked questions

Should I use the App Router or the Pages Router in 2026?

App Router. The Pages Router still works but it's in maintenance mode — all new features (Server Actions, Partial Prerendering, Turbopack) ship on App Router first.

Is Next.js 15 stable enough for production?

Yes. I run it in production on vCardly and Himaal Pure with thousands of requests per day. Stick to the stable release (not canary) and you'll be fine.

Tailwind v3 vs v4 — which should I use?

v4 if you're starting fresh. It's faster, has CSS-first config, and is the future. The migration from v3 to v4 is documented but non-trivial — only migrate existing projects if you have a reason.

Do I need TypeScript?

For anything beyond a weekend prototype, yes. The type errors you catch in your editor at 9 a.m. are the bugs your users don't hit at 2 a.m.

Conclusion

That's the setup I use to ship full-stack web apps from Pokhara, Nepal. It's deliberately minimal — no UI library, no state library, no premature abstractions. Add those when you need them, not before.

If you want to see this setup running in production, check out my case studies — every one of them starts with this same scaffolding. And if you need help shipping a Next.js project, get in touch.