Skip to content
Back to skills

Nextjs

ASecurity

Next.js App Router skill covering RSC, Server Actions, data fetching, routing, and deployment. Use when building Next.js applications.

  • 47 stars
  • 0 votes
  • 0 copies
  • 2 views
  • Added September 12, 2026
developmentnextjsapi

Works with

  • cli
  • api

Security analysis

A100/100

Scanned September 12, 2026

npx -y skills add skeletorflet/opencode-supreme-setup --skill nextjs --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Nextjs?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Nextjs
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/skeletorflet-nextjs/badge)](https://www.skillsdirectory.com/skills/skeletorflet-nextjs)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: nextjs
description: Next.js App Router skill covering RSC, Server Actions, data fetching, routing, and deployment. Use when building Next.js applications.
---

## nextjs

App Router is the default. Layouts nest via file system. loading/error/not-found files are boundary catches.

### Core Concepts
- App Router: file-based routing in app/, layouts persist state across navigations
- RSC vs Client: Server Components by default, "use client" for browser APIs and hooks
- Server Actions: async functions in RSC, callable from forms, skip writing API routes
- Data fetching: fetch() with next.revalidate for ISR, route segment config for SSR/SSG

### Routing Patterns
- Layouts: layout.tsx wraps child pages, persists UI and state across navigations
- Route groups: (name) folders group routes without affecting URL path
- Parallel routes: @slot convention renders independent views per route simultaneously
- Intercepting routes: (..) pattern for modals that open from any parent segment

### Best Practices
- Default to Server Components, add "use client" only for interactivity
- colocate data fetching in the component that needs it, no getServerSideProps
- Use ISR with revalidate over full SSR for content that changes infrequently
- Protect routes in middleware.ts before they reach the page component

### Common Code Patterns
- Parallel data fetching with Promise.all in Server Components
- Server Action with revalidatePath and redirect post-mutation

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.