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

Building a Full-stack Multilingual Blog with Next.js 13.4, available at $84.99, has an average rating of 4, with 108 lectures, based on 111 reviews, and has 616 subscribers.

You will learn about 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 This course is ideal for individuals who are Beginner React Developers / Learners or Beginner Javascript Developers / Learners or Beginner Nextjs Developers / Learners or Experienced Developers who wants to learn advaced use cases such as Internationalization or Metadata API It is particularly useful for Beginner React Developers / Learners or Beginner Javascript Developers / Learners or Beginner Nextjs Developers / Learners or Experienced Developers who wants to learn advaced use cases such as Internationalization or Metadata API.

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

Summary

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

Price: $84.99

Average Rating: 4

Number of Lectures: 108

Number of Published Lectures: 108

Number of Curriculum Items: 108

Number of Published Curriculum Objects: 108

Original Price: $69.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

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!

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Welcome to the Course!

Lecture 2: Project Overview

Lecture 3: Why Next.js?

Lecture 4: Why Directus?

Lecture 5: Course Outline

Lecture 6: How to Take the Course?

Lecture 7: Prerequisites: Git, Node.js and VS Code.

Chapter 2: Building UI with Next.js and Tailwind CSS

Lecture 1: Let's Create a Next.js Project

Lecture 2: Project Clean-up

Lecture 3: Key Concept: File-based Routing

Lecture 4: Nested Routes and Navigating Between Pages

Lecture 5: Key Concept: Layouts

Lecture 6: Navigation Component

Lecture 7: Creating Site Configuration

Lecture 8: Footer Component

Lecture 9: Social Links Component

Lecture 10: Creating Dummy Data and Types

Lecture 11: Homepage Layout

Lecture 12: Post Card Component

Lecture 13: Post Content Component

Lecture 14: Different Layouts of Post Card Component

Lecture 15: Post List Component

Lecture 16: Calculating Reading Time and Relative Date

Lecture 17: Reversed Layout for Post Card Component

Lecture 18: CTA Card Component

Lecture 19: Key Concept: Responsivity with Tailwind CSS

Lecture 20: Let’s Make the Homepage Responsive

Lecture 21: Key Concept: Dynamic Routes

Lecture 22: How to Generate Static Params

Lecture 23: Building Category Page

Lecture 24: Fixing Bug: Z-index of Navigation

Lecture 25: Dynamic Route for Post Page

Lecture 26: How to Return 404 for Post Page

Lecture 27: Post Hero Component

Lecture 28: Layout of Post Page

Lecture 29: Social Share Component

Lecture 30: Let's Create First Enviroment Variable

Lecture 31: Post Body Component

Lecture 32: Finishing Touches

Chapter 3: Building CMS with Directus

Lecture 1: Key Concept: What is Directus

Lecture 2: 3 Ways to Create Directus Project

Lecture 3: Deploying Directus with Railway

Lecture 4: Creating AWS Account for S3 Storage

Lecture 5: Connecting AWS and Directus

Lecture 6: Quick Intro about Directus CMS

Lecture 7: Creating 'Posts' Collection

Lecture 8: Creating 'Categories' Collection

Lecture 9: Key Concept: Relational Data

Lecture 10: Creating Relations Between Tables

Lecture 11: Creating Categories in Directus

Lecture 12: Let’s Create our First Blog Post

Lecture 13: Key Concept: APIs and CRUD Operations

Lecture 14: Securing Data with Directus

Chapter 4: Integrating Next.js and Directus

Lecture 1: Installing Directus JS SDK

Lecture 2: Fetching Homepage Data

Lecture 3: Fixing Image 'src' Error

Lecture 4: Optimising Images on the Fly with Directus

Lecture 5: Fetching Category Page Data

Lecture 6: Generating Static Params for Category Pages

Lecture 7: Generating Static Params for Post Page

Lecture 8: Fetching Post Page Data

Lecture 9: Parsing Post Body

Lecture 10: Styling Post Body

Lecture 11: Parsing Images as Next Image

Lecture 12: Server Actions for Subscribers Form

Lecture 13: Revalidate Data and Reset Form

Lecture 14: Fixing Typescript Error

Chapter 5: Internationalization (Multi-lingual Website)

Lecture 1: Key Concept: Internationalization

Lecture 2: Internationalization Configuration

Lecture 3: Creating Localised Routes

Lecture 4: Key Concept: Middleware

Lecture 5: Redirecting User with Middleware

Lecture 6: Creating Dictionaries

Lecture 7: Creating 'getDictinoary' Function

Lecture 8: Building Localised UI

Lecture 9: Creating Localised Data for Categories in Directus

Lecture 10: Creating Localised Data for Posts in Directus

Lecture 11: Fetching Localised Data – Homepage

Lecture 12: Fetching Localised Data – Categories

Lecture 13: Fetching Localised Data – Post Page

Lecture 14: Creating Language Switcher Component

Chapter 6: How to Get Full Green SEO Score with Next.js 13

Lecture 1: Key Concept: Metadata API

Lecture 2: File-based Metadata: Adding Favicon and OG Image

Lecture 3: Static Metadata: Titles and Description for Homepage

Lecture 4: Dynamic Metadata: Different Description for Different Locales

Lecture 5: Dynamic Metadata: Titles and Descriptions for Category Page

Lecture 6: Title Templates, Default and Absolute Values

Lecture 7: Dynamic Metadata: Titles and Descriptions for Post Page

Lecture 8: Opengraph Metadata

Lecture 9: Canonical and Alternate URLs

Lecture 10: Schema Markup for Articles with JSON

Lecture 11: Dynamic OG Image Generation for Post Page

Lecture 12: Dynamic OG Image Generation for Category Page

Lecture 13: Creating Robots.txt File

Instructors

Batuhan Bilgin
Creator and Developer

Rating Distribution

1 stars: 3 votes
2 stars: 4 votes
3 stars: 9 votes
4 stars: 16 votes
5 stars: 79 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu