12 промтов для создания React/Next.js приложений: от компонентов до оптимизации

Напиши React-компонент UserCard на TypeScript. Компонент принимает пропсы: name (string), email (string), avatarUrl (string, опционально). Компонент рендерит карточку с аватаром (если передан), именем и email. Используй семантическую вёрстку. Включи export default.

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

const UserCard: React.FC<UserCardProps> = ({ name, email, avatarUrl }) => {
  return (
    <article className="user-card">
      {avatarUrl && <img src={avatarUrl} alt={name} className="avatar" />}
      <h2>{name}</h2>
      <p>{email}</p>
    </article>
  );
};

export default UserCard;

Создай файл страницы Next.js App Router для маршрута /profile/[id]. Компонент страницы должен быть асинхронным, получать параметр id через props.params. Добавь генерацию метаданных через функцию generateMetadata. На странице выведи заголовок "Профиль пользователя {id}".

import { Metadata } from 'next';

type Props = { params: { id: string } };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  return { title: `Профиль пользователя ${params.id}` };
}

export default async function ProfilePage({ params }: Props) {
  return <h1>Профиль пользователя {params.id}</h1>;
}

Напиши React-хук useFetch на TypeScript. Он принимает url (string) и опциональные опции fetch. Возвращает { data, loading, error }. Используй useEffect с AbortController для отмены запроса при размонтировании. Добавь in-memory кеш по ключу url.

const cache = new Map<string, any>();

export function useFetch<T>(url: string, options?: RequestInit) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (cache.has(url)) {
      setData(cache.get(url));
      setLoading(false);
      return;
    }
    const controller = new AbortController();
    fetch(url, { ...options, signal: controller.signal })
      .then(res => res.json())
      .then(result => { cache.set(url, result); setData(result); })
      .catch(err => { if (err.name !== 'AbortError') setError(err); })
      .finally(() => setLoading(false));
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

Создай компонент формы регистрации с использованием React Hook Form. Поля: email (required, email), password (required, minLength 8), confirmPassword (required, must match password). Выводи сообщения об ошибках под каждым полем. При успешной отправке выведи alert с данными формы.

Напиши React-компонент DataTable на TypeScript. Он принимает generic-параметр T extends object, columns (массив объектов с key, label, sortable?) и rows (массив T). Реализуй сортировку при клике на заголовок (по возрастанию/убыванию) и текстовый фильтр сверху. Используй useState для состояния.

Создай серверный компонент PostList в Next.js App Router. Он делает fetch к https://jsonplaceholder.typicode.com/posts и рендерит список ссылок на каждый пост (заголовок, ссылка /posts/[id]). Компонент должен быть экспортирован по умолчанию. Используй Suspense для ленивой загрузки.

Напиши React-компонент HeroSection с пропсами title, description, ctaText, ctaLink. Используй Tailwind CSS для стилизации: центрирование, градиентный фон, анимация при наведении. Код должен быть чистым и адаптивным.

Создай ThemeContext с типом 'light' | 'dark', провайдер ThemeProvider (использует useState и localStorage для сохранения темы), и кастомный хук useTheme, который выбрасывает ошибку, если используется вне провайдера.

Напиши React-компонент Modal с пропсами isOpen, onClose, children. Используй createPortal для рендера в элемент с id='modal-root'. Добавь обработчик клавиши Escape и клик по backdrop для закрытия. Анимацию появления/исчезания можно опустить.

Создай компонент OptimizedImage на Next.js, который принимает src (string), alt (string), width, height и className. Используй next/image, добавь remotePatterns в next.config для внешних доменов (если нужно). Используй placeholder='blur' и blurDataURL.

Напиши тест с Jest и React Testing Library для компонента UserCard. Проверь: рендер имени, email, условие отображения аватара. Используй describe/it. Импортируй @testing-library/react.

Создай SkeletonCard — компонент, который рендерит серые блоки с анимацией пульсации (CSS-анимация). Принимает пропс count (количество карточек). Используй Tailwind CSS animate-pulse.