Our review
Provides patterns and best practices for building fullstack React applications with Next.js, covering routing, SSR/SSG, API routes, middleware, and deployment.
Strengths
- Structured guidance on file-based routing and dynamic routes.
- Recommends Server Components for data fetching to optimize performance.
- Covers rendering strategies (SSR, SSG, ISR) and deployment considerations.
- Addresses edge cases like incremental static regeneration and middleware limitations.
Limitations
- Tied to Next.js 13-14; earlier or later versions may differ.
- Does not cover advanced third-party integrations.
- Assumes prior knowledge of React and TypeScript.
Use this skill when building or deploying Next.js applications, especially for configuring routing, SSR/SSG, or middleware.
Avoid if using a different React framework (Gatsby, Remix) or a Next.js version outside the 13-14 range.
Security analysis
SafeThe skill provides only instructional content about Next.js best practices. It does not execute any code or contain dangerous commands, and the allowed tools (documentation-reader, web-search) are read-only and low-risk.
No concerns found
Examples
I need to create a blog with dynamic post pages using Next.js 13 App Router. Show me how to implement SSR with `getServerSideProps` equivalent in the App Router, including loading state and error handling.In my Next.js 14 app, I want to protect certain routes using middleware. Provide a complete example of middleware that checks for an authentication cookie and redirects unauthenticated users to a login page.I have a Next.js page that displays product data from an external API. I want to use ISR to revalidate every hour. Show me how to implement this with `revalidate` and handle fallback states.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.