Five tips for building Next.js Apps with Cursor

At any stage of your Next.js app, configuration and consistency are key. That’s where an AI-powered IDE like Cursor can really shine. With the right setup, it helps you move faster, write cleaner code, and stay organized. But like any tool, it works best when used thoughtfully. Here are five ways to get the most out of it.

Docs

With @ Symbols, Cursor lets you use @docs to call attention to documentation from pretty much anywhere, provided it's already been indexed. Cursor already comes with a 💫plethora💫 of pre-scraped and indexed site docs out of the box, including NextJS (here's the full list). Still, there's a good chance that if you're building a more fully-loaded Next app, you're going to be working with a library or two whose docs don't come standard. For example, whether you're building off a boilerplate template or starting from scratch, if your app involves authentication then there's a good chance you'll be working with NextAuth.js, whose docs are on a totally different site then NextJS's. And that's for a Next library.

My latest project uses Supabase as a database, another platform whose docs don't come pre-loaded with Cursor. Fortunately, adding docs for cursor to index is pretty straightforward, so whether you're just getting started on a project or already rolling along, take a minute to make sure Cursor knows exactly where to look for information on the services your app uses, regardless of your architecture. And, assuming you don't want to have to add "@Docs" to every interaction with the chat window, there's an easy way to keep Cursor in line, with...

Rules

In Cursor, rules essentially function like system prompts, a sort of preamble to each of your conversations that reminds Cursor the who/what/why of your application. Unlike with @Docs, Cursor doesn't come with any pre-loaded rules at either the editor or project-level, which is.. fair, if you think about it. Luckily, there's a handy little website called cursor.directory that's just chock full of rulesets, organized by project type. You'll find at least ten different rule sets under the Next.js section, but don't go copy and pasting the first one you see just yet. Each ruleset is customized to a particular techstack, so take a minute to read through the options and pick which one aligns with yours best. Or, better yet, start with a predefined ruleset as a baseline and tweak it to suit your needs as you see fit. Doing so not only makes Cursor's suggestions more accurate time and time again, but also (and maybe more importantly), encourages you to take a minute to think through not just techstack but the particulars of your app's structure through the lens of the features that set Next apart. Will this app be using Pages Router or App Router (recommended)? What pages will be better suited for static site generation, if any? Answering these questions for Cursor ahead of time makes you ask yourself questions about the end state of your app that you might not otherwise think through before jumping into bulid mode. In that sense, your most valuable conversation with Cursor might happen before you ever open the chat window.

Linting

A linter is basically a tool you can add to your project root that automatically analyzes your code for style and formatting consistency, and other errors. Next.js comes with its own ESLint plugin, eslint-plugin-next, and helps you sidestep common pitfalls like forgetting attributes or misusing Next.js components.By weaving this plugin into your project, you're not just following best practices—you're building a sturdier, more reliable app—whether or not you're using an AI assistant.

With Cursor, linting takes on an even cooler role. Cursor's Composer feature doesn't just generate code; it actively checks for linting issues and tries to fix them on the spot, so each automatic iteration is potentially one less frustrated back and forth with you and the chat.What's more, keeping your code consistent with your linter pays off in the background when it comes time for Cursor to index your codebase, leading to better search results and smarter code suggestions. So, before you dive into code mode, take a moment to set up linting. It's a small step that paves the way for smoother development and a more polished final product.

Reference Points

Docs aren't the only way to quickly add relevant context to a Cursor chat. By typing @ followed by the name of a file or folder, you can quickly pull specific parts of your project into your Cursor interaction, helping Cursor zero in on the exact piece of code you need and making your interactions smoother and more precise. In sprawling projects with countless files, being deliberate about which files or folders you reference is key. Pointing Cursor to the right sections helps it generate code and suggestions that fit seamlessly into your project’s structure, which is especially useful in Next.js apps where pages follow different rendering strategies.

So, next time you're starting a file from scratch or seeking advice from Cursor on a particular chunk of code, take a moment to reference the relevant files or folders, if they exist. This small step can lead to more accurate suggestions and a more efficient coding experience. I would add though, that at the end of the day, there's still nothing quite like...

DIY

When it's on the ball, watching Cursor's Composer work its magic is pretty magical. Files spring into the air, code cascades through your screen like green waterfalls, the chat bubbles over with the exuberance of a Gatsby-esque... alright look the point is it's pretty cool.

BUT. As fun as it is to watch, you're still.. watching. And that's assuming Cursor (or, more accurately, whatever underlying LLM you've selected) gets it right. Even with all the previous tips in this article, generating Code with cursor is still a gamble; the optimizations discussed here are just weighing the dice as much as you can in your favor. But why gamble when you can go on a treasure hunt? Vercel, the company behind Next.js, has a bananas collection of templates for all sorts of websites (blogs, shops, dashboards) powered by an equally diverse set of frameworks. For my latest project, I wanted to build an admin dashboard, powered by Next.js with auth and storage handled by Supabase. I found a great template that fit the bill style-wise, but the boilerplate used NextAuth and Neon/PostgreSQL. So what did I do? heartlessly ripped out the UI from the boilerplate project and plopped it into my Next.js with Supabase, a shameless folder drag and drop that contained every page and ui component that I wanted out of the gate. Sure, there were a few file path misalignments and missing dependencies, but nothing that Cursor couldn't easily help clean up in a brief composer session.

There are so many great apps already out there, Next.js included, ripe for the taking. And still, so much more to make. It's in the exploration and interaction with the community of builders that you learn what you want, what you like and what you don't. As much as Cursor can help you build what you want, it can't tell you what you want to build. That's one question you have the luxury of answering for yourself, so get out there and explore.

Happy coding!