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.

Enroll now and start building your own full-stack blog today!

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

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