next-js

KO | EN

gitlite — search

#react #ai #typescript #llm #rust #linux #docker #nodejs #java #windows #cli #vue #mcp #open-source

(★ 66)

Код учебного курса “Next.js” на YouTube-канале webDev (https://tinyurl.com/ydte87ax)

next-js Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Next.js

### Описание курса:
В данном видеокурсе мы с вами рассмотрим фрэймворк для серверного рендеринга - Next.js. 
Разберём основные концепции по типу роутинга, создания страниц и копонентов. Рассмотрим разницу подходов SSR (Server Side Rendering) и SSG (Static Site Generation), а так же подключим их в приложение. Рассмотрим, как Next.js ускоряет загрузку приложения и улучшает работу с SEO. И в заключение выполним типизацию с помощью TypeScript и загрузим готовое приложение на бесплатный хостинг Vercel.

### Поддержать развитие канала:
[<img alt="webDev | YouTube Sponsor" src="https://img.shields.io/badge/Стать спонсором-F70000.svg?&style=for-the-badge&logo=youtube&logoColor=fff" />][sponsor]

---

### Используемые ресурсы и инструменты:
- [Visual Studio Code (редактор кода)](https://code.visualstudio.com)
- [JSON Viewer (удобная работа с JSON)](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ru)
- [Vercel (бесплатный хостинг)](https://vercel.com)

### Полезные курсы:
- [React & Redux](https://www.youtube.com/playlist?list=PLNkWIWHIRwME_Gv2vlWAR6TfeSXylYfw4)
- [ES6](https://www.youtube.com/playlist?list=PLNkWIWHIRwMGLJXugVvdK7i8UagGQNaXD)
- [ES7-ES9 Features](https://www.youtube.com/playlist?list=PLNkWIWHIRwMH_05WTvIX419odDtStynm3)
- [TypeScript](https://www.youtube.com/playlist?list=PLNkWIWHIRwMEm1FgiLjHqSky27x5rXvQa)

### Полезные ссылки:
- [Next.js (официальный сайт)](https://nextjs.org)
- [Node Package Manager](https://www.npmjs.com)
- [{JSON} Placeholder (тестовый API)](https://jsonplaceholder.typicode.com)

---

### Быстрый старт:
- Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/next-js.git`
- Перейдите в папку с проектом: `cd next-js`
- Перейдите в нужную ветку соответствующую уроку:
  - `git checkout lesson_01`
  - `git checkout lesson_02`
  - `git checkout lesson_10` и т.д.
- Установите зависимости: `yarn install`
- Запустите проект: `yarn start`

---

### Список уроков:
- [#0 Введение (Introduction)](https://youtu.be/M1Y7JmaslkU)
- [#1 Базовые концепции и установка (Basic Concepts & Setup Environment)](https://youtu.be/dnd0YxOla8A)
- [#2 Страницы и Роутинг (Pages & Routes)](https://youtu.be/Pt9PkDWEluk)
- [#3 Макет и компоненты (Layout & Components)](https://youtu.be/_nWJOlC-Yfk)
- [#4 Cтили (Styles)](https://youtu.be/TAr0SSxe9b4)
- [#5 Навигация по страницам (Pages Navigation & Redirecting)](https://youtu.be/rocqGSMlus4)
- [#6 Картинки и метаданные (Images & Metadata)](https://youtu.be/S2KQHlhd5jw)
- [#7 Получение данных (Fetching Data)](https://youtu.be/ZCCEl9J8zv0)
- [#8 Динамические роуты (Dynamic Routes)](https://youtu.be/gVl3rnjBurU)
- [#9 Рендеринг на сервере и статичная генерация (SSR & SSG)](https://youtu.be/-YwctEwGkCk)
- [#10 Создание API (API Creation)](https://youtu.be/_9iWPtnzyt8)
- [#11 Подключение TypeScript (TypeScript Integration)](https://youtu.be/jFvyGCtvtrs)
- [#12 Загрузка приложения на Vercel (Deploying To Vercel)](https://youtu.be/nxiKSPYvuZk)

---

### Связаться со мной:
[<img alt="webDev | YouTube" src="https://img.shields.io/badge/youtube-FF0000.svg?&style=for-the-badge&logo=youtube&logoColor=white" />][youtube]
[<img alt="webDev | Instagram" src="https://img.shields.io/badge/instagram-E4405F.svg?&style=for-the-badge&logo=instagram&logoColor=white" />][instagram]
[<img alt="webDev | LinkedIn" src="https://img.shields.io/badge/linkedin-0077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" />][linkedin]
[<img alt="webDev | X" src="https://img.shields.io/badge/x-000000.svg?&style=for-the-badge&logo=x&logoColor=white" />][x]
[<img alt="webDev | Threads" src="https://img.shields.io/badge/threads-ffffff.svg?&style=for-the-badge&logo=threads&logoColor=black" />][threads]
[<img alt="webDev | Telegram" src="https://img.shields.io/badge/telegram-229ED9.svg?&style=for-the-badge&logo=Telegram&logoColor=white" />][telegram]

[youtube]: https://youtube.com/YauhenKavalchuk
[instagram]: https://instagram.com/YauhenKavalchuk
[linkedin]: https://linkedin.com/in/YauhenKavalchuk
[x]: https://x.com/YauhenKavalchuk
[threads]: https://www.threads.com/YauhenKavalchuk
[telegram]: http://t.me/yauhenkavalchuk
[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join

next-js

next-js Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

next-js

next-js Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README