10 best practices to improve your NextJS application on Cursor

tl;dr If you’re not a professional NextJS developer for a very long time, the blog will help you with some low hanging fruits that can improve your app’s performance significantly. I’ve tried to add Cursor prompts, step-by-step instructions and screenshots wherever I could. If you face any issues or need help, please feel free to bug me on discord.

Stack Assumption: Next.js + Supabase + Cursor (or similar AI coding assistant)

1. ✨ Speed Up Your Pages (Next.js)

Why It Matters:

Faster pages = better user experience, lower bounce rates, and higher conversions.

What You Should Do:

• Run a Lighthouse audit and fix top bottlenecks.
• Use ISR/SSG to cache pages.
• Use <Image /> and next/font.
• Use dynamic imports to lazy-load non-critical components.

Prompt to Use with AI:

"Convert this page to use getStaticProps or getStaticPaths for better caching."

Code Example:

import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("../components/HeavyComponent"));

export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data }, revalidate: 60 };
}

2. 🔍 Real-Time Error Tracking

Why It Matters:

Catching issues early = faster debugging, less downtime, and better user trust.

What You Should Do:

• Use Sentry or @hyperlook/telemetry-sdk to monitor errors.
  • Sentry is a well-established platform with deep integrations.
  • @hyperlook/telemetry-sdk is lightweight, open-source, and built for modern JS apps.

Prompt to Use:

"Add Sentry or @hyperlook/telemetry-sdk to track frontend and backend errors."

Code Snippet:

import * as Sentry from '@sentry/nextjs';
Sentry.init({ dsn: process.env.SENTRY_DSN });

3. 👛 Shrink Bundle Size

Why It Matters:

Smaller bundles = faster load times and better first interaction.

What You Should Do:

• Use @next/bundle-analyzer to visualize bundle composition.
• Avoid importing entire libraries (e.g., lodash, moment).
• Split large files into modular units.

Prompt:

"Visualize my bundle size and identify bloated dependencies using @next/bundle-analyzer"

Code Tip:

import debounce from 'lodash/debounce';

4. ⚡ Boost Dev Speed

Why It Matters:

Clean, consistent code improves team velocity and reduces bugs.

What You Should Do:

• Use Prettier, ESLint, and Husky to enforce coding standards.
• Use barrel exports and an organized folder structure.

Prompt:

"Set up Prettier, ESLint, and Husky pre-commit hooks."

5. 🔄 Snappy APIs with SWR

Why It Matters:

Caching and background revalidation make your UI feel instant and responsive.

What You Should Do:

• Use SWR for lightweight local caching.
• Or choose more powerful options:
  • TanStack Query (aka React Query): great for complex caching, mutations, background sync.
  • RTK Query: best if you're already using Redux.

Prompt:

"Convert this API fetch to use SWR/react-query/RTK Query with caching and revalidation."

view the full comparison here.

Code Example:

import useSWR from 'swr';
const fetcher = url => fetch(url).then(res => res.json());
const { data } = useSWR('/api/user', fetcher);

6. 🔒 Secure Your Application

Why It Matters:

Security issues break user trust and can have legal/financial consequences.

What You Should Do:

• Set cookies with httpOnly, secure, sameSite.
• Sanitize HTML with DOMPurify to prevent XSS.

7. 🔍 SEO Optimizations

Why It Matters:

More traffic from search engines = higher growth, especially for public-facing pages.

What You Should Do:

• Run a Lighthouse SEO audit.
• Use semantic HTML, aria-labels, <title> and <meta description>.
• Add sitemap with next-sitemap.

Prompt:

"Generate sitemap and improve HTML structure for SEO."

8. 📂 Supabase Best Practices

Why It Matters:

Bad practices can leak sensitive data or crash your app at scale.

What You Should Do:

• Never use NEXT_PUBLIC_ for private keys.
• Use batch inserts for efficiency.
• Add pagination to queries.
• Always clean up Supabase subscriptions to avoid memory leaks.

9. 🛡️ RLS (Row Level Security) Done Right

Why It Matters:

Data should only be accessible to the people who own it. RLS makes that possible.

What You Should Do:

• Add RLS policies using auth.uid().
• Apply policies to every table involved in a join.

An example of how a RLS policy looks like in supabase, these functions can be defined as well here

How to Do It:

Open Supabase SQL Editor and enter:

"Add an RLS policy to ensure users can only see their own todos."

"Fix this query with joins so it passes all relevant RLS policies."

10. 🧰 Build Awareness: Test Like a User

Why It Matters:

Developers miss bugs that only appear in real-world conditions.

What You Should Do:

• Open in incognito.
• Simulate slow 3G via DevTools → Network → Throttling → Slow 3G.
• Use Chrome mobile emulator.

How you can verify how your website looks like in various devices

Note:

Cursor or AI tools can’t run Lighthouse audits or simulate mobile networks — you must do this manually in the browser.

If you liked the blog and have any thoughts, let me know!