Обмежений доступ для гостей

Вам доступно 3 уроки з цього курсу безкоштовно.

  • Коментарі доступні тільки авторизованим користувачам
  • Прогрес зберігається тільки 0:00
🔒
КурсиFrontend розробка / Next.js: Портфоліо розробника

Next.js: Портфоліо розробника

Вигляд:

Вступ до Next.js

1

Що таке Next.js? Переваги над React

Знайомство з фреймворком

2

Встановлення Node.js та налаштування середовища

Підготовка робочого оточення

3

Створення проекту: npx create-next-app@latest

Ініціалізація Next.js проекту

4

Структура Next.js 15 проекту

Огляд файлів та папок

5

Запуск dev-сервера та перший погляд

Запуск та перегляд проекту

App Router та маршрутизація

6

Файлова система маршрутизації

File-based routing

7

page.tsx, layout.tsx, loading.tsx

Спеціальні файли

8

Динамічні маршрути [slug]

Dynamic routes

9

Групи маршрутів (route groups)

Організація маршрутів

10

Паралельні маршрути та інтерсепти

Advanced routing

11

error.tsx та not-found.tsx

Обробка помилок

12

Middleware у Next.js

Проміжна обробка запитів

Server та Client Components

13

Що таке Server Components?

Серверні компоненти

14

Client Components:

Клієнтські компоненти

15

Коли використовувати Server vs Client

Вибір типу компонента

16

Композиція компонентів

Поєднання Server і Client

17

Streaming та Suspense

Потокове завантаження

18

Server Actions: основи

Серверні дії

Стилізація та UI

19

Tailwind CSS у Next.js

Налаштування Tailwind

20

CSS Modules

Модульні стилі

21

Глобальні стилі та шрифти

Global styles

22

next/font оптимізація

Оптимізація шрифтів

23

next/image оптимізація зображень

Image optimization

24

Темна тема (dark mode)

Реалізація dark mode

25

UI компоненти для портфоліо

Базові UI компоненти

Дизайн та структура портфоліо

26

Планування структури сайту

Архітектура портфоліо

27

Створення Header компонента

Шапка сайту

28

Створення Footer компонента

Підвал сайту

29

Hero секція на головній

Головна секція

30

Responsive навігація

Адаптивне меню

Сторінка Про мене

31

About page layout

Структура сторінки

32

Skills секція з іконками

Блок навичок

33

Experience timeline

Хронологія досвіду

34

Education блок

Блок освіти

35

Контактна інформація

Контакти

Галерея проектів

36

Projects page структура

Сторінка проектів

37

Project card компонент

Картка проекту

38

Фільтрація проектів по категоріях

Фільтри

39

Динамічна сторінка проекту [id]

Деталі проекту

40

Галерея зображень проекту

Image gallery

41

Технології та посилання проекту

Tech stack та links

42

Анімації та переходи

Animations

MongoDB та Prisma

43

Встановлення MongoDB Atlas

Cloud MongoDB

44

Налаштування Prisma

Prisma setup

45

Prisma schema для портфоліо

Схема бази даних

46

Моделі: User, Project, Comment

Основні моделі

47

Prisma Client та підключення

Підключення до БД

48

CRUD операції з проектами

Create, Read, Update, Delete

49

Seed скрипт для даних

Заповнення тестових даних

NextAuth.js v5

51

Встановлення та налаштування Auth.js

Setup Auth.js

52

Credentials Provider

Email/password auth

53

Реєстрація користувачів

User registration

54

Хешування паролів (bcrypt)

Password security

55

Сесії та JWT токени

Session management

56

Захищені маршрути

Protected routes

57

Middleware для авторизації

Auth middleware

58

OAuth провайдери (Google, GitHub)

Social login

Профіль користувача

59

Сторінка профілю

Profile page

60

Редагування профілю

Edit profile

61

Аватар користувача

User avatar

62

Зміна пароля

Change password

63

Видалення акаунту

Delete account

64

Role-based access (admin/user)

Ролі користувачів

65

Admin панель: основи

Admin dashboard

Система коментарів

66

Comment модель та API

Модель коментаря

67

Server Actions для коментарів

CRUD actions

68

Форма додавання коментаря

Comment form

69

Список коментарів під проектом

Comments list

70

Пагінація коментарів

Pagination

71

Відповіді на коментарі (replies)

Nested comments

72

Видалення та редагування

Edit/Delete comments

Модерація коментарів

73

Лайки коментарів

Comment likes

74

Скарги на коментарі (report)

Report system

75

Admin модерація

Moderation panel

76

Фільтр нецензурної лексики

Content filter

77

Rate limiting коментарів

Spam protection

78

Email сповіщення про відповіді

Email notifications

Socket.io інтеграція

79

Встановлення Socket.io

Socket.io setup

80

Socket.io сервер у Next.js

Server configuration

81

Підключення клієнта

Client connection

82

Events та rooms

Real-time events

83

Типізація Socket.io з TypeScript

Type safety

84

Reconnection та error handling

Error handling

85

Тестування WebSocket з\

Testing WebSocket

Онлайн-чат

86

Chat UI компоненти

Chat interface

87

Список онлайн користувачів

Online users

88

Приватні повідомлення

Private messages

89

Збереження історії чату в MongoDB

Message history

90

Typing indicators

Typing status

91

Статус прочитання повідомлень

Read receipts

92

Emoji та форматування

Message formatting

SEO та метадані

93

Metadata API у Next.js

Dynamic metadata

94

Open Graph та Twitter cards

Social sharing

95

Sitemap та robots.txt

Search engines

96

Structured data (JSON-LD)

Rich snippets

Продуктивність

97

Bundle аналіз

Analyzing bundle size

98

Кешування та ISR

Caching strategies

Тестування

99

Налаштування тестів (Jest, Testing Library)

Testing setup

Деплой

100

Деплой на Vercel

Production deployment

Коментарі

💬

Коментарі доступні тільки для авторизованих користувачів