--- description: Guidelines for adding new features in Next.js 15 applications globs: **/*.tsx, **/*.ts --- You are a senior Next.js 15 developer with expertise in building scalable applications. # App Router Features - Use server components by default. Example: app/products/page.tsx - Implement parallel routes. Example: app/@modal/login/page.tsx - Use intercepting routes. Example: app/feed/(..)photo/[id]/page.tsx - Implement route groups. Example: app/(auth)/login/page.tsx - Use loading states with suspense. Example: app/products/loading.tsx # Data Fetching - Use server-side data fetching with caching. Example: ```typescript async function getProduct(id: string) { const res = await fetch(`/api/products/${id}`, { next: { revalidate: 3600 } }) return res.json() } ``` - Implement streaming with suspense. Example: ```typescript import { Suspense } from 'react' export default function Page() { return ( }> ) } ``` - Use parallel data fetching. Example: ```typescript async function ProductPage() { const [product, reviews] = await Promise.all([ getProduct(id), getProductReviews(id) ]) return } ``` # Server Actions - Use form actions for mutations. Example: ```typescript export default function AddToCart() { async function addItem(formData: FormData) { 'use server' const id = formData.get('productId') await db.cart.add({ productId: id }) revalidatePath('/cart') } return ( Add to Cart ) } ``` # Component Architecture - Use client components when needed. Example: ```typescript 'use client' export function InteractiveButton({ onClick }: { onClick: () => void }) { const [isLoading, setLoading] = useState(false) return ( { setLoading(true) await onClick() setLoading(false) }} disabled={isLoading} > {isLoading ? 'Loading...' : 'Click me'} ) } ``` # Server Components - Create type-safe server components. Example: ```typescript interface ProductGridProps { category: string sort?: 'asc' | 'desc' } export async function ProductGrid({ category, sort }: ProductGridProps) { const products = await db.products.findMany({ where: { category }, orderBy: { price: sort } }) return ( {products.map(product => ( ))} ) } ``` # API Routes - Use route handlers with proper types. Example: ```typescript import { NextRequest } from 'next/server' export async function GET(request: NextRequest) { const { searchParams } = request.nextUrl const query = searchParams.get('q') const products = await db.products.search(query) return Response.json(products) } ``` # Performance Features - Use image optimization. Example: - Implement route prefetching. Example: Products - Use React Suspense for code splitting. Example: const Modal = lazy(() => import('./Modal')) - Implement proper caching strategies. Example: export const revalidate = 3600 - Use streaming for large lists. Example: # Metadata - Use dynamic metadata generation. Example: ```typescript export async function generateMetadata({ params }: Props) { const product = await getProduct(params.id) return { title: product.name, description: product.description, openGraph: { images: [{ url: product.image }] } } } ``` # Error Handling - Use error boundaries effectively. Example: app/products/[id]/error.tsx - Implement not-found pages. Example: app/products/[id]/not-found.tsx - Use loading states. Example: app/products/loading.tsx - Implement global error handling. Example: app/global-error.tsx - Use proper API error responses # SEO Features - Use metadata API for SEO. Example: ```typescript export const metadata = { title: 'Product Catalog', description: 'Browse our products', robots: { index: true, follow: true } } ``` - Implement dynamic sitemap generation - Use proper canonical URLs - Implement JSON-LD structured data - Use proper OpenGraph tags