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

Напиши функциональный React-компонент на TypeScript для карточки товара. Компонент должен принимать пропсы: id (string), title (string), price (number), imageUrl (string), isAvailable (boolean). Используй React.FC. Добавь обработчик клика, который выводит в консоль id товара. Стили — CSS-in-JS через объект styles.

interface ProductCardProps {
  id: string;
  title: string;
  price: number;
  imageUrl: string;
  isAvailable: boolean;
}

const ProductCard: React.FC<ProductCardProps> = ({ id, title, price, imageUrl, isAvailable }) => {
  const handleClick = () => {
    console.log('Clicked product ID:', id);
  };

  return (
    <div style={styles.card} onClick={handleClick}>
      <img src={imageUrl} alt={title} style={styles.image} />
      <h3 style={styles.title}>{title}</h3>
      <p style={styles.price}>${price}</p>
      <p style={{ color: isAvailable ? 'green' : 'red' }}>
        {isAvailable ? 'In stock' : 'Out of stock'}
      </p>
    </div>
  );
};

const styles = {
  card: { border: '1px solid #ddd', padding: '16px', borderRadius: '8px', cursor: 'pointer' },
  image: { width: '100%', height: '200px', objectFit: 'cover' },
  title: { fontSize: '18px', fontWeight: 'bold' },
  price: { fontSize: '16px', color: '#333' },
};

export default ProductCard;

Создай страницу Next.js 15 (App Router) для блога. Используй серверный компонент. Страница должна получать список постов через fetch с API https://jsonplaceholder.typicode.com/posts (ограничь до 10). Отобрази заголовки постов в виде списка ссылок на страницу /posts/[id]. Добавь метаданные через generateMetadata.

// app/posts/page.tsx
export async function generateMetadata() {
  return {
    title: 'Blog Posts',
    description: 'List of latest blog posts',
  };
}

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

async function getPosts(): Promise<Post[]> {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/posts/${post.id}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Напиши кастомный хук useFetch для React. Он должен принимать URL (string) и возвращать объект с полями: data (any

| null), loading (boolean), error (string | null). Используй useEffect и useState. Добавь возможность повторного запроса через функцию refetch.

import { useState, useEffect } from 'react';

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

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('Network error');
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [url]);

  return { data, loading, error, refetch: fetchData };
}

export default useFetch;

Создай React-компонент формы регистрации с полями: email (email), password (password, минимум 8 символов), confirmPassword. Используй хук useState для управления состоянием. Добавь валидацию: email должен содержать @, пароли должны совпадать. При успешной отправке выведи alert с сообщением. Стили через CSS модули.

import { useState } from 'react';
import styles from './RegisterForm.module.css';

const RegisterForm = () => {
  const [form, setForm] = useState({ email: '', password: '', confirmPassword: '' });
  const [errors, setErrors] = useState<{ email?: string; password?: string; confirmPassword?: string }>({});

  const validate = () => {
    const newErrors: typeof errors = {};
    if (!form.email.includes('@')) newErrors.email = 'Invalid email';
    if (form.password.length < 8) newErrors.password = 'Password must be at least 8 characters';
    if (form.password !== form.confirmPassword) newErrors.confirmPassword = 'Passwords do not match';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validate()) alert('Registration successful!');
  };

  return (
    <form className={styles.form} onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Email"
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
      />
      {errors.email && <span className={styles.error}>{errors.email}</span>}
      <input
        type="password"
        placeholder="Password"
        value={form.password}
        onChange={(e) => setForm({ ...form, password: e.target.value })}
      />
      {errors.password && <span className={styles.error}>{errors.password}</span>}
      <input
        type="password"
        placeholder="Confirm Password"
        value={form.confirmPassword}
        onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
      />
      {errors.confirmPassword && <span className={styles.error}>{errors.confirmPassword}</span>}
      <button type="submit">Register</button>
    </form>
  );
};

export default RegisterForm;

Создай структуру маршрутов для Next.js App Router: главная страница (/), страница продуктов (/products), страница отдельного продукта (/products/[id]), страница корзины (/cart). Для страницы продуктов создай layout с навигацией. Используй файловую систему Next.js 15.

// app/layout.tsx — корневой layout
// app/page.tsx — главная
// app/products/layout.tsx — layout для продуктов с навигацией
// app/products/page.tsx — список продуктов
// app/products/[id]/page.tsx — детальная страница продукта
// app/cart/page.tsx — корзина

// app/products/layout.tsx
import Link from 'next/link';

export default function ProductsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>
        <Link href="/products">All Products</Link>
        <Link href="/cart">Cart</Link>
      </nav>
      {children}
    </div>
  );
}

Напиши middleware для Next.js 15, который проверяет наличие JWT токена в cookies. Если токен отсутствует и пользователь пытается зайти на /dashboard или /profile, перенаправляй на /login. Для публичных страниц (/, /about) middleware не применяется.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('jwt')?.value;
  const protectedPaths = ['/dashboard', '/profile'];
  const isProtected = protectedPaths.some((path) => request.nextUrl.pathname.startsWith(path));

  if (isProtected && !token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Создай контекст темы (ThemeContext) для React. Контекст должен хранить текущую тему ('light' или 'dark') и функцию toggleTheme. Напиши провайдер ThemeProvider, который оборачивает дочерние компоненты. Используй useState для управления состоянием. Типизируй через TypeScript.

import React, { createContext, useContext, useState, ReactNode } from 'react';

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
};

Создай React-компонент модального окна с анимацией появления и закрытия. Используй framer-motion. Модальное окно должно появляться с эффектом fade-in и scale. При закрытии — fade-out. Принимай пропсы: isOpen (boolean), onClose (function), children (ReactNode).

import { motion, AnimatePresence } from 'framer-motion';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}
          transition={{ duration: 0.3 }}
          style={{
            position: 'fixed',
            top: 0, left: 0, right: 0, bottom: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: 'rgba(0,0,0,0.5)',
          }}
          onClick={onClose}
        >
          <motion.div
            onClick={(e) => e.stopPropagation()}
            style={{ background: 'white', padding: '24px', borderRadius: '8px' }}
          >
            {children}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default Modal;

Создай React-компонент InfiniteScrollList, который загружает данные из API (https://jsonplaceholder.typicode.com/posts) по 5 элементов за раз. Используй IntersectionObserver для отслеживания достижения конца списка. Показывай индикатор загрузки. Типизируй на TypeScript.

import { useState, useEffect, useRef, useCallback } from 'react';

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

const InfiniteScrollList = () => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const observerRef = useRef<HTMLDivElement | null>(null);

  const fetchPosts = useCallback(async () => {
    setLoading(true);
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=5`);
    const data = await res.json();
    setPosts((prev) => [...prev, ...data]);
    setLoading(false);
  }, [page]);

  useEffect(() => {
    fetchPosts();
  }, [fetchPosts]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !loading) {
          setPage((prev) => prev + 1);
        }
      },
      { threshold: 1.0 }
    );

    if (observerRef.current) observer.observe(observerRef.current);
    return () => observer.disconnect();
  }, [loading]);

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id} style={{ padding: '10px', borderBottom: '1px solid #ccc' }}>
          {post.title}
        </div>
      ))}
      <div ref={observerRef} style={{ height: '20px' }}>
        {loading && <p>Loading...</p>}
      </div>
    </div>
  );
};

export default InfiniteScrollList;

Напиши тесты для React-компонента Button (пропсы: label, onClick, disabled). Используй Jest и React Testing Library. Проверь: рендеринг с label, вызов onClick при клике, отключение кнопки при disabled={true}.

import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component', () => {
  test('renders with label', () => {
    render(<Button label="Click me" onClick={() => {}} />);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  test('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button label="Click" onClick={handleClick} />);
    fireEvent.click(screen.getByText('Click'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  test('is disabled when disabled prop is true', () => {
    render(<Button label="Disabled" onClick={() => {}} disabled />);
    expect(screen.getByText('Disabled')).toBeDisabled();
  });
});