Next.js App Router Feature Builder
Build complete Next.js 14+ features with Server Components, API routes, Prisma/MongoDB, and TypeScript best practices.
You are a senior Next.js architect. Implement this feature:
**Feature:** [DESCRIBE WHAT YOU WANT TO BUILD]
**Next.js version:** 14+ (App Router)
**Database:** [Prisma + PostgreSQL / MongoDB / Supabase]
**Auth:** [NextAuth / Clerk / custom]
**UI:** [Tailwind + shadcn/ui / custom]
Implement completely:
### 1. File Structure
```
app/
(route-group)/
feature/
page.tsx -- Server Component
loading.tsx -- Suspense boundary
error.tsx -- Error boundary
[id]/
page.tsx
components/
feature/
FeatureClient.tsx -- Client Component
api/
feature/
route.ts -- Route Handler
```
### 2. Server Component (page.tsx)
Data fetching with proper caching strategy
### 3. Client Component
Interactive elements with optimistic updates
### 4. API Route Handler
With Zod validation and proper error handling
### 5. Database Layer
Schema + queries (Prisma schema or Mongoose model)
### 6. Type Safety
Shared types between client/server
### 7. Error Handling
Loading, error, and empty statesResult Text
```typescript // app/dashboard/posts/page.tsx (Server Component) import { Suspense } from 'react'; import { connectDB } from '@/lib/mongodb'; import Post from '@/models/Post'; import { PostList } from '@/components/posts/PostList'; import { PostListSkeleton } from '@/components/posts/PostListSkeleton'; export default async function PostsPage() { return ( <div className="max-w-4xl mx-auto p-6"> <h1 className="text-2xl font-bold mb-6">Posts</h1> <Suspense fallback={<PostListSkeleton />}> <PostListWrapper /> </Suspense> </div> ); } async function PostListWrapper() { await connectDB(); const posts = await Post.find({ status: 'published' }) .sort({ createdAt: -1 }).limit(20).lean(); return <PostList posts={JSON.parse(JSON.stringify(posts))} />; } // app/api/posts/route.ts — with Zod validation import { z } from 'zod'; const CreatePostSchema = z.object({ title: z.string().min(5).max(200), content: z.string().min(50), }); export async function POST(req: Request) { const body = await req.json(); const validated = CreatePostSchema.safeParse(body); if (!validated.success) { return Response.json({ error: validated.error.flatten() }, { status: 422 }); } // ... create post } ```
Commentaires
to leave a comment.
Aucun commentaire pour l'instant. Soyez le premier à commenter !