What is Next.js App Router?

Next.js App Router is a free, open-source AI agent skill. // Next.js App Router .cursorrules

How do I install Next.js App Router?

Install Next.js App Router with a single command: npx mdskills install PatrickJS/cursor-nextjs-app-router. This downloads the skill files into your project and your AI agent picks them up automatically.

What platforms support Next.js App Router?

Next.js App Router works with Cursor. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.

← Back to rules

Next.js App Router

Name: Next.js App Router: AI Agent Skill
Rating: 4 (1 reviews)
Author: PatrickJS

RulesDesign SystemsIntermediate

// Next.js App Router .cursorrules

by @PatrickJS0Updated 2 weeks ago

Add this skill

npx mdskills install PatrickJS/cursor-nextjs-app-router

Fork & Edit

Skill Advisor4.0

Lists Next.js App Router conventions but lacks actionable instructions for AI agents

+Covers key Next.js App Router patterns and file conventions
+Provides clear folder structure guidance
-Lacks trigger conditions and step-by-step agent instructions
-Over-scoped permissions (network access not justified by static rules)
-No examples of how agent should apply these rules in practice

SKILL.md

Edit in Browser

1// Next.js App Router .cursorrules
2 
3// Next.js App Router best practices
4 
5const nextjsAppRouterBestPractices = [
6  "Use server components by default",
7  "Implement client components only when necessary",
8  "Utilize the new file-based routing system",
9  "Use layout.js for shared layouts",
10  "Implement loading.js for loading states",
11  "Use error.js for error handling",
12  "Utilize route handlers for API routes",
13];
14 
15// Folder structure
16 
17const folderStructure = `
18app/
19  layout.js
20  page.js
21  components/
22  lib/
23  styles/
24public/
25`;
26 
27// Additional instructions
28 
29const additionalInstructions = `
301. Use TypeScript for type safety
312. Implement proper metadata for SEO
323. Utilize Next.js Image component for optimized images
334. Use CSS Modules or Tailwind CSS for styling
345. Implement proper error boundaries
356. Follow Next.js naming conventions for special files
367. Use environment variables for configuration
37`;
38 
39

Full transparency — inspect the skill content before installing.