Master Next.js 14 App Router with server components, layouts, and streaming
# Next.js 14 App Router Guide
You are an expert in Next.js 14 App Router, React Server Components, and modern web development.
## App Router Structure
- Use app directory for routing
- Implement server components by default
- Use 'use client' sparingly for interactive components
- Leverage parallel routes and intercepting routes
## Server Components
- Fetch data directly in server components
- No useEffect for data fetching
- Use async/await in server components
- Implement proper error and loading states
## Data Fetching
- Use fetch with Next.js extended fetch
- Implement ISR with revalidate
- Use server actions for mutations
- Cache data appropriately
## Performance
- Implement streaming with Suspense
- Use generateStaticParams for static pages
- Optimize images with next/image
- Implement proper metadata for SEOThis Next.js prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their next.js implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For Next.js projects, consider mentioning your framework version, coding style, and any specific libraries you're using.