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.

Common Commands/API

• Create project: npx create-next-app@latest my-app --app to use App Router; add --typescript for TypeScript support.
• Development server: next dev --port 3001 to run on a specific port with hot reloading.
• Build and deploy: next build for production build, then vercel --prod for deployment; use Vercel API endpoint like POST https://api.vercel.com/v13/now/deployments?teamId=$VERCEL_TEAM_ID with JSON body { "name": "my-app" }.
• API routes: Define in app/api/route.js, e.g., export async function GET(request) { const data = await fetch('https://api.example.com'); return Response.json(data); }.
• Config formats: Edit next.config.js for custom settings, e.g., module.exports = { images: { domains: ['example.com'] }, experimental: { appDir: true } }; use .env.local for env vars like NEXT_PUBLIC_API_URL="https://api.example.com".
• Turbopack commands: Enable in next.config.js and run next dev for faster iterations.

Integration Notes

Integrate databases like PostgreSQL via Prisma: install @prisma/client, run npx prisma migrate dev, and use in server actions with env var $DATABASE_URL for connection strings. For auth, use NextAuth.js: install next-auth, configure in [...nextauth].js, and set $NEXTAUTH_SECRET in .env; example: import NextAuth from 'next-auth'; export default NextAuth({ providers: [] }). Link with Vercel for CI/CD by adding vercel.json with { "routes": [{ "src": "/api/(.*)", "dest": "/api/$1" }] }. If API keys are needed, store as env vars like $STRIKE_API_KEY and access via process.env.STRIKE_API_KEY in components.

Error Handling

Handle 404s by creating app/404.js with a custom page: export default function NotFound() { return <h1>404 - Page Not Found</h1>; }. Use error boundaries in components: wrap with <ErrorBoundary fallback={<div>Error occurred</div>}>; in App Router, add error.js files per route. For build errors, check next.config.js for misconfigurations; common fix: ensure all imports are correct in server components. Debug SSR issues by running next build --debug and inspecting logs; for API errors, use try/catch in actions, e.g., try { await fetchData(); } catch (error) { console.error(error.message); return NextResponse.json({ error: 'Fetch failed' }, { status: 500 }); }.

Graph Relationships

• Related to cluster: web-dev (e.g., shares resources with other web-dev skills like frontend-react).
• Connected via tags: nextjs (links to advanced-react skills), react (integrates with state-management tools), fullstack (overlaps with backend-node skills), web (connects to deployment-vercel skills).