Introduction
Building modern frontend applications with React and Next.js has become significantly more efficient thanks to prompt engineering. In 2026, developers no longer write every line of boilerplate by hand — instead, they craft precise prompts that generate production-ready components, pages, and even full routing structures. This article presents a curated collection of ten expert-level prompts, organized by complexity, that I use daily to accelerate development while maintaining code quality. Each prompt is accompanied by a real-world example and practical tips.
Whether you are a senior engineer looking to optimize your workflow or a team lead evaluating AI-assisted development, these prompts will help you generate clean, type-safe, and performant code. I have tested all prompts with Claude 3.5 Sonnet and GPT-4o, and they work reliably as of July 2026.
Basic Prompts
1. Generate a Functional Component with Props Interface
Task: Create a reusable React component with typed props, default values, and a clear prop interface.
Prompt:
Generate a TypeScript React functional component named UserCard that accepts props: name (string, required), email (string, required), avatarUrl (string, optional), role (enum: 'admin'
| 'user' | 'editor', default 'user'). Include a default export, proper prop types interface, and use Tailwind CSS classes for styling. Add a loading skeleton variant when a 'loading' prop is true.
Example Result:
import React from 'react';
interface UserCardProps {
name: string;
email: string;
avatarUrl?: string;
role: 'admin'
| 'user' | 'editor';
loading?: boolean;
}
const UserCard: React.FC<UserCardProps> = ({
name,
email,
avatarUrl,
role = 'user',
loading = false,
}) => {
if (loading) {
return (
<div className="animate-pulse p-4 border rounded-lg shadow-sm">
<div className="h-12 w-12 bg-gray-300 rounded-full mb-2"></div>
<div className="h-4 bg-gray-300 rounded w-3/4 mb-1"></div>
<div className="h-3 bg-gray-300 rounded w-1/2"></div>
</div>
);
}
return (
<div className="flex items-center gap-4 p-4 border rounded-lg shadow-sm">
<img
src={avatarUrl || '/default-avatar.png'}
alt={name}
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<h3 className="font-semibold">{name}</h3>
<p className="text-sm text-gray-500">{email}</p>
<span className={`inline-block mt-1 text-xs px-2 py-0.5 rounded-full ${
role === 'admin' ? 'bg-purple-100 text-purple-700' :
role === 'editor' ? 'bg-blue-100 text-blue-700' :
'bg-gray-100 text-gray-700'
}`}>
{role}
</span>
</div>
</div>
);
};
export default UserCard;
2. Create a Custom Hook with State and Side Effects
Task: Build a reusable custom hook that encapsulates state logic and API calls.
Prompt:
Create a TypeScript custom hook named useDebounce that takes a value and delay (number, default 300ms). Return a debounced value. Include proper cleanup in useEffect to prevent memory leaks. Add JSDoc comments explaining the hook.
Example Result:
import { useState, useEffect } from 'react';
/**
* Returns a debounced version of the provided value.
* The debounced value updates only after the specified delay has passed
* since the last change of the input value.
*
* @param value - The value to debounce.
* @param delay - Delay in milliseconds (default 300).
* @returns The debounced value.
*/
export function useDebounce<T>(value: T, delay: number = 300): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(timer);
};
}, [value, delay]);
return debouncedValue;
}
3. Build a Simple Form with Validation
Task: Generate a form component with controlled inputs, validation, and submission handling.
Prompt:
Generate a React component called LoginForm with fields: email (required, email format) and password (required, min 6 chars). Use useState for form state, include inline validation error messages, and a submit handler that prevents default and logs form data. Style with Tailwind CSS. Export as default.
Example Result:
import React, { useState } from 'react';
interface FormData {
email: string;
password: string;
}
interface Errors {
email?: string;
password?: string;
}
const LoginForm: React.FC = () => {
const [formData, setFormData] = useState<FormData>({ email: '', password: '' });
const [errors, setErrors] = useState<Errors>({});
const validate = (): boolean => {
const newErrors: Errors = {};
if (!formData.email) {
newErrors.email = 'Email is required';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = 'Invalid email format';
}
if (!formData.password) {
newErrors.password = 'Password is required';
} else if (formData.password.length < 6) {
newErrors.password = 'Password must be at least 6 characters';
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validate()) {
console.log('Form submitted:', formData);
}
};
return (
<form onSubmit={handleSubmit} className="max-w-md mx-auto p-6 border rounded-lg shadow">
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium mb-1">Email</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
className={`w-full px-3 py-2 border rounded ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
/>
{errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
</div>
<div className="mb-4">
<label htmlFor="password" className="block text-sm font-medium mb-1">Password</label>
<input
type="password"
id="password"
name="password"
value={formData.password}
onChange={handleChange}
className={`w-full px-3 py-2 border rounded ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
/>
{errors.password && <p className="text-red-500 text-xs mt-1">{errors.password}</p>}
</div>
<button
type="submit"
className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition"
>
Log In
</button>
</form>
);
};
export default LoginForm;
Advanced Prompts
4. Generate a Next.js API Route with Database Query
Task: Create a serverless API route in Next.js App Router with error handling and database access.
Prompt:
Generate a Next.js 14+ API route at /api/users/[id] using the App Router. It should handle GET and PUT methods. Use Prisma to query a User model with fields: id, name, email, createdAt. Include proper error responses (404 if not found, 400 for invalid input). Add TypeScript types. Use try-catch and return appropriate HTTP status codes.
Example Result:
import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const user = await prisma.user.findUnique({
where: { id: params.id },
});
if (!user) {
return NextResponse.json({ error: 'User not found' }, { status: 404 });
}
return NextResponse.json(user);
} catch (error) {
console.error('Error fetching user:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
export async function PUT(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const body = await request.json();
const { name, email } = body;
if (!name || !email) {
return NextResponse.json({ error: 'Name and email are required' }, { status: 400 });
}
const user = await prisma.user.update({
where: { id: params.id },
data: { name, email },
});
return NextResponse.json(user);
} catch (error) {
console.error('Error updating user:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
5. Create a Dynamic Route Page with Server-Side Data Fetching
Task: Build a Next.js page that uses server components and fetches data based on route parameters.
Prompt:
Generate a Next.js App Router page at /blog/[slug] that is a server component. Use generateMetadata to set dynamic title and description based on the post. Fetch the post from a mock API (or Prisma) with error handling. If the post is not found, call notFound(). Use Tailwind for styling and include a back link to /blog.
Example Result:
import { notFound } from 'next/navigation';
import Link from 'next/link';
import { Metadata } from 'next';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
interface Props {
params: { slug: string };
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await prisma.post.findUnique({
where: { slug: params.slug },
select: { title: true, excerpt: true },
});
if (!post) {
return { title: 'Post Not Found' };
}
return {
title: post.title,
description: post.excerpt,
};
}
async function getPost(slug: string) {
const post = await prisma.post.findUnique({
where: { slug },
include: { author: true },
});
return post;
}
export default async function BlogPostPage({ params }: Props) {
const post = await getPost(params.slug);
if (!post) {
notFound();
}
return (
<article className="max-w-3xl mx-auto px-4 py-8">
<Link href="/blog" className="text-blue-600 hover:underline mb-4 block">
← Back to Blog
</Link>
<h1 className="text-4xl font-bold mb-4">{post.title}</h1>
<p className="text-gray-500 mb-8">
By {post.author.name} on {new Date(post.createdAt).toLocaleDateString()}
</p>
<div className="prose max-w-none">
{post.content}
</div>
</article>
);
}
6. Generate a Context Provider with Custom Hook
Task: Create a React context with a provider and a custom hook for consuming it, including TypeScript generics.
Prompt:
Generate a React context called ThemeContext that stores a theme ('light' | 'dark') and a toggle function. Create a ThemeProvider component that wraps children and provides the context. Create a useTheme custom hook that throws an error if used outside the provider. Export all three as named exports.
Example Result:
'use client';
import React, { createContext, useContext, useState, ReactNode } from 'react';
type Theme = 'light' | 'dark';
interface ThemeContextValue {
theme: Theme;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
interface ThemeProviderProps {
children: ReactNode;
}
export function ThemeProvider({ children }: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>('light');
const toggleTheme = () => {
setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme(): ThemeContextValue {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
}
7. Create a Search Component with Debounce and API Calls
Task: Build a search input that debounces user input and fetches results from an API, displaying a loading state.
Prompt:
Generate a React component called SearchBar that uses the useDebounce hook. It should fetch results from /api/search?q={query} using fetch. Show a loading spinner while fetching, display results as a dropdown list, and handle empty state. Use TypeScript and Tailwind.
Example Result:
'use client';
import React, { useState, useEffect, useRef } from 'react';
import { useDebounce } from '@/hooks/useDebounce';
interface SearchResult {
id: string;
title: string;
}
const SearchBar: React.FC = () => {
const [query, setQuery] = useState('');
const [results, setResults] = useState<SearchResult[]>([]);
const [loading, setLoading] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const debouncedQuery = useDebounce(query, 300);
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!debouncedQuery.trim()) {
setResults([]);
setIsOpen(false);
return;
}
const fetchResults = async () => {
setLoading(true);
try {
const res = await fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`);
if (res.ok) {
const data = await res.json();
setResults(data);
setIsOpen(true);
}
} catch (error) {
console.error('Search error:', error);
} finally {
setLoading(false);
}
};
fetchResults();
}, [debouncedQuery]);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
return (
<div ref={dropdownRef} className="relative w-full max-w-md">
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
{loading && (
<div className="absolute right-3 top-3">
<div className="animate-spin h-5 w-5 border-2 border-blue-500 border-t-transparent rounded-full"></div>
</div>
)}
{isOpen && (
<div className="absolute top-full mt-1 w-full bg-white border rounded-lg shadow-lg z-10">
{results.length > 0 ? (
results.map((result) => (
<div
key={result.id}
className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
onClick={() => {
setQuery(result.title);
setIsOpen(false);
}}
>
{result.title}
</div>
))
) : (
<div className="px-4 py-2 text-gray-500">No results found</div>
)}
</div>
)}
</div>
);
};
export default SearchBar;
Expert Prompts
8. Generate a Full CRUD Module with Optimistic Updates
Task: Create a complete CRUD module (list, create, update, delete) with optimistic UI updates using React Query.
Prompt:
Generate a React component called TodoList that uses @tanstack/react-query for data fetching and mutations. Implement optimistic updates for adding and deleting todos. Include a form to add new todos, a checkbox to toggle completion, and a delete button. Use TypeScript and Tailwind. The todos have fields: id, title, completed.
Example Result:
'use client';
import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
interface Todo {
id: string;
title: string;
completed: boolean;
}
async function fetchTodos(): Promise<Todo[]> {
const res = await fetch('/api/todos');
if (!res.ok) throw new Error('Failed to fetch');
return res.json();
}
const TodoList: React.FC = () => {
const queryClient = useQueryClient();
const [newTitle, setNewTitle] = useState('');
const { data: todos, isLoading } = useQuery<Todo[]>({
queryKey: ['todos'],
queryFn: fetchTodos,
});
const addMutation = useMutation({
mutationFn: (title: string) =>
fetch('/api/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title }),
}),
onMutate: async (title) => {
await queryClient.cancelQueries({ queryKey: ['todos'] });
const previousTodos = queryClient.getQueryData<Todo[]>(['todos']);
const optimisticTodo: Todo = {
id: `optimistic-${Date.now()}`,
title,
completed: false,
};
queryClient.setQueryData<Todo[]>(['todos'], (old) => [
...(old || []),
optimisticTodo,
]);
return { previousTodos };
},
onError: (err, title, context) => {
queryClient.setQueryData(['todos'], context?.previousTodos);
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] });
},
});
const deleteMutation = useMutation({
mutationFn: (id: string) =>
fetch(`/api/todos/${id}`, { method: 'DELETE' }),
onMutate: async (id) => {
await queryClient.cancelQueries({ queryKey: ['todos'] });
const previousTodos = queryClient.getQueryData<Todo[]>(['todos']);
queryClient.setQueryData<Todo[]>(['todos'], (old) =>
(old || []).filter((todo) => todo.id !== id)
);
return { previousTodos };
},
onError: (err, id, context) => {
queryClient.setQueryData(['todos'], context?.previousTodos);
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] });
},
});
const handleAdd = (e: React.FormEvent) => {
e.preventDefault();
if (!newTitle.trim()) return;
addMutation.mutate(newTitle);
setNewTitle('');
};
if (isLoading) return <div>Loading...</div>;
return (
<div className="max-w-md mx-auto p-4">
<form onSubmit={handleAdd} className="flex gap-2 mb-4">
<input
type="text"
value={newTitle}
onChange={(e) => setNewTitle(e.target.value)}
className="flex-1 px-3 py-2 border rounded"
placeholder="Add a todo"
/>
<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">
Add
</button>
</form>
<ul className="space-y-2">
{todos?.map((todo) => (
<li key={todo.id} className="flex items-center justify-between p-2 border rounded">
<span className={todo.completed ? 'line-through text-gray-400' : ''}>
{todo.title}
</span>
<button
onClick={() => deleteMutation.mutate(todo.id)}
className="text-red-500 hover:text-red-700"
>
Delete
</button>
</li>
))}
</ul>
</div>
);
};
export default TodoList;
9. Create a Multi-Step Form (Wizard) with State Persistence
Task: Build a multi-step form that saves state across steps and supports navigation back/forward.
Prompt:
Generate a React component called RegistrationWizard with 3 steps: PersonalInfo (name, email), Address (street, city, zip), and Review (summary). Use a single state object. Include step indicators, back/next buttons, and validation per step. Persist state in localStorage. Use TypeScript and Tailwind.
Example Result:
'use client';
import React, { useState, useEffect } from 'react';
interface FormData {
name: string;
email: string;
street: string;
city: string;
zip: string;
}
const initialData: FormData = {
name: '',
email: '',
street: '',
city: '',
zip: '',
};
const steps = ['Personal Info', 'Address', 'Review'];
const RegistrationWizard: React.FC = () => {
const [step, setStep] = useState(0);
const [formData, setFormData] = useState<FormData>(() => {
if (typeof window !== 'undefined') {
const saved = localStorage.getItem('wizardData');
return saved ? JSON.parse(saved) : initialData;
}
return initialData;
});
useEffect(() => {
localStorage.setItem('wizardData', JSON.stringify(formData));
}, [formData]);
const updateField = (field: keyof FormData, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const validateStep = (): boolean => {
if (step === 0) {
return formData.name.trim() !== '' && formData.email.trim() !== '';
}
if (step === 1) {
return formData.street.trim() !== '' && formData.city.trim() !== '' && formData.zip.trim() !== '';
}
return true;
};
const nextStep = () => {
if (validateStep() && step < steps.length - 1) {
setStep((prev) => prev + 1);
}
};
const prevStep = () => {
if (step > 0) setStep((prev) => prev - 1);
};
const handleSubmit = () => {
console.log('Final data:', formData);
localStorage.removeItem('wizardData');
setFormData(initialData);
setStep(0);
};
return (
<div className="max-w-lg mx-auto p-6 border rounded-lg shadow">
<div className="flex justify-between mb-6">
{steps.map((s, i) => (
<div
key={i}
className={`flex-1 text-center py-2 ${
i <= step ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600'
} ${i > 0 ? 'ml-2' : ''} rounded`}
>
{s}
</div>
))}
</div>
{step === 0 && (
<div>
<h2 className="text-xl font-semibold mb-4">Step 1: Personal Info</h2>
<input
type="text"
placeholder="Name"
value={formData.name}
onChange={(e) => updateField('name', e.target.value)}
className="w-full px-3 py-2 border rounded mb-3"
/>
<input
type="email"
placeholder="Email"
value={formData.email}
onChange={(e) => updateField('email', e.target.value)}
className="w-full px-3 py-2 border rounded mb-3"
/>
</div>
)}
{step === 1 && (
<div>
<h2 className="text-xl font-semibold mb-4">Step 2: Address</h2>
<input
type="text"
placeholder="Street"
value={formData.street}
onChange={(e) => updateField('street', e.target.value)}
className="w-full px-3 py-2 border rounded mb-3"
/>
<input
type="text"
placeholder="City"
value={formData.city}
onChange={(e) => updateField('city', e.target.value)}
className="w-full px-3 py-2 border rounded mb-3"
/>
<input
type="text"
placeholder="ZIP Code"
value={formData.zip}
onChange={(e) => updateField('zip', e.target.value)}
className="w-full px-3 py-2 border rounded mb-3"
/>
</div>
)}
{step === 2 && (
<div>
<h2 className="text-xl font-semibold mb-4">Step 3: Review</h2>
<p><strong>Name:</strong> {formData.name}</p>
<p><strong>Email:</strong> {formData.email}</p>
<p><strong>Street:</strong> {formData.street}</p>
<p><strong>City:</strong> {formData.city}</p>
<p><strong>ZIP:</strong> {formData.zip}</p>
</div>
)}
<div className="flex justify-between mt-6">
<button
onClick={prevStep}
disabled={step === 0}
className="px-4 py-2 bg-gray-300 rounded disabled:opacity-50"
>
Back
</button>
{step < steps.length - 1 ? (
<button onClick={nextStep} className="px-4 py-2 bg-blue-600 text-white rounded">
Next
</button>
) : (
<button onClick={handleSubmit} className="px-4 py-2 bg-green-600 text-white rounded">
Submit
</button>
)}
</div>
</div>
);
};
export default RegistrationWizard;
10. Generate a Server Component with Streaming and Suspense
Task: Create a Next.js page that uses streaming server rendering with Suspense boundaries.
Prompt:
Generate a Next.js App Router page at /dashboard that uses streaming. Create a slow async component called SalesChart that simulates a 3-second data fetch and renders a chart placeholder. Wrap it in Suspense with a skeleton fallback. Include a fast server component for user info. Use generateMetadata for SEO.
Example Result:
import { Suspense } from 'react';
import { Metadata } from 'next';
// app/dashboard/page.tsx
export const metadata: Metadata = {
title: 'Dashboard',
description: 'Your personal dashboard with real-time data',
};
async function UserInfo() {
const res = await fetch('https://api.example.com/user', { cache: 'no-store' });
const user = await res.json();
return (
<div className="p-4 bg-white rounded-lg shadow">
<h2 className="text-xl font-semibold">Welcome, {user.name}</h2>
<p className="text-gray-500">{user.email}</p>
</div>
);
}
async function SalesChart() {
// Simulate slow data fetch
await new Promise((resolve) => setTimeout(resolve, 3000));
const res = await fetch('https://api.example.com/sales', { cache: 'no-store' });
const data = await res.json();
return (
<div className="p-4 bg-white rounded-lg shadow mt-4">
<h3 className="text-lg font-medium">Sales Overview</h3>
<div className="h-64 bg-gray-100 rounded flex items-center justify-center">
{/* Chart component would go here */}
<p>Sales data loaded</p>
</div>
</div>
);
}
function ChartSkeleton() {
return (
<div className="p-4 bg-white rounded-lg shadow mt-4 animate-pulse">
<div className="h-6 bg-gray-300 rounded w-1/3 mb-4"></div>
<div className="h-64 bg-gray-200 rounded"></div>
</div>
);
}
export default function DashboardPage() {
return (
<div className="max-w-4xl mx-auto p-6">
<h1 className="text-3xl font-bold mb-6">Dashboard</h1>
<UserInfo />
<Suspense fallback={<ChartSkeleton />}>
<SalesChart />
</Suspense>
</div>
);
}
Conclusion
Mastering prompt engineering for React and Next.js development can dramatically reduce boilerplate and accelerate feature delivery. The ten prompts in this collection cover the most common patterns I encounter in production applications: from basic components and hooks to advanced streaming and optimistic updates.
To get the most out of these prompts, always specify TypeScript, error handling, and styling framework in your instructions. Tailor the prompt to your exact project setup — whether you use Prisma, React Query, or Tailwind. As AI models continue to improve in 2026, the gap between a good prompt and a deployable component narrows every month. Experiment with these templates, modify them to fit your architecture, and watch your productivity grow.
Comments