Our review
This skill provides patterns and best practices for building fullstack React applications with Next.js, including routing, SSR/SSG, API routes, and middleware.
Strengths
- File-based routing with dynamic and API routes
- Native support for server components and SSR/SSG
- Flexible middleware for authentication and rewrites
- Simplified deployment with platforms like Vercel
Limitations
- Limited to Next.js versions 13-15
- Middleware runs at the edge with certain limitations
- API routes can have cold starts
Use this skill when building fullstack React apps that require SSR/SSG, API routes, or custom middleware.
Avoid this skill for simple static sites without server logic, or if you're using React without Next.js.
Security analysis
SafeThe skill provides informational guidance on Next.js patterns and does not contain any executable code, destructive commands, or instructions to exfiltrate data. It only uses safe tools like documentation-reader and web-search.
No concerns found
Examples
Create a Next.js page that fetches a blog post using getServerSideProps and renders it with SSR.Implement a Next.js API route at /api/users that returns a list of users from a database.Add middleware to Next.js that checks for a valid JWT token and redirects unauthenticated users to /login.name: next description: "Next.js framework patterns and best practices for fullstack React applications. Routing, SSR/SSG, API routes, middleware, deployment. Trigger: When building with Next.js, configuring SSR/SSG, or deploying Next.js apps." skills:
- conventions
- react
- typescript
- architecture-patterns
- humanizer dependencies: next: ">=13.0.0 <15.0.0" react: ">=18.0.0 <19.0.0" allowed-tools:
- documentation-reader
- web-search
Next.js Skill
When to Use
- Building React apps with SSR/SSG
- Implementing API routes or middleware
- Deploying fullstack React projects
Critical Patterns
- Use file-based routing and dynamic routes
- Prefer server components for data fetching
- Leverage middleware for auth and rewrites
Decision Tree
- SSR/SSG needed? → Use getServerSideProps/getStaticProps
- API needed? → Use /pages/api or app/api
- Custom routing? → Use dynamic routes
Edge Cases
- Incremental static regeneration
- Middleware edge limitations
- API route cold starts
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.