Frontend#nextjs#app#router
Next.js App Router
Cursor rules for Next.js development with App Router integration.
Use it with Cursor, or export as AGENTS.md / CLAUDE.md for other AI coding agents — pick a format below.
// Next.js App Router .cursorrules
// Next.js App Router best practices
const nextjsAppRouterBestPractices = [
"Use server components by default",
"Implement client components only when necessary",
"Utilize the new file-based routing system",
"Use layout.js for shared layouts",
"Implement loading.js for loading states",
"Use error.js for error handling",
"Utilize route handlers for API routes",
];
// Folder structure
const folderStructure = `
app/
layout.js
page.js
components/
lib/
styles/
public/
`;
// Additional instructions
const additionalInstructions = `
1. Use TypeScript for type safety
2. Implement proper metadata for SEO
3. Utilize Next.js Image component for optimized images
4. Use CSS Modules or Tailwind CSS for styling
5. Implement proper error boundaries
6. Follow Next.js naming conventions for special files
7. Use environment variables for configuration
`;How to use: save the file at your project root (e.g.
.cursorrules or AGENTS.md) and your AI editor picks it up automatically.Related rules
Frontend→
Next.js
Next.js with TypeScript and Tailwind UI best practices
#nextjs
Frontend→
Next.js Material UI Tailwind Cssmpt
Cursor rules for Next.js development with Material UI and Tailwind CSS integration.
#nextjs#material#ui#tailwind
Frontend→
Next.js React Tailwind
Cursor rules for Next.js development with React and Tailwind CSS integration.
#nextjs#react#tailwind