Next.js Project copilot-instructions.md Template

Description

## copilot-instructions.md for Next.js Projects

This is a Next.js 15 application using App Router. Follow these instructions:

### Architecture
- App Router with file-based routing in `/app` directory
- Server Components by default; add `'use client'` only for interactivity
- Use Route Groups `(group)` for layout organization without URL impact
- Loading states via `loading.tsx`, errors via `error.tsx` in each route
- Parallel routes `@slot` for complex dashboard layouts

### Data Fetching
- Server Components fetch data directly with `async` component functions
- Use `fetch()` with Next.js caching: `{ next: { revalidate: 3600 } }`
- Server Actions for mutations: `'use server'` in action files
- Client components use SWR or React Query for dynamic data
- Never fetch in `useEffect` if it can be done server-side

### Server Actions
- Define in separate files: `app/actions/resource.ts` with `'use server'`
- Validate input with Zod before processing
- Return typed responses: `{ success: boolean, data?, error? }`
- Use `revalidatePath()` or `revalidateTag()` after mutations
- Handle optimistic updates with `useOptimistic` hook

### Routing
- Dynamic routes: `[slug]` for single, `[...slug]` for catch-all
- Use `generateStaticParams` for static generation of dynamic routes
- `redirect()` for server-side redirects, `useRouter()` for client-side
- Middleware in `middleware.ts` for auth guards and redirects

### Metadata & SEO
- Export `metadata` object or `generateMetadata` function from pages
- Include `title`, `description`, `openGraph`, `twitter` in metadata
- Use `next/image` with `width`, `height`, and descriptive `alt`
- Generate `sitemap.xml` and `robots.txt` via route handlers

### Styling
- Tailwind CSS 4 with `@import 'tailwindcss'` in global CSS
- CSS variables for theme values in `:root` and `.dark`
- Use `next/font` for optimized font loading with `variable` prop

### Performance
- Use `Suspense` boundaries around data-fetching components
- Implement streaming with `loading.tsx` for instant page transitions
- Lazy load heavy client components with `next/dynamic`
- Image optimization via `next/image` with responsive `sizes` prop
- Minimize client-side JavaScript bundle with Server Components

Free to copy and use. Compatible with GitHub Copilot, GPT-5.

Usage Instructions

Tags

Compatible AI Models

Version History

Related Prompts