web-nextjs

Purpose

This skill provides expertise in building and deploying web applications with Next.js 15, focusing on modern features like App Router, server actions, and optimized rendering strategies.

When to Use

Use this skill for projects requiring fast, SEO-friendly React apps with server-side logic; ideal for e-commerce sites needing SSR, blogs with SSG, or dynamic apps with ISR; avoid for simple static sites where plain React suffices.

Key Capabilities

• App Router: Enables file-based routing in the /app directory for better organization; example: create a route with app/about/page.jsx.
• Server Actions: Perform mutations on the server without API routes; define as async functions in forms, e.g., 'use server' directive in components.
• ISR/SSG/SSR: Configure ISR via revalidatePath() in server actions; SSG with getStaticProps; SSR with getServerSideProps for dynamic data fetching.
• Middleware: Write edge functions in middleware.js to handle authentication or redirects, e.g., checking user sessions before page loads.
• Turbopack: Speeds up development with incremental bundling; enable via next.config.js with experimental: { turbopack: true }.
• Vercel Deployment: Deploy apps with zero-config via Vercel CLI; supports automatic ISR invalidation through webhooks.

Usage Patterns

To build a Next.js app, start by creating a project: run npx create-next-app@latest my-app --typescript and navigate to the /app directory for routing. For server actions, import and use them in forms: e.g., in a component, add async function addItem() { 'use server'; await db.insert(item); }. Implement SSR by exporting getServerSideProps from a page: export async function getServerSideProps() { const data = await fetchData(); return { props: { data } }; }. For ISR, use revalidate in actions: e.g., revalidatePath('/posts') after updating content. Example 1: Build a blog with SSG—create app/posts/[id]/page.jsx with getStaticProps to fetch posts, then run next build for static output. Example 2: Add authentication middleware—create middleware.js with export function middleware(request) { if (!request.cookies.token) return NextResponse.redirect('/login'); } and test with next dev.