Frontend

Next.js

React framework with App Router, Server Components, streaming, and first-class Vercel deployment.

Official site

Monthly cost

Free

Popularity

5/5

LLM knowledge

5/5

Difficulty

Medium

bundle: ~90kb baseline

#fullstack#serverless#edge#typescript

What Next.js is good at

Strengths

+Server Components reduce client JS
+File-based routing and layouts
+Mature ecosystem and docs

Tradeoffs

−Tightly optimized for Vercel
−Complex caching model

Coding-agent prompt

Drop into Claude / Cursor to get idiomatic Next.js code.

You're writing a Next.js application. Follow these rules:

- Use the App Router (`app/` directory) — not the legacy Pages Router.
- Default to Server Components. Only add `"use client"` when you need browser APIs, state, or effects.
- Use Server Actions for mutations. Co-locate them with the component that triggers them.
- For data fetching, prefer direct database calls in Server Components over building an API layer.
- Cache with `cache()`, `unstable_cache`, or `revalidateTag` — tag-based revalidation is cleaner than time-based.
- Keep route segments flat. Nest only when layouts actually need to compose.
- Images go through `next/image`; fonts through `next/font`.
- Use `Metadata` or `generateMetadata` for per-route SEO; never stuff `<head>` manually.
- Types-first: no `any`, no `@ts-ignore`. If a type is awkward, fix the design.
- Keep Server/Client boundaries clean — don't pass non-serializable values from server to client components.

Beginner's guide to Next.js

In one line: A popular framework for building websites and web apps using React.

Next.js is a ready-made toolkit for building websites. It handles a lot of the boring plumbing for you — routing between pages, loading data, making the site fast — so you can focus on what your site does. It is built on top of React, which is the library that actually draws the buttons and text on the screen.

If React is the engine, Next.js is the whole car — steering wheel, seats, dashboard, GPS. You can drive it without building a transmission from scratch.

Try it in your terminal

```
npx create-next-app@latest my-app
```
Creates a new project in a folder called my-app with everything wired up.
```
cd my-app
```
Move into the project folder you just made.
```
npm run dev
```
Starts a local preview server. Open http://localhost:3000 in your browser to see it.

Heads up: The version of Next.js in this project has some changes that older tutorials won't match. If something on the internet says do it one way and your code complains, trust the code.

Popular pairings with Next.js

Browse all categories

Frontend Styling / UI & Animation Backend Compute / Hosting Database ORM / Query Layer Auth File Storage Monitoring / APM Product Analytics Web Analytics Transactional Email Payments AI / LLM Search CMS / Content CI/CD