GPT

Page Components

// app/users/page.tsx import { getUsers, createUser, deleteUser } from '@/app/actions/users'; export default async function UsersPage() { const { users, error } = await getUsers(); if (error) { return {error} ; }

Prompt text

Original English text. Replace placeholders with your own details.

// app/users/page.tsx
import { getUsers, createUser, deleteUser } from '@/app/actions/users';

export default async function UsersPage() {
 const { users, error } = await getUsers();

 if (error) {
 return <div className="error">{error}</div>;
 }

 return (
 <div>
 <h1>Users</h1>

 <form action={createUser}>
 <input
 name="name"
 placeholder="Name"
 required
 />
 <input
 name="email"
 type="email"
 placeholder="Email"
 required
 />
 <button type="submit">Add User</button>
 </form>

 {users?.length ? (
 <ul>
 {users.map((user) => (
 <li key={user.id}>
 {user.name} ({user.email})
 <form action={deleteUser.bind(null, user.id)}>
 <button type="submit">Delete</button>
 </form>
 </li>
 ))}
 </ul>
 ) : (
 <p>No users found.</p>
 )}
 </div>
 );
}

// app/users/[id]/page.tsx
import { getUser, updateUser } from '@/app/actions/users';
import { notFound } from 'next/navigation';

interface Props {
 params: { id: string };
}

export default async function UserPage({ params }: Props) {
 const id = parseInt(params.id);
 const { user, error } = await getUser(id);

 if (error) {
 if (error === 'User not found') {
 notFound();
 }
 return <div className="error">{error}</div>;
 }

 return (
 <div>
 <h1>Edit User</h1>

 <form action={updateUser.bind(null, id)}>
 <input
 name="name"
 defaultValue={user.name}
 placeholder="Name"
 required
 />
 <input
 name="email"
 type="email"
 defaultValue={user.email}
 placeholder="Email"
 required
 />
 <button type="submit">Update User</button>
 </form>
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →