Demo, all content is generated
Question

Copilot keeps suggesting pages router code in my app router project

Open · 641 views · asked by juanpa · edited

Next.js 15 with the app directory. Copilot keeps suggesting getServerSideProps, import { useRouter } from 'next/router' and pages/api/... handlers. Half of my time is deleting suggestions. Is there a way to tell it which Next version I use?

What I’ve tried

Wrote a comment at the top of files like '// Next.js 15 app router', helps a bit in that file only.

Comment
Do you have a .github/copilot-instructions.md? wes_codes · edited

3 answers

wes_codes · edited

Yes, add a repository instructions file. Copilot Chat and agent mode read it on every request:

<!-- .github/copilot-instructions.md -->
- Next.js 15, App Router only. There is no pages/ directory.
- Use `next/navigation` (useRouter, usePathname), never `next/router`.
- Data fetching in server components or server actions, not getServerSideProps.
- Route handlers live in app/api/**/route.ts.

Inline completions (the grey ghost text) use it less, those rely mostly on the open files.

Comment
Chat is much better now. Ghost text still suggests next/router sometimes. juanpa · edited
bytebarista · edited

For the ghost text: it builds its context from the current file and your other open tabs. If you have an old tutorial or an old file open, it copies that style. Keep a couple of good App Router files open next to what you're writing and close the rest. Sounds silly, it works noticeably.

Comment
True, the neighboring tabs thing is underrated. wes_codes · edited
rafa_dev · edited

In Copilot Chat you can pull the current docs into the conversation with #fetch <url of the app router docs page>. For bigger generations that beats whatever the model remembers from its training data.

Comment