Build SEO Optimized Blog with Next.js, Tailwind CSS & Contentlayer – Full Tutorial

Build SEO Optimized Blog with Next.js, Tailwind CSS & Contentlayer – Full Tutorial

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Adding Favicon and manifest file

24 of 26

24 of 26

⌨️ Adding Favicon and manifest file

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Build SEO Optimized Blog with Next.js, Tailwind CSS & Contentlayer – Full Tutorial

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ Intro + Demo
  2. 2 ⌨️ Setup and Installation
  3. 3 ⌨️ Tailwind CSS Setup, Dark Mode and project files
  4. 4 ⌨️ Adding Fonts
  5. 5 ⌨️ Navbar Component
  6. 6 ⌨️ Setup Contentlayer
  7. 7 ⌨️ How to render a Blog
  8. 8 ⌨️ Creating Home Cover Section
  9. 9 ⌨️ Featured Posts Component
  10. 10 ⌨️ Recent Posts Component
  11. 11 ⌨️ Footer Component
  12. 12 ⌨️ Blog Page
  13. 13 ⌨️ Creating TOC Component
  14. 14 ⌨️ Category Page
  15. 15 ⌨️ About page
  16. 16 ⌨️ Contact page
  17. 17 ⌨️ Insights Component
  18. 18 ⌨️ Store blog views using Supabase
  19. 19 ⌨️ Adding SEO
  20. 20 ⌨️ Adding Dark Mode
  21. 21 ⌨️ Making it Responsive
  22. 22 ⌨️ Adding Sitemap
  23. 23 ⌨️ Image Optimization
  24. 24 ⌨️ Adding Favicon and manifest file
  25. 25 ⌨️ Adding google's structured json-ld for SEO
  26. 26 We have created one file called ThemeScript.js but that is not needed. Instead, just add id and strategy to the script that is in the layout.js file.

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.