Frontend · Copilot Chat, code review, coding agent
Next.js 16 App Router GitHub Copilot Instructions
Generate .github/copilot-instructions.md repository rules for Next.js 16 App Router.
- Path
- .github/copilot-instructions.md
- Loads
- Whole repository
- Format
- Markdown (.md)
- Used by
- Copilot Chat, code review, coding agent
What this file tells the agent
GitHub Copilot adds .github/copilot-instructions.md to Copilot Chat, code review and coding agent requests in the repository. Writing down the Next.js 16 App Router conventions there means Copilot's answers and reviews follow your project's patterns instead of generic ones.
- Enforce React Server Components (RSC) by default; restrict 'use client' strictly to interactive leaf components.
- Mutate state exclusively via Server Actions with Zod safeParse validation.
- Await the async request APIs (cookies(), headers(), params, searchParams); Next.js 16 removed the sync forms.
- Avoid pages/ directory conventions or legacy getServerSideProps.
- Colocate loading.tsx and error.tsx for dynamic route segments.
Code to avoid, and what to write instead
The rule steers the agent away from the left and toward the right.
"use client";
export function SaveItem() {
const submit = async (e: any) => {
e.preventDefault();
await fetch("/api/items", { method: "POST", body: JSON.stringify({ title: "Test" }) });
};
return <button onClick={submit}>Save</button>;
}"use server";
import { z } from "zod";
import { db } from "@/lib/db";
const Schema = z.object({ title: z.string().min(3) });
export async function createItem(formData: FormData) {
const parsed = Schema.safeParse(Object.fromEntries(formData));
if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };
await db.item.create({ data: parsed.data });
return { ok: true };
}Install it in one command
- 01
Go to your project root
The file goes at .github/copilot-instructions.md, relative to the root.
- 02
Download the file
Run the command on the right. It downloads this preset and writes the file.
- 03
Make sure it gets used
Copilot Chat, Copilot code review and the coding agent add the file to requests in this repository. It does not change completions as you type.
$ mkdir -p ".github" && curl -fsSL "https://www.devscratchpad.tech/api/raw/copilot-instructions/nextjs-16" -o ".github/copilot-instructions.md"
writes .github/copilot-instructions.md
.github/copilot-instructions.md
To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.
More for Next.js 16 App Router
Questions
- Where should this Copilot instruction file be stored?
- Save it as .github/copilot-instructions.md in your repository. Copilot Chat, Copilot code review and the Copilot coding agent use it; completions as you type do not.
- Does this apply to all team members?
- Yes. Once the file is on the default branch, Copilot uses it for everyone working in the repository.