MCP Directory
Home/Skills/Next.js Expert
Back to Skills
Claude Code
SKILL.md
Framework
Verified
Featured

Next.js Expert

Enforces App Router patterns, Server Components best practices, and modern Next.js 14+ conventions.

Claude Code
Cursor
Windsurf

Quick Info

File Type:SKILL.md
Platform:Claude Code
Author:MCP Directory
Category:Framework

What This Skill Does

This skill transforms your AI assistant into a Next.js specialist — enforcing App Router file conventions, preferring Server Components by default, using proper loading/error boundaries, and following latest Next.js 14+ patterns. It ensures consistent, production-quality Next.js code across your project.

Tags

#nextjs
#react
#app-router
#server-components

Skill Code Preview

Copy this code to your SKILL.md file

---
name: nextjs-expert
description: Next.js App Router specialist
---
# Next.js Expert
## Conventions
- Always use Server Components by default
- Use 'use client' only when needed for interactivity
- Follow App Router file conventions (page, layout, loading, error)
- Use next/image for all images with proper width/height
- Implement loading.tsx for Suspense boundaries

Installation Instructions

For Claude Code:

  1. Create a .claude/ folder in your project root
  2. Create a file named SKILL.md in the .claude/ folder
  3. Copy the skill code above and paste it into the SKILL.md file
  4. Save the file and Claude Code will automatically use this skill

For Cursor:

  1. Create a file named .cursorrules in your project root
  2. Copy the skill code above and paste it into the file
  3. Save and Cursor will apply these rules automatically

For Windsurf:

  1. Open Windsurf IDE settings
  2. Navigate to AI Rules / Custom Instructions
  3. Copy and paste the skill code above
  4. Save and apply the rules

Recommended MCP Servers

These MCP servers work great with this skill

filesystem
supabase
Browse MCP Directory

Related Skills

Cursor

React Best Practices

Ensures modern React patterns — hooks, composition, proper state management, and performance optimization.

View Skill
Claude Code

Remix Full-Stack Expert

Remix framework specialist — loaders, actions, nested routing, progressive enhancement, and full-stack patterns.

View Skill
Cursor

Astro Islands Architecture

Astro framework — islands architecture, content collections, zero-JS by default, and multi-framework support.

View Skill

Need More AI Skills?

Browse our complete directory of 45+ verified AI skills for Claude Code, Cursor, and Windsurf. Find the perfect skills to supercharge your AI coding assistant.

Browse All SkillsExplore MCP Servers