15 Prompts for Creating React/Next.js Applications

Create a React functional component named "UserCard". It should accept props: name (string), email (string), and avatarUrl (string, optional). Use TypeScript. The component should display a card with an image on the left and text on the right. Add proper styling with a CSS module.

import styles from './UserCard.module.css';

interface UserCardProps {
  name: string;
  email: string;
  avatarUrl?: string;
}

export default function UserCard({ name, email, avatarUrl }: UserCardProps) {
  return (
    <div className={styles.card}>
      <img src={avatarUrl || '/default-avatar.png'} alt={name} className={styles.avatar} />
      <div className={styles.info}>
        <h3>{name}</h3>
        <p>{email}</p>
      </div>
    </div>
  );
}

Generate a Next.js App Router page at /products/[id]. The page should fetch product data from a mock API using fetch. Handle loading state with a simple "Loading..." text. If the product is not found, display a 404 message. Use TypeScript.

// app/products/[id]/page.tsx
import { notFound } from 'next/navigation';

interface Product {
  id: number;
  name: string;
  price: number;
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const res = await fetch(`https://fakestoreapi.com/products/${params.id}`);
  if (!res.ok) notFound();
  const product: Product = await res.json();

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
    </div>
  );
}

Write a custom React hook called "useForm" that manages form state. It should accept an initial values object and a validation function. Return values, errors, handleChange, and handleSubmit. The validation function should return an object with error messages. Use TypeScript generics.

import { useState, ChangeEvent, FormEvent } from 'react';

type ValidationErrors<T> = Partial<Record<keyof T, string>>;
type ValidationFn<T> = (values: T) => ValidationErrors<T>;

export function useForm<T extends Record<string, any>>(
  initialValues: T,
  validate: ValidationFn<T>
) {
  const [values, setValues] = useState<T>(initialValues);
  const [errors, setErrors] = useState<ValidationErrors<T>>({});

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (callback: () => void) => (e: FormEvent) => {
    e.preventDefault();
    const validationErrors = validate(values);
    if (Object.keys(validationErrors).length === 0) {
      callback();
    } else {
      setErrors(validationErrors);
    }
  };

  return { values, errors, handleChange, handleSubmit };
}

Create a Next.js page using the Pages Router that uses getServerSideProps to fetch a list of blog posts from an API. Render the posts as a list. Add an error message if the fetch fails. Use TypeScript.

// pages/blog.tsx
import { GetServerSideProps } from 'next';

interface Post {
  id: number;
  title: string;
}

interface Props {
  posts: Post[];
  error?: string;
}

export default function Blog({ posts, error }: Props) {
  if (error) return <p>Error: {error}</p>;
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts: Post[] = await res.json();
    return { props: { posts } };
  } catch {
    return { props: { posts: [], error: 'Failed to fetch posts' } };
  }
};

Create a React button component that accepts variant prop: "primary", "secondary", or "danger". Use CSS-in-JS with styled-components. The button should have hover and focus states. Export as default.

import styled, { css } from 'styled-components';

interface ButtonProps {
variant?: 'primary'

| 'secondary' | 'danger';
}

const variants = {
  primary: css`background: blue; color: white;`,
  secondary: css`background: gray; color: black;`,
  danger: css`background: red; color: white;`,
};

export const Button = styled.button<ButtonProps>`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  ${({ variant = 'primary' }) => variants[variant]}

  &:hover {
    opacity: 0.8;
  }
  &:focus {
    outline: 2px solid black;
  }
`;

Write a Next.js API route at /api/user that returns the current user's data. It should check for a valid JWT token in the Authorization header. If the token is invalid, return 401. If valid, return user info. Use the jsonwebtoken library. TypeScript.

// pages/api/user.ts (or app/api/user/route.ts for App Router)
import { NextApiRequest, NextApiResponse } from 'next';
import jwt from 'jsonwebtoken';

const SECRET = process.env.JWT_SECRET || 'your-secret';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  const token = authHeader.split(' ')[1];
  try {
    const decoded = jwt.verify(token, SECRET);
    res.status(200).json({ user: decoded });
  } catch {
    res.status(401).json({ message: 'Invalid token' });
  }
}

Create a React search input component that debounces the onChange event by 300ms. It should accept an onSearch callback that receives the debounced query. Use TypeScript and a custom useDebounce hook.

Write a React component called "ProductGrid" that renders a responsive CSS Grid with 1 column on mobile, 2 on tablet, and 4 on desktop. Pass children as props. Use CSS modules.

Build a modal component in React that uses createPortal to render into a div with id "modal-root". It should have an overlay, close on Escape key, and accept children and onClose prop. TypeScript.

Create a custom hook "useInfiniteScroll" that triggers a callback when a sentinel element becomes visible. Use IntersectionObserver. Return a ref to attach to the sentinel. TypeScript.

Write Next.js middleware that redirects users from /old-blog to /blog using a 308 redirect. Also block access to /admin for non-authenticated users by checking a cookie. TypeScript.

Create a tabbed interface component in React. It should accept an array of tabs (label, content) and highlight the active tab. Manage state internally. Use CSS modules for styling.

Generate a React data table component that accepts columns (key, label) and rows (array of objects). Implement click-to-sort on column headers. Use useState for sort state. TypeScript.

Write a React component that toggles dark mode using CSS custom properties. Store the preference in localStorage. Use a useEffect to apply the class to the body element.

Create a React error boundary component using class component syntax. It should catch errors in its children, display a fallback UI, and log the error to console. TypeScript.