Building a Full-stack Multilingual Blog with Next.js 13.4
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.
More
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 Building a Full-stack Multilingual Blog with Next.js 13.4
| # | Title | Duration |
|---|---|---|
| 1 | Welcome to the Course! | 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 |
Similar courses to Building a Full-stack Multilingual Blog with Next.js 13.4
Next JS: The Complete Developer's Guide
React Simplified - Next.js
NextJS E-Com Masterclass: Learn The All New Next JS
Ecommerce on the Jamstack with Snipcart, Next.js, & WordPress
Complete Next.js with React & Node - Beautiful Portfolio App
Mastering Next.js 13 with TypeScript
NextJS & OpenAI - 2024 Edition
Testing Next.js Apps with Jest, Testing Library and Cypress
