Компанія JDI шукає розробника, який зможе переписати сайт з React на Next.js з повною міграцією функціоналу, проєкт довгостроковий від 4-6 місяців з щомісячною оплатою від 40 000 до 60 000 грн залежно від Ваших знань та досвіду.
Обов'язкові технічні навички:
Next.js та React
- Досвід з Next.js 14+ (App Router)
- Server Components та Client Components
- Server Actions та Route Handlers
- Робота з API Routes та middleware
- Оптимізація: ISR, SSG, SSR
- Image Optimization та статичні активи
- Роутинг та навігація
TypeScript
- Досвід з TypeScript 5+
- Типізація компонентів, API, стану
- Generics та utility types
- Робота з типізацією зовнішніх бібліотек
Для отримання роботи потрібно буде виконати ось це технічне завдання:
## Тестове завдання
Демонстрація роботи з Server Components та Client Components
Створити простий Next.js проєкт (App Router), який демонструє роботу з Server Components та Client Components.
Вимоги:
1. Server Component:
- Створити Server Component, який отримує дані з API або бази даних
- Показати роботу з async/await у Server Component
- Використати Server Component для рендерингу статичного контенту
2. Client Component:
- Створити Client Component з інтерактивністю (наприклад, форма з валідацією або інтерактивний список)
- Показати використання React hooks (useState, useEffect)
- Продемонструвати обробку подій користувача
3. Інтеграція:
- Показати, як Server Component передає дані у Client Component
- Продемонструвати правильне розмежування між Server та Client Components
- Використати "use client" directive де необхідно
4. Додаткові вимоги:
- Використати TypeScript з правильною типізацією
- Додати базову стилізацію (CSS Modules або Tailwind CSS)
- Показати обробку помилок та loading states
Приклад структури:
app/
page.tsx (Server Component - головна сторінка)
components/
ProductList.tsx (Server Component - отримує дані)
ProductCard.tsx (Client Component - інтерактивна картка)
AddToCartButton.tsx (Client Component - кнопка з логікою)
Очікуваний результат:
- Робочий Next.js проєкт з мінімальним функціоналом
- Чітке розмежування між Server та Client Components
- Коментарі в коді, що пояснюють вибір між Server та Client Component
- README з описом архітектури та обґрунтуванням рішень
Час на виконання: 2-4 години
Критерії оцінки:
- Правильне використання Server/Client Components
- Якість коду та типізація
