CourseFlix

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

9h 15m 4s
English
Paid

Are you looking to build a modern, full-stack blog with the latest technologies? Look no further than this comprehensive Udemy course, which will guide you through the process of building a professional-grade blog using Next.js, Directus CMS, and Tailwind CSS.

Course Overview

Over the span of 108 lectures, you will learn to build a responsive and performant blog featuring dynamic routing and localization. This course offers essential insights into search engine optimization (SEO), social media integration, and Google Analytics. Additionally, you'll learn to set up a Directus CMS instance, populate it with content, and deploy your project through Vercel.

Getting Started

The course kicks off with a project overview and a discussion on why these particular technologies were selected. You'll receive step-by-step instructions on setting up your development environment, paving the way to begin building the UI using Next.js and Tailwind CSS.

UI Development: From Basics to Advanced

Starting with file-based routing and layouts, you will gradually delve into advanced features such as dynamic routing and generating static parameters.

Integrating Directus CMS

With the UI established, the course transitions into Directus CMS integration. You'll learn to configure a Directus instance and create tables and relations for your blog content. The course also covers using Directus JS SDK for data fetching and metadata generation, including titles, descriptions, and OG images for your blog pages.

Key Concepts and Features

  • APIs and CRUD operations
  • Middleware usage
  • Responsive design principles
  • On-the-fly image optimization using Directus
  • Creation of localized routes and data for internationalization

Course Completion and Benefits

By the end of the course, you will have developed a fully functional blog with a polished UI, dynamic routing capabilities, localization, and SEO optimization. Moreover, you'll gain the skills to set up and manage a Directus CMS instance and deploy your project on the web.

Who Should Enroll?

This course is ideally suited for beginner-level developers eager to enhance their skills by building a real-world project. A basic understanding of HTML, CSS, and JavaScript is assumed. Whether you're aiming to create your own blog or are simply keen to learn cutting-edge web development technologies, this course provides all the tools you need to succeed.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 108 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 108 lessons in this course and access 10,000+ hours of premium content across all courses.

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

Get instant access to all 107 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

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

Related courses

  • Build a Google Docs Clone thumbnailFree

    Build a Google Docs Clone

    By: Antonio Erdeljac (Code With Antonio)
    In this 10-hour course, you will learn how to create a fully functional Google Docs clone from scratch.
    10 hours 26 seconds 3 / 5
  • React Node AWS - Build infinitely Scaling MERN Stack App thumbnail

    React Node AWS - Build infinitely Scaling MERN Stack App

    By: Udemy
    Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could
    25 hours 1 minute 19 seconds 5 / 5
  • Full-Stack Fundamentals 1 - Frontend thumbnail

    Full-Stack Fundamentals 1 - Frontend

    By: Mckay Wrigley
    Embark on an exciting journey to create your personal portfolio website from scratch, showcasing your burgeoning skills in software development using AI.
    1 hour 8 minutes 57 seconds

Frequently asked questions

What is Building a Full-stack Multilingual Blog with Next.js 13.4 about?
Are you looking to build a modern, full-stack blog with the latest technologies? Look no further than this comprehensive Udemy course, which will guide you through the process of building a professional-grade blog using Next.js , Directus…
Who teaches Building a Full-stack Multilingual Blog with Next.js 13.4?
Building a Full-stack Multilingual Blog with Next.js 13.4 is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Building a Full-stack Multilingual Blog with Next.js 13.4?
Building a Full-stack Multilingual Blog with Next.js 13.4 contains 108 lessons with a total runtime of 9 hours 15 minutes. All lessons are available to watch online at your own pace.
Is Building a Full-stack Multilingual Blog with Next.js 13.4 free to watch?
Building a Full-stack Multilingual Blog with Next.js 13.4 is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Building a Full-stack Multilingual Blog with Next.js 13.4 online?
Building a Full-stack Multilingual Blog with Next.js 13.4 is available to watch online on CourseFlix at https://courseflix.net/course/building-a-full-stack-multilingual-blog-with-next-js-13-4. The page hosts every lesson with the integrated video player; no download is required.