All databases

Cursor rule

Nextjs App Router Cursorrules Prompt File

Cursor rules for Next.js development with App Router integration.

FrontendNext.js

Next.js App Router best practices

js
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

js
const folderStructure = `
app/
  layout.js
  page.js
  components/
  lib/
  styles/
public/
`;

Additional instructions

js
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
`;

More Frontend rules

Frequently asked questions

What is the Nextjs App Router Cursorrules Prompt File Cursor rule?

Cursor rules for Next.js development with App Router integration. It is a Frontend rule covering Next.js, stored as nextjs-app-router-cursorrules-prompt-file.mdc.

How do I use the Nextjs App Router Cursorrules Prompt File rule in Cursor?

Copy the rule from this page and save it as nextjs-app-router-cursorrules-prompt-file.mdc in your project's .cursor/rules folder, or paste it into Cursor's project rules settings.