Next.js
The React Framework for the Web
The React framework for production. Build full-stack web apps with server rendering, file-based routing, and a first-class developer experience.
📘 35 lessons🚀 6 projects🗺️ 3 roadmaps🐞 16 error fixes
Next.js Tools
The ecosystem at a glance — what each tool is for, and when to reach for it.
| Tool | Purpose | Why use it | Alternatives | Best for |
|---|---|---|---|---|
Tailwind CSS Docs ↗ | Styling | Style without leaving your component, ship only the CSS you use, and stay consistent with a design-token system. | CSS Modules, styled-components, vanilla-extract, Panda CSS | Most apps — especially when paired with a component library like shadcn/ui. |
Prisma Docs ↗ | Database access | Autocomplete for your queries, compile-time safety on your data, and painless schema migrations. | Drizzle ORM, Kysely, TypeORM, raw SQL | Teams that want safety and DX over maximum control of the generated SQL. |
NextAuth.js (Auth.js) Docs ↗ | Authentication | Drop-in social login, secure sessions, and database adapters — without building auth from scratch. | Clerk, Lucia, Supabase Auth, Better Auth | Apps that want self-hosted, provider-flexible auth at no cost. |
Vercel Docs ↗ | Hosting & deployment | Zero-config deploys, preview URLs per pull request, edge network, and serverless functions. | Netlify, Cloudflare Pages, Railway, a self-hosted Node server | Shipping Next.js apps with the least possible configuration. |
shadcn/ui Docs ↗ | UI components | You get beautiful, accessible components (built on Radix + Tailwind) as source you can edit — no black-box dependency to fight. | Material UI, Mantine, Chakra UI, Park UI | Teams using Tailwind who want full control over their component code. |
Zod Docs ↗ | Validation | Validate form input, API payloads, and env vars at runtime, and get the TypeScript types for free from the same schema. | Valibot, Yup, ArkType, io-ts | Validating anything that crosses a trust boundary in a Server Action or Route Handler. |
React Hook Form Docs ↗ | Forms | Handles complex client-side forms with easy validation (pairs with Zod) and great performance. | Formik, TanStack Form, native Server Actions + useActionState | Rich, interactive forms with lots of fields and client-side validation. |
TanStack Query Docs ↗ | Client data fetching | When you fetch on the client (dashboards, infinite scroll, polling), it handles caching, retries, and stale data so you don't reinvent it. | SWR, RTK Query, native fetch in Server Components | Highly interactive client-side data that Server Components can't cover alone. |
Zustand Docs ↗ | Client state management | When you need shared client state (cart, modals, filters) beyond `useState`, Zustand is simpler than Redux and works great with the App Router. | Redux Toolkit, Jotai, Context API, signals | Shared interactive UI state across components without prop drilling. |
Drizzle ORM Docs ↗ | Database access | If you want queries that read like SQL and a thinner abstraction than Prisma, Drizzle gives you full type safety with minimal magic. | Prisma, Kysely, raw SQL | Developers who like SQL and want maximum control and edge compatibility. |
Stripe Docs ↗ | Payments | The standard for taking money online — great SDKs, hosted Checkout, and webhooks that pair naturally with Route Handlers. | Lemon Squeezy, Paddle, PayPal | Any app that needs to charge customers or run subscriptions. |
Tailwind CSS
Styling- Why use it
- Style without leaving your component, ship only the CSS you use, and stay consistent with a design-token system.
- Alternatives
- CSS Modules, styled-components, vanilla-extract, Panda CSS
- Best for
- Most apps — especially when paired with a component library like shadcn/ui.
Prisma
Database access- Why use it
- Autocomplete for your queries, compile-time safety on your data, and painless schema migrations.
- Alternatives
- Drizzle ORM, Kysely, TypeORM, raw SQL
- Best for
- Teams that want safety and DX over maximum control of the generated SQL.
NextAuth.js (Auth.js)
Authentication- Why use it
- Drop-in social login, secure sessions, and database adapters — without building auth from scratch.
- Alternatives
- Clerk, Lucia, Supabase Auth, Better Auth
- Best for
- Apps that want self-hosted, provider-flexible auth at no cost.
Vercel
Hosting & deployment- Why use it
- Zero-config deploys, preview URLs per pull request, edge network, and serverless functions.
- Alternatives
- Netlify, Cloudflare Pages, Railway, a self-hosted Node server
- Best for
- Shipping Next.js apps with the least possible configuration.
shadcn/ui
UI components- Why use it
- You get beautiful, accessible components (built on Radix + Tailwind) as source you can edit — no black-box dependency to fight.
- Alternatives
- Material UI, Mantine, Chakra UI, Park UI
- Best for
- Teams using Tailwind who want full control over their component code.
Zod
Validation- Why use it
- Validate form input, API payloads, and env vars at runtime, and get the TypeScript types for free from the same schema.
- Alternatives
- Valibot, Yup, ArkType, io-ts
- Best for
- Validating anything that crosses a trust boundary in a Server Action or Route Handler.
React Hook Form
Forms- Why use it
- Handles complex client-side forms with easy validation (pairs with Zod) and great performance.
- Alternatives
- Formik, TanStack Form, native Server Actions + useActionState
- Best for
- Rich, interactive forms with lots of fields and client-side validation.
TanStack Query
Client data fetching- Why use it
- When you fetch on the client (dashboards, infinite scroll, polling), it handles caching, retries, and stale data so you don't reinvent it.
- Alternatives
- SWR, RTK Query, native fetch in Server Components
- Best for
- Highly interactive client-side data that Server Components can't cover alone.
Zustand
Client state management- Why use it
- When you need shared client state (cart, modals, filters) beyond `useState`, Zustand is simpler than Redux and works great with the App Router.
- Alternatives
- Redux Toolkit, Jotai, Context API, signals
- Best for
- Shared interactive UI state across components without prop drilling.
Drizzle ORM
Database access- Why use it
- If you want queries that read like SQL and a thinner abstraction than Prisma, Drizzle gives you full type safety with minimal magic.
- Alternatives
- Prisma, Kysely, raw SQL
- Best for
- Developers who like SQL and want maximum control and edge compatibility.
Stripe
Payments- Why use it
- The standard for taking money online — great SDKs, hosted Checkout, and webhooks that pair naturally with Route Handlers.
- Alternatives
- Lemon Squeezy, Paddle, PayPal
- Best for
- Any app that needs to charge customers or run subscriptions.