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

Focused View

Batuhan Bilgin

9:13:20

313 View

1. Getting Started

1. Welcome to the Course!.mp4

01:09

2. Project Overview.mp4

05:06

3. Why Next.js.mp4

02:30

4. Why Directus.mp4

02:15

5. Course Outline.mp4

04:24

6.1 Discord Server.html

6.2 Source Code.html

6. How to Take the Course.mp4

02:39

7. Prerequisites Git Node.js and VS Code..mp4

02:03

2. Building UI with Next.js and Tailwind CSS

1. Lets Create a Next.js Project.mp4

03:16

2. Project Clean-up.mp4

02:27

3. Key Concept File-based Routing.mp4

05:57

4. Nested Routes and Navigating Between Pages.mp4

04:03

5. Key Concept Layouts.mp4

05:55

6. Navigation Component.mp4

15:22

7. Creating Site Configuration.mp4

04:34

8. Footer Component.mp4

13:23

9. Social Links Component.mp4

07:16

10. Creating Dummy Data and Types.mp4

05:48

11. Homepage Layout.mp4

02:21

12. Post Card Component.mp4

08:37

13. Post Content Component.mp4

11:51

14. Different Layouts of Post Card Component.mp4

03:50

15. Post List Component.mp4

04:28

16. Calculating Reading Time and Relative Date.mp4

05:51

17. Reversed Layout for Post Card Component.mp4

02:12

18. CTA Card Component.mp4

11:57

19. Key Concept Responsivity with Tailwind CSS.mp4

03:30

20. Lets Make the Homepage Responsive.mp4

09:16

21. Key Concept Dynamic Routes.mp4

03:52

22. How to Generate Static Params.mp4

06:40

23. Building Category Page.mp4

03:35

24. Fixing Bug Z-index of Navigation.mp4

00:59

25. Dynamic Route for Post Page.mp4

06:00

26. How to Return 404 for Post Page.mp4

01:49

27. Post Hero Component.mp4

10:14

28. Layout of Post Page.mp4

03:24

29. Social Share Component.mp4

06:39

30. Lets Create First Enviroment Variable.mp4

05:19

31. Post Body Component.mp4

01:56

32. Finishing Touches.mp4

08:24

3. Building CMS with Directus

1. Key Concept What is Directus.mp4

03:41

2. 3 Ways to Create Directus Project.mp4

01:51

3. Deploying Directus with Railway.mp4

06:03

4. Creating AWS Account for S3 Storage.mp4

03:04

5. Connecting AWS and Directus.mp4

04:35

6. Quick Intro about Directus CMS.mp4

06:52

7. Creating Posts Collection.mp4

10:18

8. Creating Categories Collection.mp4

01:31

9. Key Concept Relational Data.mp4

02:28

10. Creating Relations Between Tables.mp4

06:15

11. Creating Categories in Directus.mp4

01:24

12. Lets Create our First Blog Post.mp4

04:04

13. Key Concept APIs and CRUD Operations.mp4

03:09

14. Securing Data with Directus.mp4

06:18

4. Integrating Next.js and Directus

1. Installing Directus JS SDK.mp4

04:06

2. Fetching Homepage Data.mp4

07:29

3. Fixing Image src Error.mp4

04:02

4. Optimising Images on the Fly with Directus.mp4

02:00

5. Fetching Category Page Data.mp4

07:23

6. Generating Static Params for Category Pages.mp4

02:07

7. Generating Static Params for Post Page.mp4

01:39

8. Fetching Post Page Data.mp4

03:26

9. Parsing Post Body.mp4

01:39

10. Styling Post Body.mp4

04:19

11. Parsing Images as Next Image.mp4

04:39

12. Server Actions for Subscribers Form.mp4

06:30

13. Revalidate Data and Reset Form.mp4

10:55

14. Fixing Typescript Error.mp4

01:49

5. Internationalization (Multi-lingual Website)

1. Key Concept Internationalization.mp4

02:14

2. Internationalization Configuration.mp4

01:33

3. Creating Localised Routes.mp4

02:36

4. Key Concept Middleware.mp4

02:23

5. Redirecting User with Middleware.mp4

08:14

6. Creating Dictionaries.mp4

05:12

7. Creating getDictinoary Function.mp4

04:01

8. Building Localised UI.mp4

21:06

9. Creating Localised Data for Categories in Directus.mp4

03:32

10. Creating Localised Data for Posts in Directus.mp4

03:05

11. Fetching Localised Data - Homepage.mp4

06:40

12. Fetching Localised Data - Categories.mp4

09:15

13. Fetching Localised Data - Post Page.mp4

06:03

14. Creating Language Switcher Component.mp4

11:09

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

1. Key Concept Metadata API.mp4

01:52

2. File-based Metadata Adding Favicon and OG Image.mp4

03:16

3. Static Metadata Titles and Description for Homepage.mp4

01:33

4. Dynamic Metadata Different Description for Different Locales.mp4

03:23

5. Dynamic Metadata Titles and Descriptions for Category Page.mp4

08:27

6. Title Templates Default and Absolute Values.mp4

04:31

7. Dynamic Metadata Titles and Descriptions for Post Page.mp4

03:48

8. Opengraph Metadata.mp4

05:38

9. Canonical and Alternate URLs.mp4

06:02

10. Schema Markup for Articles with JSON.mp4

05:32

11. Dynamic OG Image Generation for Post Page.mp4

07:23

12. Dynamic OG Image Generation for Category Page.mp4

05:03

13. Creating Robots.txt File.mp4

02:28

14. Localised Sitemaps.mp4

10:45

15. Google Analytics Integration.mp4

05:32

16. Fixing Server Actions Error.mp4

01:59

17. Transforming CTA Card into a Client Component.mp4

11:15

18. Fixing CORS Error.mp4

05:52

19. Google Search Console Integration.mp4

02:11

7. Deploying the Project

1. Lets Try to Build Our App.mp4

01:17

2. Creating Github Repo for our Project.mp4

05:46

3. Deploying Next.js with Vercel.mp4

04:09

4. Search Console and Sitemap.mp4

04:02

5. Checking Page Speed Score.mp4

01:36

6. Fixing LCP Problem.mp4

03:25

7. On-demand Revalidation - 1.mp4

09:07

8. On-demand Revalidation - 2.mp4

05:58

Description

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

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

Who is this 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

What You Need to Know?

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.

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

I left my corporate life to build and share what I learn with the others. I build apps with modern technologies such as Next.js, Typescript, Tailwind CSS, Supabase etc. Also, I create video tutorials on Youtube and Udemy. If you are ready to start your journey, join me and let's build something great together!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.