| name | nextjs |
| title | Next.js |
| category | Frameworks & UI |
| description | Use to build production React applications with the App Router, Server Components, Route Handlers, caching, metadata, and deployment. |
| tags | ["nextjs","react","app-router","server-components","full-stack"] |
| official_docs | https://nextjs.org/docs |
| sources | ["https://nextjs.org/docs/app/getting-started/project-structure","https://nextjs.org/docs/app/getting-started/server-and-client-components","https://nextjs.org/docs/app/getting-started/route-handlers"] |
| last_verified | 2026-08-10T00:00:00.000Z |
Next.js - Skillship
Build full-stack React apps with file-based routing, Server Components by default, API endpoints,
streaming, caching, and production deployment built in.
🧭 When to use this skill
- Use when: building a React app that needs SSR, static generation, APIs, or strong SEO.
- Use when: you want server-side data access with small client bundles.
- Don't use for: a static page that plain HTML or a small Vite app can handle more simply.
⚡ Quickstart
1. Create an app
npx create-next-app@latest my-app
cd my-app
npm run dev
2. Know the App Router files
app/
layout.tsx # shared UI; root layout includes <html> and <body>
page.tsx # /
loading.tsx # Suspense fallback for this segment
error.tsx # client-side error boundary
blog/[slug]/page.tsx
api/posts/route.ts # /api/posts endpoint
public/ # static assets
proxy.ts # request proxy in Next.js 16+
3. Fetch on the server by default
import "server-only";
export default async function PostsPage() {
const response = await fetch("https://api.example.com/posts");
if (!response.ok) throw new Error("Failed to load posts");
const posts = await response.json();
return <ul>{posts.map((post: { id: string; title: string }) => <li key=>{post.title})};
}
