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

9h 15m 4s
English
Paid

Course description

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.

Over the course of 108 lectures, you will learn how to build a responsive, performant blog with dynamic routing and localisation, complete with search engine optimisation, social media integration, and Google Analytics. You will also learn how to set up a Directus CMS instance and populate it with content, as well as how to deploy your project using Vercel.

The course begins with an overview of the project and why these technologies were chosen, followed by instructions on how to set up your development environment. You will then dive into building the UI using Next.js and Tailwind CSS, starting with file-based routing and layouts, before moving on to more complex features like dynamic routing and generating static params.

Once the UI is in place, the focus shifts to integrating with Directus CMS. You will learn how to set up a Directus instance and create tables and relations for your blog content. You will then use Directus JS SDK to fetch data from Directus and generate metadata for your blog pages, including titles, descriptions, and OG images.

Read more about the course

Throughout the course, you will be introduced to key concepts such as APIs, CRUD operations, middleware, and responsive design. You will also learn how to optimise your images on the fly using Directus, as well as how to create localised routes and data for internationalisation.

By the end of the course, you will have a fully functional blog with a polished UI, dynamic routing, localisation, and SEO optimisation. You will also have the skills to set up and manage a Directus CMS instance, as well as the knowledge to deploy your project to the web.

This course is perfect for beginner-level developers who are looking to expand their skills and build a real-world project. It assumes a basic knowledge of HTML, CSS, and JavaScript. Whether you are looking to build your own blog or simply want to learn the latest web development technologies, this course has everything you need to succeed.

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

Watch Online

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advanced

Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds
Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Sources: udemy
Don't get left behind! Increase your value as a web developer today by learning how to integrate AI in to your projects! Welcome to the exciting world of AI-powered, next-gener...
5 hours 8 minutes 46 seconds
Next40. Master Next.js 14 in 40 days of epic projects

Next40. Master Next.js 14 in 40 days of epic projects

Sources: Reed Barger, nextjs40.com
Become a Next.js pro in the best way - by building tons of amazing apps, from admin dashboards, personal websites, full-stack apps and more.
4 hours 52 minutes 49 seconds
Next.js Firebase - The Full Course

Next.js Firebase - The Full Course

Sources: fireship.io
You will build a full-stack Social Blogging Platform inspired by sites like DEV.to and Medium. Authors can create content under their custom username, then pub
2 hours 38 minutes 13 seconds