IIRF Online > Development > Web Development > Next.js > Building a Full-stack Multilingual Blog with Next.js 13.4
Building a Full-stack Multilingual Blog with Next.js 13.4 by Udemy
Learn how to build a full-stack, multilingual and high performant blog website with Next.js 13.4 and Directus.
Course Highlights
- 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
Skills you will learn!
Curriculum
7 Topics
Welcome to the Course!
Project Overview
Why Next.js?
Why Directus?
Course Outline
How to Take the Course?
Prerequisites: Git Node.js and VS Code.
32 Topics
Let's Create a Next.js Project
Project Clean-up
Key Concept: File-based Routing
Nested Routes and Navigating Between Pages
Key Concept: Layouts
Navigation Component
Creating Site Configuration
Footer Component
Social Links Component
Creating Dummy Data and Types
Homepage Layout
Post Card Component
Post Content Component
Different Layouts of Post Card Component
Post List Component
Calculating Reading Time and Relative Date
Reversed Layout for Post Card Component
CTA Card Component
Key Concept: Responsivity with Tailwind CSS
Let’s Make the Homepage Responsive
Key Concept: Dynamic Routes
How to Generate Static Params
Building Category Page
Fixing Bug: Z-index of Navigation
Dynamic Route for Post Page
How to Return 404 for Post Page
Post Hero Component
Layout of Post Page
Social Share Component
Let's Create First Enviroment Variable
Post Body Component
Finishing Touches
14 Topics
Key Concept: What is Directus
3 Ways to Create Directus Project
Deploying Directus with Railway
Creating AWS Account for S3 Storage
Connecting AWS and Directus
Quick Intro about Directus CMS
Creating 'Posts' Collection
Creating 'Categories' Collection
Key Concept: Relational Data
Creating Relations Between Tables
Creating Categories in Directus
Let’s Create our First Blog Post
Key Concept: APIs and CRUD Operations
Securing Data with Directus
14 Topics
Installing Directus JS SDK
Fetching Homepage Data
Fixing Image 'src' Error
Optimising Images on the Fly with Directus
Fetching Category Page Data
Generating Static Params for Category Pages
Generating Static Params for Post Page
Fetching Post Page Data
Parsing Post Body
Styling Post Body
Parsing Images as Next Image
Server Actions for Subscribers Form
Revalidate Data and Reset Form
Fixing Typescript Error
14 Topics
Key Concept: Internationalization
Internationalization Configuration
Creating Localised Routes
Key Concept: Middleware
Redirecting User with Middleware
Creating Dictionaries
Creating 'getDictinoary' Function
Building Localised UI
Creating Localised Data for Categories in Directus
Creating Localised Data for Posts in Directus
Fetching Localised Data - Homepage
Fetching Localised Data - Categories
Fetching Localised Data - Post Page
Creating Language Switcher Component
19 Topics
Key Concept: Metadata API
File-based Metadata: Adding Favicon and OG Image
Static Metadata: Titles and Description for Homepage
Dynamic Metadata: Different Description for Different Locales
Dynamic Metadata: Titles and Descriptions for Category Page
Title Templates Default and Absolute Values
Dynamic Metadata: Titles and Descriptions for Post Page
Opengraph Metadata
Canonical and Alternate URLs
Schema Markup for Articles with JSON
Dynamic OG Image Generation for Post Page
Dynamic OG Image Generation for Category Page
Creating Robots.txt File
Localised Sitemaps
Google Analytics Integration
Fixing Server Actions Error
Transforming CTA Card into a Client Component
Fixing CORS Error
Google Search Console Integration
8 Topics
Let’s Try to Build Our App
Creating Github Repo for our Project
Deploying Next.js with Vercel
Search Console and Sitemap
Checking Page Speed Score
Fixing LCP Problem
On-demand Revalidation - 1
On-demand Revalidation - 2
Building a Full-stack Multilingual Blog with Next.js 13.4
Related Next.js Courses
Thank You!
Your review has been submitted successfully.