How to structure a Next.js project for Cursor

1---
2description: Next.js App Router conventions
3globs: "app/**/*.tsx,app/**/*.ts"
4alwaysApply: true
5---
6
7## Next.js App Router Rules
8- Use the app/ directory for all routes (NOT pages/)
9- page.tsx = route page component (default export)
10- layout.tsx = shared layout (wraps child routes)
11- loading.tsx = loading UI (Suspense boundary)
12- error.tsx = error boundary (must be 'use client')
13- not-found.tsx = 404 page
14- route.ts = API route handler (GET, POST, etc.)
15
16## Component Rules
17- Server Components by default (NO 'use client' unless needed)
18- Add 'use client' ONLY for: useState, useEffect, event handlers, browser APIs
19- Data fetching in Server Components using async/await (not useEffect)
20- Place shared components in src/components/
21- Place page-specific components in app/[route]/_components/
22
23## File Organization
24- app/ — routes and layouts
25- src/components/ — shared UI components
26- src/hooks/ — custom React hooks
27- src/lib/ — utility functions and API clients
28- src/types/ — TypeScript type definitions
29- public/ — static assets

1// Composer prompt (Cmd+I):
2// Create the following Next.js App Router project structure:
3//
4// app/
5//   layout.tsx (root layout with html, body, Providers)
6//   page.tsx (home page)
7//   loading.tsx (global loading spinner)
8//   not-found.tsx (404 page)
9//   (auth)/
10//     login/page.tsx
11//     register/page.tsx
12//     layout.tsx (auth layout, no navbar)
13//   (dashboard)/
14//     dashboard/page.tsx
15//     settings/page.tsx
16//     layout.tsx (dashboard layout with sidebar)
17//   api/
18//     users/route.ts
19//     auth/route.ts
20//
21// src/
22//   components/ui/ (Button, Input, Modal)
23//   components/layout/ (Navbar, Sidebar, Footer)
24//   hooks/ (useAuth, useMediaQuery)
25//   lib/ (fetcher, auth, utils)
26//   types/ (user, api)
27//
28// Generate minimal placeholder content for each file.

1// Cursor Chat prompt (Cmd+L):
2// @.cursor/rules/nextjs.mdc Create a new /products route with:
3// - Server Component page that fetches products from /api/products
4// - Loading state with loading.tsx
5// - Error boundary with error.tsx
6// - Product card component in app/products/_components/
7// Use Server Component data fetching (async page, not useEffect).
8
9// Expected file structure:
10// app/products/
11//   page.tsx (async Server Component)
12//   loading.tsx
13//   error.tsx ('use client')
14//   _components/ProductCard.tsx

1// Cursor Chat prompt (Cmd+L):
2// @app/layout.tsx Create route groups:
3// (marketing) — public pages with marketing navbar
4//   /pricing, /about, /blog
5// (app) — authenticated pages with app sidebar
6//   /dashboard, /settings, /profile
7// (auth) — auth pages with minimal layout
8//   /login, /register
9// Each group should have its own layout.tsx.
10// The root layout has only Providers and html/body.

1# .cursorignore
2.next/
3node_modules/
4out/
5.vercel/
6coverage/
7*.tsbuildinfo