Skip to content
Development
Skill

/nextjs

Next.js framework patterns, SSR/SSG, and App Router best practices

Boost this skill
@fujigo-softwarefujigo-software@fujigo-software
From plugin
f5-framework
2434 skills104 agents69 commands
Install
$ npx -y skills add Fujigo-Software/f5-framework-claude --skill nextjs --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/nextjs

Context preview

The summary Claude sees to decide when to auto-load this skill.

Next.js framework patterns, SSR/SSG, and App Router best practices

SKILL.md

nextjs.SKILL.md
name: nextjs-skills
description: Next.js framework patterns, SSR/SSG, and App Router best practices
category: stacks/frontend/nextjs
applies_to: nextjs
allowed-tools: Read, Write, Glob, Grep, Bash
user-invocable: true
context: inject

Next.js Skills

React framework for production with hybrid static & server rendering.

Sub-Skills

Architecture

  • [app-router.md](architecture/app-router.md) - App Router patterns
  • [pages-router.md](architecture/pages-router.md) - Pages Router patterns
  • [project-structure.md](architecture/project-structure.md) - Project organization

Rendering

  • [server-components.md](rendering/server-components.md) - Server Components
  • [client-components.md](rendering/client-components.md) - Client Components
  • [ssr.md](rendering/ssr.md) - Server-side rendering
  • [ssg.md](rendering/ssg.md) - Static generation
  • [isr.md](rendering/isr.md) - Incremental Static Regeneration

Data Fetching

  • [server-actions.md](data-fetching/server-actions.md) - Server Actions
  • [fetch-api.md](data-fetching/fetch-api.md) - Fetch patterns
  • [caching.md](data-fetching/caching.md) - Caching strategies

Routing

  • [dynamic-routes.md](routing/dynamic-routes.md) - Dynamic routes
  • [route-handlers.md](routing/route-handlers.md) - API routes
  • [middleware.md](routing/middleware.md) - Middleware patterns
  • [layouts.md](routing/layouts.md) - Layout patterns

Performance

  • [image-optimization.md](performance/image-optimization.md) - next/image
  • [font-optimization.md](performance/font-optimization.md) - next/font
  • [bundle-analysis.md](performance/bundle-analysis.md) - Bundle optimization

Authentication

  • [next-auth.md](authentication/next-auth.md) - NextAuth.js
  • [middleware-auth.md](authentication/middleware-auth.md) - Middleware auth

Testing

  • [jest.md](testing/jest.md) - Jest patterns
  • [playwright.md](testing/playwright.md) - E2E testing

Detection

Auto-detected when project contains:

  • `next.config.js` or `next.config.mjs`
  • `next` package
  • `getServerSideProps` or `getStaticProps` patterns
Read more
Read it on GitHub ↗
Ships withf5-framework

AI-Powered Development Framework for Claude Code

Get the whole plugin
Stats
PythonJavaScriptReactNext.jsVue
+7 tags
AngularDockerKubernetesAnthropicMCPJiraFlutter
24
Stars
8
Forks
Quiet
Maintenance
Python
Language
MIT
License
7mo ago
Last commit
7mo ago
Created

Repo: Fujigo-Software/f5-framework-claude

In this plugin
104 agents69 commands34 skills
See everything inside

Other skills on f5-framework.

See all 34 skills in f5-framework