LLM prompts and AI IDE setup

[mderazon]

Goals

1. Improve the accuracy, quality, and consistency of Next.js code generated by Large Language Models (LLMs) and AI assistants.
2. Ensure AI-generated code adheres to modern Next.js best practices, such as prioritizing the App Router, Server Components, and current data fetching strategies.
3. Reduce the time developers spend correcting outdated or incorrect code snippets provided by AI tools.
4. Establish a standardized set of instructions for AI tools (like VS Code Copilot, Google's Gemini, etc.) to produce high-quality, idiomatic Next.js code.

Non-Goals

1. This proposal does not aim to create a new, proprietary AI model or a "Next.js Chatbot." It focuses on providing context to existing, widely-used models.
2. It is not intended to change the Next.js framework itself, but rather to improve how external tools interact with it.
3. These guidance files are not meant to replace the official documentation, but to act as a supplement specifically for AI code generation.

Background

With the rapid adoption of AI-powered developer tools, many of us rely on them for boilerplate, component generation, and debugging. However, for a rapidly evolving framework like Next.js, LLMs often provide code that is outdated or suboptimal. For example, they might generate code using the Pages Router instead of the App Router, misuse useEffect for data fetching in Server Components, or fail to leverage newer features like the Metadata API. This leads to confusion, particularly for developers new to the ecosystem.

A great example of a solution to this problem comes from the Angular team. They have created a set of curated files to provide context to LLMs, resulting in much more accurate code generation. Their approach includes:

• A best-practices.md file with core guidelines.
• IDE-specific "rules files" (e.g., .github/copilot-instructions.md).

You can see their approach here: Angular AI/LLM Guidance
These are kind of "blessed" instruction files that are periodically maintained and updated by the team.

Adopting a similar strategy would be good for the Next.js community

Proposal

I propose that the Next.js team create and maintain a set of official guidance files for LLMs. This could be a community-driven effort managed by Vercel and core contributors.

1. Create a nextjs-best-practices.md file. This document would be the single source of truth for AI guidance, covering topics like:

• Prioritizing the App Router over the Pages Router.
• Clear distinctions and use cases for Server vs. Client Components.
• Modern data fetching and caching patterns.
• Correct usage of core components like next/link and next/image.
• File-based routing and metadata conventions.

2. Provide pre-configured "Rules Files" for popular tools. Based on the nextjs-best-practices.md file, create ready-to-use instruction files for major platforms:

• .github/copilot-instructions.md for GitHub Copilot in VS Code.
• guidelines.md for JetBrains IDEs.
• Similar files for other popular tools like Cursor, Firebase Studio, etc.

[icyJoseph]

Hi, We are definitely looking into this - I don't have an estimated time for it. Thanks for the input too!