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

Name: Building a Full-stack Multilingual Blog with Next.js 13.4
Rating: 4.3 (114 reviews)

Learn how to build a full-stack, multilingual and high performant blog website with Next.js 13.4 and Directus.

Created byBatuhan Bilgin

Last updated 6/2023

English

What you'll learn

How to Build Modern UI with NextJS and Tailwind CSS
Latest Features of NextJS 13 such as 'App Directory', 'Server Components', 'Server Actions' etc.
How to Build Roboust and Scalable Applications with NextJS 13
How to Build Your Own Headless CMS with Directus
How to Integrate NextJS with Headless CMS
How to Create Multilingual Applications with NextJS 13
How to Get Full SEO Scrore with Metadata API of NextJS13
How to Deploy NextJS with Vercel
How to Deploy Directus with Railway

Course content

7 sections • 108 lectures • 9h 13m total length

Welcome to the Course!1:09
Project Overview5:06
Explore building a full-stack multilingual blog with Next.js 13.4, covering file-based routing, server and client components, translations to German, and SEO optimization with the Metadata API.
Why Next.js?2:30
Next.js powers faster page loads with server-side rendering and automatic code splitting, seamless deployment with Vercel featuring automatic scaling and global CDN, zero-setup configuration, and a thriving ecosystem.
Why Directus?2:15
Directors offers headless content management by decoupling the front end, enabling tailored blog interfaces, REST and GraphQL access, and a free deployment path on railway or digital ocean.
Course Outline4:24
How to Take the Course?2:39
Prerequisites: Git, Node.js and VS Code.2:03

Let's Create a Next.js Project3:16
Create a Next.js 13 project from the terminal on Mac, decide between TypeScript or JavaScript, enable ESLint and Tailwind CSS, then open the project in VS Code.
Project Clean-up2:27
Key Concept: File-based Routing5:57
Nested Routes and Navigating Between Pages4:03
Key Concept: Layouts5:55
Explore the key concept of layouts in Next.js 13.4, learning how a route layout provides a shared navigation and wraps the entire app for reusable components like header and footer.
Navigation Component15:22
Create a reusable navigation component in a components folder, implement a padding container for consistent spacing, and build a sticky top navigation with a blurred background and home links.
Creating Site Configuration4:34
Footer Component13:23
Social Links Component7:16
Creating Dummy Data and Types5:48
Homepage Layout2:21
Post Card Component8:37
Post Content Component11:51
Different Layouts of Post Card Component3:50
Post List Component4:28
Calculating Reading Time and Relative Date5:51
Reversed Layout for Post Card Component2:12
CTA Card Component11:57
Create a CTA card component with a content container, heading, and description, then layer a background image with an overlay and add a responsive newsletter form for sign-ups.
Key Concept: Responsivity with Tailwind CSS3:30
Let’s Make the Homepage Responsive9:16
Key Concept: Dynamic Routes3:52
How to Generate Static Params6:40
Building Category Page3:35
Fixing Bug: Z-index of Navigation0:59
Dynamic Route for Post Page6:00
How to Return 404 for Post Page1:49
Post Hero Component10:14
Layout of Post Page3:24
Social Share Component6:39
Let's Create First Enviroment Variable5:19
Create and secure environment variables for a Next.js app by using dot env.local, gitignore, and next public for client access; deploy them via vercel and differentiate server and client components.
Post Body Component1:56
Finishing Touches8:24

Key Concept: What is Directus3:41
3 Ways to Create Directus Project1:51
Compare three options to create your director's project—director's club cloud, railway with $5 credits, and local setup—and learn why railway offers an easy, free start.
Deploying Directus with Railway6:03
Creating AWS Account for S3 Storage3:04
Connecting AWS and Directus4:35
Quick Intro about Directus CMS6:52
Creating 'Posts' Collection10:18
Creating 'Categories' Collection1:31
Key Concept: Relational Data2:28
Creating Relations Between Tables6:15
Creating Categories in Directus1:24
Create and publish categories in Directus by using the content section to delete existing categories, add new items with titles and descriptions, and save as published before moving to posts.
Let’s Create our First Blog Post4:04
Key Concept: APIs and CRUD Operations3:09
Securing Data with Directus6:18

Installing Directus JS SDK4:06
Fetching Homepage Data7:29
Fixing Image 'src' Error4:02
Optimising Images on the Fly with Directus2:00
Optimize heavy images on the fly using transformation presets in project settings, lowering quality to 60 and converting to WebP, improving SEO and page speed.
Fetching Category Page Data7:23
Generating Static Params for Category Pages2:07
Replace the generate static params function with a try-catch to fetch categories, filter by status published, and return categories and params for static category pages.
Generating Static Params for Post Page1:39
Fetching Post Page Data3:26
Parsing Post Body1:39
Styling Post Body4:19
Parsing Images as Next Image4:39
Replace image elements with a Next.js image component using a TypeScript DOM parser, preserving src and alt and adding object-cover styling. Push form data to the subscriber table.
Server Actions for Subscribers Form6:30
Revalidate Data and Reset Form10:55
Fixing Typescript Error1:49

Key Concept: Internationalization2:14
Explore internationalization for a multilingual blog by setting English and German locales, implementing localized routing on the client, and fetching localized posts via a locale-aware API.
Internationalization Configuration1:33
Creating Localised Routes2:36
Key Concept: Middleware2:23
Redirecting User with Middleware8:14
Creating Dictionaries5:12
Creating 'getDictinoary' Function4:01
Building Localised UI21:06
Creating Localised Data for Categories in Directus3:32
Creating Localised Data for Posts in Directus3:05
Learn to create localized data for posts in directus by adding a translations field, duplicating post fields for translations, and translating the body and description to German.
Fetching Localised Data - Homepage6:40
Fetch localized homepage posts by detecting the locale and selecting translated fields for title, description, and body, including category translations, to render a multilingual blog home.
Fetching Localised Data - Categories9:15
Fetching Localised Data - Post Page6:03
Creating Language Switcher Component11:09
Build a language switcher in a Next.js 13.4 multilingual blog, using localized routes, client-side logic, and locale-aware redirects, then optimize seo with the metadata api.

Key Concept: Metadata API1:52
File-based Metadata: Adding Favicon and OG Image3:16
Add file-based metadata in Next.js by placing a favicon and an Open Graph image in the app folder, and configure a matcher to exclude static assets from middleware.
Static Metadata: Titles and Description for Homepage1:33
Dynamic Metadata: Different Description for Different Locales3:23
Dynamic Metadata: Titles and Descriptions for Category Page8:27
Title Templates, Default and Absolute Values4:31
Dynamic Metadata: Titles and Descriptions for Post Page3:48
Opengraph Metadata5:38
Canonical and Alternate URLs6:02
Schema Markup for Articles with JSON5:32
Construct a JSON-LD article schema for Google's search platform, mapping headline, image, author, publisher, and dates from post data, then validate with Google's schema markup checker.
Dynamic OG Image Generation for Post Page7:23
Dynamic OG Image Generation for Category Page5:03
Creating Robots.txt File2:28
Localised Sitemaps10:45
Google Analytics Integration5:32
Fixing Server Actions Error1:59
Transforming CTA Card into a Client Component11:15
Fixing CORS Error5:52
Fix CORS by configuring environment variables for course enablement and origins, deploy on railway, test in incognito, and prepare API security and Google search console integration.
Google Search Console Integration2:11

Let’s Try to Build Our App1:17
Creating Github Repo for our Project5:46
Deploying Next.js with Vercel4:09
Deploy a multilingual Next.js blog on Vercel, sign up and log in, connect GitHub repositories, import projects, configure environment variables and domains, and verify sitemap with Search Console.
Search Console and Sitemap4:02
Checking Page Speed Score1:36
Fixing LCP Problem3:25
On-demand Revalidation - 19:07
On-demand Revalidation - 25:58

Requirements

No prior NextJS knowledge is required. You will learn everything from scratch.
React knowledge is recommended. You should at least have an idea about React.
Javascript knowledge is strongly recommended. This is not a begginer course for new comers to Javascript world.

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.

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!

Who this course is for:

Beginner React Developers / Learners
Beginner Javascript Developers / Learners
Beginner Nextjs Developers / Learners
Experienced Developers who wants to learn advaced use cases such as Internationalization or Metadata API

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

What you'll learn

Explore related topics

Course content

Getting Started7 lectures • 20min

Building UI with Next.js and Tailwind CSS32 lectures • 3hr 11min

Building CMS with Directus14 lectures • 1hr 2min

Integrating Next.js and Directus14 lectures • 1hr 2min

Internationalization (Multi-lingual Website)14 lectures • 1hr 27min

How to Get Full Green SEO Score with Next.js 1319 lectures • 1hr 37min

Deploying the Project8 lectures • 35min

Requirements

Description

Who this course is for: