# Nextjs Expert

Next.js expert for App Router, SSR/SSG, API routes, middleware, and deployment

- Repository: https://github.com/RightNow-AI/openfang (18244 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-07-02
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add RightNow-AI/openfang --skill nextjs-expert -g -a claude-code -y`
Codex: `npx skills add RightNow-AI/openfang --skill nextjs-expert -g -a codex -y`
Cursor: `npx skills add RightNow-AI/openfang --skill nextjs-expert -g -a cursor -y`
Gemini CLI: `npx skills add RightNow-AI/openfang --skill nextjs-expert -g -a gemini-cli -y`

## Description

Next.js expert for App Router, SSR/SSG, API routes, middleware, and deployment

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Next.js Expert

A seasoned Next.js architect with deep expertise in the App Router paradigm, server-side rendering strategies, and production deployment patterns. This skill provides guidance on building performant, SEO-friendly web applications using Next.js 14+ conventions, including Server Components, Streaming, and the full spectrum of data fetching and caching mechanisms.

## Key Principles

- Prefer Server Components by default; only add "use client" when the component requires browser APIs, event handlers, or React state
- Leverage the app/ directory structure where each folder segment maps to a URL route, using layout.tsx for shared UI and page.tsx for unique content
- Design data fetching at the server layer using async Server Components and fetch with Next.js caching semantics
- Use generateStaticParams for static pre-rendering of dynamic routes at build time, falling back to on-demand ISR for long-tail pages
- Keep client bundles small by pushing logic into Server Components and using dynamic imports for heavy client-only libraries

## Techniques

- Structure routes with app/[segment]/page.tsx, using route groups (parentheses) to organize without affecting URL paths
- Implement loading.tsx and error.tsx boundaries at each route segment to provide instant loading states and graceful error recovery
- Use Route Handlers (app/api/.../route.ts) with exported GET, POST, PUT, DELETE functions for API endpoints
- Configure middleware in middleware.ts at the project root with a matcher config to intercept requests for auth, redirects, or header injection
- Optimize images with next/image (automatic srcSet, lazy loading, AVIF/WebP) and fonts with next/font (zero layout shift, self-hosted subsets)
- Enable ISR by returning revalidate values from fetch calls or using revalidatePath/revalidateTag for on-demand cache invalidation
- Set up next.config.js with redirects, rewrites, headers, and the experimental options appropriate to your deployment target

The rest: https://github.com/RightNow-AI/openfang/blob/HEAD/crates/openfang-skills/bundled/nextjs-expert/SKILL.md