Главная страницаКатегория next.jsСоздание Full-stack многоязычного блога с Next.js 13.4

Создание Full-stack многоязычного блога с Next.js 13.4

Name: Создание Full-stack многоязычного блога с Next.js 13.4
Price: 13 USD
Rating: 5 (4 reviews)

Building a Full-stack Multilingual Blog with Next.js 13.4

udemy

★5 (всего оценок - 4)

Продолжительность

9 ч 15 мин

Категория

Next.js

Количество уроков

108 Видео

Дата добавления

21 дек. 2023 г., 11:10

Язык

Английский

Дата выхода

15 июн. 2023 г., 01:00

Дата обновления

29 апр. 2026 г., 19:21

Создание многоязычного full‑stack блога — отличная возможность для разработчиков вывести свои навыки на новый уровень. В этом курсе вы шаг за шагом освоите работу с Next.js 13.4, Directus CMS и Tailwind CSS, создадите производительный и современный блог, полностью готовый к реальному использованию.

Что дает этот курс

Курс подробно раскрывает весь процесс разработки: от проектирования интерфейса и настройки CMS до финального развертывания на Vercel. Его структура идеально подходит для новичков в full‑stack разработке, которые хотят создать реальный проект и понять, как современные технологии работают в связке.

Основные преимущества обучения

Понимание архитектуры Next.js 13.4 и принципов маршрутизации.
Создание адаптивного пользовательского интерфейса на Tailwind CSS.
Интеграция с Directus CMS при помощи Directus JS SDK.
Оптимизация контента, динамическое создание метаданных и улучшение SEO.
Работа с локализацией, переводами и многоязычной структурой сайта.
Развёртывание проекта в облаке с использованием Vercel.

Что вы будете делать в процессе обучения

Каждый этап курса подробно демонстрирует ключевые аспекты создания полноценного блога: от настройки окружения до вывода данных из CMS и обработки маршрутов.

Построение интерфейса

Вы создадите структуру страниц, изучите файловую маршрутизацию, построите макеты с использованием Tailwind CSS и реализуете динамические маршруты для статей блога.

Ключевые элементы UI

Работа с layout и шаблонами страниц.
Создание адаптивных компонентов.
Настройка темизации и пользовательских стилей.

Интеграция Directus CMS

После создания интерфейса вы перейдёте к настройке CMS: создадите коллекции, модели данных и связи, а затем подключите их к Next.js через SDK.

Что изучите

Настройка коллекций и полей Directus.
CRUD‑операции через Directus API.
Генерация SEO‑метаданных: заголовков, описаний, OG‑изображений.
Оптимизация изображений Directus на лету.

Работа с многоязычностью

Отдельный акцент делается на построении интернационализированного блога. Вы разберёте локализованные маршруты, перевод контента и принципы многоязычной структуры.

Ключевые навыки интернационализации

Создание маршрутов для разных языковых версий.
Получение локализованных данных из Directus.
Настройка пользовательского контента под выбранный язык.

Развёртывание и финальная оптимизация

После сборки функционала вы подготовите проект к публикации и развернёте его на Vercel, изучив особенности оптимизации производительности и SEO для Next.js.

Вы освоите

Настройку окружения для production.
Интеграцию аналитики, социальных метатегов и sitemap.
Финальную оптимизацию скорости загрузки.

Кому подходит курс

Курс подходит начинающим и продолжающим разработчикам, желающим создать проект реального уровня и освоить современные инструменты веб‑разработки.

Рекомендуемые навыки перед началом

Базовые знания HTML, CSS и JavaScript.
Желание изучать современные технологии и применять их в проектах.

Запишитесь на курс и создайте свой современный full‑stack блог уже сегодня!

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:01:10
Welcome to the Course!
Урок 2. 00:05:07
Project Overview
Урок 3. 00:02:30
Why Next.js?
Урок 4. 00:02:16
Why Directus?
Урок 5. 00:04:25
Course Outline
Урок 6. 00:02:40
How to Take the Course?
Урок 7. 00:02:04
Prerequisites: Git, Node.js and VS Code.
Урок 8. 00:03:17
Let's Create a Next.js Project
Урок 9. 00:02:28
Project Clean-up
Урок 10. 00:05:58
Key Concept: File-based Routing
Урок 11. 00:04:04
Nested Routes and Navigating Between Pages
Урок 12. 00:05:56
Key Concept: Layouts
Урок 13. 00:15:23
Navigation Component
Урок 14. 00:04:35
Creating Site Configuration
Урок 15. 00:13:24
Footer Component
Урок 16. 00:07:17
Social Links Component
Урок 17. 00:05:49
Creating Dummy Data and Types
Урок 18. 00:02:22
Homepage Layout
Урок 19. 00:08:38
Post Card Component
Урок 20. 00:11:52
Post Content Component
Урок 21. 00:03:51
Different Layouts of Post Card Component
Урок 22. 00:04:29
Post List Component
Урок 23. 00:05:52
Calculating Reading Time and Relative Date
Урок 24. 00:02:13
Reversed Layout for Post Card Component
Урок 25. 00:11:58
CTA Card Component
Урок 26. 00:03:31
Key Concept: Responsivity with Tailwind CSS
Урок 27. 00:09:17
LetвЂ™s Make the Homepage Responsive
Урок 28. 00:03:53
Key Concept: Dynamic Routes
Урок 29. 00:06:41
How to Generate Static Params
Урок 30. 00:03:36
Building Category Page
Урок 31. 00:01:00
Fixing Bug: Z-index of Navigation
Урок 32. 00:06:01
Dynamic Route for Post Page
Урок 33. 00:01:50
How to Return 404 for Post Page
Урок 34. 00:10:15
Post Hero Component
Урок 35. 00:03:25
Layout of Post Page
Урок 36. 00:06:40
Social Share Component
Урок 37. 00:05:20
Let's Create First Enviroment Variable
Урок 38. 00:01:57
Post Body Component
Урок 39. 00:08:25
Finishing Touches
Урок 40. 00:03:42
Key Concept: What is Directus
Урок 41. 00:01:52
3 Ways to Create Directus Project
Урок 42. 00:06:04
Deploying Directus with Railway
Урок 43. 00:03:05
Creating AWS Account for S3 Storage
Урок 44. 00:04:36
Connecting AWS and Directus
Урок 45. 00:06:53
Quick Intro about Directus CMS
Урок 46. 00:10:19
Creating 'Posts' Collection
Урок 47. 00:01:32
Creating 'Categories' Collection
Урок 48. 00:02:29
Key Concept: Relational Data
Урок 49. 00:06:16
Creating Relations Between Tables
Урок 50. 00:01:25
Creating Categories in Directus
Урок 51. 00:04:05
LetвЂ™s Create our First Blog Post
Урок 52. 00:03:10
Key Concept: APIs and CRUD Operations
Урок 53. 00:06:19
Securing Data with Directus
Урок 54. 00:04:07
Installing Directus JS SDK
Урок 55. 00:07:30
Fetching Homepage Data
Урок 56. 00:04:03
Fixing Image 'src' Error
Урок 57. 00:02:00
Optimising Images on the Fly with Directus
Урок 58. 00:07:24
Fetching Category Page Data
Урок 59. 00:02:08
Generating Static Params for Category Pages
Урок 60. 00:01:40
Generating Static Params for Post Page
Урок 61. 00:03:27
Fetching Post Page Data
Урок 62. 00:01:40
Parsing Post Body
Урок 63. 00:04:20
Styling Post Body
Урок 64. 00:04:40
Parsing Images as Next Image
Урок 65. 00:06:31
Server Actions for Subscribers Form
Урок 66. 00:10:56
Revalidate Data and Reset Form
Урок 67. 00:01:50
Fixing Typescript Error
Урок 68. 00:02:15
Key Concept: Internationalization
Урок 69. 00:01:34
Internationalization Configuration
Урок 70. 00:02:37
Creating Localised Routes
Урок 71. 00:02:24
Key Concept: Middleware
Урок 72. 00:08:15
Redirecting User with Middleware
Урок 73. 00:05:13
Creating Dictionaries
Урок 74. 00:04:02
Creating 'getDictinoary' Function
Урок 75. 00:21:07
Building Localised UI
Урок 76. 00:03:33
Creating Localised Data for Categories in Directus
Урок 77. 00:03:06
Creating Localised Data for Posts in Directus
Урок 78. 00:06:41
Fetching Localised Data - Homepage
Урок 79. 00:09:16
Fetching Localised Data - Categories
Урок 80. 00:06:04
Fetching Localised Data - Post Page
Урок 81. 00:11:10
Creating Language Switcher Component
Урок 82. 00:01:53
Key Concept: Metadata API
Урок 83. 00:03:17
File-based Metadata: Adding Favicon and OG Image
Урок 84. 00:01:34
Static Metadata: Titles and Description for Homepage
Урок 85. 00:03:24
Dynamic Metadata: Different Description for Different Locales
Урок 86. 00:08:28
Dynamic Metadata: Titles and Descriptions for Category Page
Урок 87. 00:04:32
Title Templates, Default and Absolute Values
Урок 88. 00:03:49
Dynamic Metadata: Titles and Descriptions for Post Page
Урок 89. 00:05:38
Opengraph Metadata
Урок 90. 00:06:03
Canonical and Alternate URLs
Урок 91. 00:05:33
Schema Markup for Articles with JSON
Урок 92. 00:07:23
Dynamic OG Image Generation for Post Page
Урок 93. 00:05:04
Dynamic OG Image Generation for Category Page
Урок 94. 00:02:29
Creating Robots.txt File
Урок 95. 00:10:46
Localised Sitemaps
Урок 96. 00:05:33
Google Analytics Integration
Урок 97. 00:02:00
Fixing Server Actions Error
Урок 98. 00:11:16
Transforming CTA Card into a Client Component
Урок 99. 00:05:53
Fixing CORS Error
Урок 100. 00:02:12
Google Search Console Integration
Урок 101. 00:01:18
LetвЂ™s Try to Build Our App
Урок 102. 00:05:47
Creating Github Repo for our Project
Урок 103. 00:04:10
Deploying Next.js with Vercel
Урок 104. 00:04:03
Search Console and Sitemap
Урок 105. 00:01:37
Checking Page Speed Score
Урок 106. 00:03:26
Fixing LCP Problem
Урок 107. 00:09:08
On-demand Revalidation - 1
Урок 108. 00:05:59
On-demand Revalidation - 2

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии