Next.js

Next-01

Знакомство с миром современной веб-разработки

Полезные ссылки

• Bun
• Next.js
• Tailwind CSS

Задача

1. Создать базовый Next.js проект.
2. Попробуйте сверстать шапку сайта с Tailwind CSS из данного Figma проекта.

Нюансы

Параметры при создании Next.js проекта:

Вместо project name можно указать точку, тогда новая директория под проект создаваться не будет.

Важные расширения VS Code

1. Tailwind CSS IntelliSense
2. ESLint
3. Import Cost
4. IntelliSense for CSS class names in HTML
5. VS Code Prettier ESLint
6. Pretty TypeScript Errors

Полезные видео

• Что такое Node.js?
• Что такое TypeScript?
• Что такое React?
• TYPESCRIPT с НУЛЯ за 70 минут - ПОЛНЫЙ КУРС 2025!
• NEXT JS 15 с НУЛЯ за 90 минут - ПОЛНЫЙ КУРС 2025!

Next-02

Знакомство с миром современной веб-разработки

Полезные ссылки

• shadcn/ui

Задача

1. Установите компоненты shadcn/ui. Изучите их.
2. Выберите тему проекта.

Next-03

Полезные видео

• Event Loop (async/await): JavaScript событийный цикл Event Loop, асинхронный код, промисы (Promise), async / await

Мемы

• programming war crimes 1
• programming war crimes 2

Next-04

Полезные ссылки

• zustand

Задача

1. Выбрать тему итогового проекта.
2. Расписать составляющие проекта (например: количество страниц, блоков на страницах, функции, будет ли backend или обращение к API и т.п.).