# Next.js 15 > Modern React framework for building full-stack web applications with App Router, Server Components, and optimized performance - Skill: `majiayu000/next-js-15` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/next-js-15` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/next-js-15/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/next-js-15 --- # Next.js 15 Next.js is a React framework that provides server-side rendering, static site generation, API routes, and many other features for building modern web applications. ## Quick Start (App Router) ```bash npx create-next-app@latest my-app cd my-app npm run dev ``` ## Core Concepts ### Server vs Client Components **Server Components** (default): - Run on the server - Can access server-side resources (database, files) - No JavaScript sent to client - Can use async/await directly ```tsx // app/page.tsx async function getPosts() { const res = await fetch("https://api.example.com/posts"); return res.json(); } export default async function Page() { const posts = await getPosts(); return ; } ``` **Client Components** (with 'use client'): - Run on client and server - Can use state, effects, browser APIs - JavaScript sent to client ```tsx // components/Counter.tsx "use client"; import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); return ; } ``` ### Data Fetching Patterns **Static Data (Default)**: ```tsx // Cached until manually invalidated export default async function Page() { const data = await fetch("https://api.example.com/posts"); return ; } ``` **Dynamic Data (No Cache)**: ```tsx // Refetched on every request export default async function Page() { const data = await fetch("https://api.example.com/posts", { cache: "no-store", }); return ; } ``` **Revalidated Data**: ```tsx // Revalidated every 60 seconds export default async function Page() { const data = await fetch("https://api.example.com/posts", { next: { revalidate: 60 }, }); return ; } ``` ### Route Handlers (API Routes) Create API endpoints in the `app` directory: ```tsx // app/api/posts/route.ts import { NextResponse } from "next/server"; export async function GET() { const res = await fetch("https://api.example.com/posts"); const posts = await res.json(); return NextResponse.json(posts); } export async function POST(request: Request) { const body = await request.json(); // Create post logic return NextResponse.json({ success: true }); } ``` ### Layouts and Routing **Root Layout**: ```tsx // app/layout.tsx export default function RootLayout({ children, }: { children: React.ReactNode; }) { return (
{children}