nextjs
Next.js framework best practices including App Router, data fetching, and performance optimization.
Best use case
nextjs is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Next.js framework best practices including App Router, data fetching, and performance optimization.
Teams using nextjs should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs Compares
| Feature / Agent | nextjs | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Next.js framework best practices including App Router, data fetching, and performance optimization.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Next.js Best Practices ## App Router (v13+) - Use Server Components by default - Add 'use client' only when needed - Use loading.tsx for loading states - Use error.tsx for error boundaries - Use layout.tsx for shared layouts - Use route groups (folder) for organization ## Data Fetching - Fetch in Server Components when possible - Use React Suspense for streaming - Use generateStaticParams for static generation - Use revalidate for ISR - Use Next.js cache() for request deduplication ## Performance - Use next/image for optimized images - Use next/font for font optimization - Use next/link for client-side navigation - Implement proper caching headers - Use dynamic imports for code splitting ## API Routes - Use Route Handlers in app directory - Validate inputs thoroughly - Handle errors gracefully - Use middleware for auth/logging ## SEO - Use generateMetadata for dynamic SEO - Implement proper Open Graph tags - Use semantic HTML - Add structured data (JSON-LD)
Related Skills
tailwind-css-nextjs-guide-cursorrules-prompt-file-cursorrules
Apply for tailwind-css-nextjs-guide-cursorrules-prompt-file. Prompt Generation Rules: - Analyze the component requirements thoroughly - Include specific DaisyUI component suggestions
nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules
Apply for nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. --- description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/*
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
supastarter-nextjs-skill
Guides development with supastarter for Next.js only (not Vue/Nuxt): tech stack, setup, configuration, database (Prisma), API (Hono/oRPC), auth (Better Auth), organizations, payments (Stripe), AI, customization, storage, mailing, i18n, SEO, deployment, background tasks, analytics, monitoring, E2E. Use when building or modifying supastarter Next.js apps, adding features, or when the user mentions supastarter Next.js, Prisma, oRPC, Better Auth, or related Next.js stack topics.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
nextjs-tanstack-form
TanStack Form v1 for Next.js 16 with Server Actions, Zod validation, and shadcn/ui integration. Use when building forms, validation, multi-step wizards, or dynamic field arrays.
nextjs-supabase-starter
Rules and best practices for building a Next.js starter app with Supabase (auth, profiles, RLS, declarative schemas, setup script). Use when working on Next.js + Supabase integration, authentication, migrations, or this starter app codebase.
nextjs-shadcn-builder
Build new Next.js applications or migrate existing frontends (React, Vue, Angular, vanilla JS, etc.) to Next.js + shadcn/ui with systematic analysis and conversion. Enforces shadcn design principles - CSS variables for theming, standard UI components, no hardcoded values, consistent typography/colors. Use for creating Next.js apps, migrating frontends, adopting shadcn/ui, or standardizing component libraries. Includes MCP integration for shadcn documentation and automated codebase analysis.
nextjs-senior-dev
Senior Next.js 15+/16 Engineer skill for App Router. Use when scaffolding production apps, enforcing RSC patterns, auditing codebases, or optimizing performance.
nextjs-production-debugger
Advanced debugging guide for Next.js App Router production issues including SSR/CSR bugs, hydration errors, runtime mismatches, performance, and caching.
nextjs-frontend-guidelines
Next.js 15 frontend development guidelines for YGS (영영사) React 19/TypeScript application. Modern patterns including App Router, Server/Client Components, shadcn/ui components, Tailwind CSS 4, multi-method authentication (Firebase/Kakao/JWT), admin dashboard patterns, and Korean localization. Use when creating components, pages, API routes, fetching data, styling, or working with frontend code.
nextjs-code-reviewer
code reviews. Use when Codex needs this specialist perspective or review style.