React/Next.js .cursorrules that worked for me

I did a lot of cursor rules testing over the past few weeks and wasn’t seeing much difference in outputs for the most part but a few stuck out to me so sharing them here:

favorite asks:

  1. error.tsx alongside every page

“Always create error.tsx alongside every page.tsx. error.tsx must be a client component that receives error and reset props. Display fallback UI with a retry button.”

I had “use error boundaries” at first and it did nothing, the ‘alongside’ seems to work best.

  1. revalidatePath after mutations

“After any create, update, or delete in a Server Action, call revalidatePath() for the affected route. Never rely on the client to refetch.”

Good for server actions that don’t seem to update

  1. loading.tsx with async pages

“Colocate a loading.tsx with every page.tsx that does async data fetching. Skeleton UI matching the page layout, not a spinner.”

Same thing as error.tsx basically where Cursor makes the page but doesn’t think about what happens while it loads so this prevents you from needing to do it yourself.

  1. Parallel routes for modals

“Use parallel routes (@modal) with intercepting routes (..) for modal patterns. The modal should have its own page.tsx that renders the full content as a fallback when accessed directly.”

Ask Cursor for a modal flow (like clicking a photo in a grid to open it bigger) and it goes straight to useState + a Dialog component, which works but can be a bit finicky. The parallel routes approach is what Next.js actually wants you to do, because it makes shareable URLs, back button works right, and if someone opens the link directly they get a full page instead of nothing.

  1. not-found.tsx at every layout level

“Create not-found.tsx alongside layout.tsx at each route segment. The not-found page should include navigation back to the parent segment, not just the home page.”

So you call notFound() somewhere and Next.js shows… the root 404 page. Which just says “page not found” with a link to /. If someone hits a bad URL at /dashboard/settings they should see “setting not found” with a link back to /dashboard, not get sent back to the homepage. Cursor doesn’t make these on its own but if you add the rule it puts not-found.tsx at each route segment with links back to where you were.

I have more of these if anybody wants some that include caching, server actions, metadata, middleware and some for other topics like general debugging, typescript, etc.

Hope this helps you save some context and maybe get more done faster.