nextjs
Next.js full-stack React framework with SSR, API routes, and file-based routing
Works with
Agent Skills format with YAML frontmatter. Claude Code reads it as-is.
---
name: "nextjs"
description: "Next.js full-stack React framework with SSR, API routes, and file-based routing"
license: "MIT"
---
## What I do
- Build server-side rendered React applications
- Create API routes and serverless functions
- Implement file-based routing with dynamic routes
- Use getStaticProps, getServerSideProps, and getStaticPaths
- Optimize performance with SSR, SSG, and ISR
- Handle authentication with NextAuth.js
- Use TypeScript for type safety
## When to use me
When building modern React applications with SSR, API routes, or full-stack capabilities.
## Pages Router
```typescript
// pages/index.tsx
import { GetServerSideProps } from 'next'
interface Props {
data: User[]
}
export const getServerSideProps: GetServerSideProps<Props> = async () => {
const res = await fetch('https://api.example.com/users')
const data = await res.json()
return {
props: { data },
}
}
export default function Home({ data }: Props) {
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}
```
## App Router (Next.js 13+)
```typescript
// app/page.tsx
import { getData } from '@/lib/data'
export default async function Page() {
const data = await getData()
return <main>{data.title}</main>
}
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// app/api/route.ts
import { NextResponse } from 'next/server'
export async function GET() {
return NextResponse.json({ message: 'Hello' })
}
```
## Dynamic Routes
```typescript
// app/posts/[id]/page.tsx
interface Props {
params: { id: string }
}
export default async function Post({ params }: Props) {
const post = await fetchPost(params.id)
return <article>{post.content}</article>
}
export async function generateStaticParams() {
const posts = await fetchAllPosts()
return posts.map(post => ({ id: post.id }))
}
```
## Client Components
```typescript
'use client'
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>
)
}
```
## Server Actions
```typescript
// app/actions.ts
'use server'
export async function createUser(formData: FormData) {
const name = formData.get('name')
// Database operation
await db.user.create({ name: name as string })
revalidatePath('/users')
}
```More Frontend Frameworks skills
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
design-taste-frontend
leonxlnx/taste-skill
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
