Learn how to use Next.js to build an SEO-optimized blog using. Also, use TailwindCSS, contentlayer, Supabase, an dmore. The course covers building a homepage, blog pages, category pages, an about page, and a contact page. Also, you'll learn to implementing powerful SEO strategies for higher Google rankings. Our blog features both dark and light themes, offering a minimal and elegant design that's fully responsive on mobile devices. Plus, you'll discover how to showcase your Markdown-based blogs easily on this website. Course developed by @CodeBucks ✏️ Starter Code: https://github.com/codebucks27/Nextjs-contentlayer-blog
✏️ Final Code: https://github.com/codebucks27/Nextjs-tailwindcss-blog-template ⭐️ Contents ⭐️
⌨️ (0:00:00) Intro + Demo
⌨️ (0:10:10) Setup and Installation
⌨️ (0:13:34) Tailwind CSS Setup, Dark Mode and project files
⌨️ (0:19:09) Adding Fonts
⌨️ (0:26:56) Navbar Component
⌨️ (0:46:31) Setup Contentlayer
⌨️ (1:08:31) How to render a Blog
⌨️ (1:13:11) Creating Home Cover Section
⌨️ (1:34:16) Featured Posts Component
⌨️ (1:50:11) Recent Posts Component
⌨️ (2:00:46) Footer Component
⌨️ (2:16:31) Blog Page
⌨️ (3:02:06) Creating TOC Component
⌨️ (3:20:51) Category Page
⌨️ (3:45:31) About page
⌨️ (3:58:26) Contact page
⌨️ (4:14:11) Insights Component
⌨️ (4:23:41) Store blog views using Supabase
⌨️ (4:49:16) Adding SEO
⌨️ (5:18:36) Adding Dark Mode
⌨️ (5:30:36) Making it Responsive
⌨️ (6:39:24) Adding Sitemap
⌨️ (6:43:12) Image Optimization
⌨️ (6:49:08) Adding Favicon and manifest file
⌨️ (7:02:11) Adding google's structured json-ld for SEO Correction:
6:55:15 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. 🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan 👾 Oscar Rahnama — Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news