Next.js Blog Tutorial: Build SEO Optimized Blog with Next.js, Contentlayer, and Tailwind CSS 🔥

Overview

In this step-by-step tutorial, you'll learn how to create a stunning, responsive static blog with Next.js, Tailwind CSS, and Contentlayer. The project focuses on delivering exceptional performance with a high Lighthouse score, clean SEO strategies, and an elegant design featuring both dark and light modes.

Not only does this project ensure a smooth user experience, but it also makes managing Markdown-based blogs effortless. Follow along and create a powerful blog website that stands out.

Demo Link: Static Blog Demo
Support: Buy Me Coffee

What You’ll Learn

By the end of this tutorial, you’ll be able to:

• Set up a static blog using Next.js.
• Leverage the new Next.js App Router for efficient navigation.
• Design an aesthetically pleasing homepage and dynamic blog pages.
• Create an engaging About Page and a functional Contact Page.
• Implement dark and light themes for seamless user experience.
• Master key SEO techniques like structured JSON-LD schema and sitemap creation.
• Showcase and manage Markdown blogs effectively.
• Highlight code blocks with themes, animations, and more.

Key Features of This Portfolio Website

1. High Lighthouse Score: Optimized for performance, accessibility, and SEO.
2. SEO-Ready: Includes Google structured data, sitemap, and meta-tags.
3. Dark/Light Themes: Toggle between elegant themes for day and night use.
4. Responsive Design: Works flawlessly across all devices.
5. Markdown Support: Easily showcase and manage blog posts.
6. Analytics: Tracks blog views using Supabase.
7. Modern Animations: Lottie animations bring the site to life.
8. Code Syntax Highlighting: Visually appealing and readable code blocks.

Libraries Used

This project uses a variety of tools and libraries to deliver a polished blog experience:

• Next.js: Framework for React-based websites.
• Tailwind CSS: For styling and responsive design.
• Contentlayer: To render Markdown blogs (with an alternative option using Velite.js).
• Supabase: To count and display blog page views.
• Lottie Animation: For modern, dynamic visuals.
• React Hook Form: Simplifying form handling.
• Next Sitemap: Automates sitemap creation.
• Google's JSON-LD Schema: Boost SEO with structured data.

Code Links

Here’s where you can access the source code for this project:

1. Starter Code: GitHub Link
2. Final Code (Contentlayer): GitHub Link
3. Updated Code (Velite.js): GitHub Link

Resources

Here’s a list of resources used in this project:

• Character Image on About Page: Bing Image Search
• Lottie Animations: LottieFiles
• Fonts: Google Fonts
• Icons: Iconify

Time Stamps

Find the key milestones in the video tutorial below:

• Intro + Demo @00:00:00
• Setup and Installation @00:09:34
• Tailwind CSS Setup, Dark Mode and project files @00:12:58
• Adding Fonts @00:18:33
• Navbar Component @00:26:20
• Setup Contentlayer @00:45:55
• How to render a Blog @01:07:55
• Creating Home Cover Section @01:12:35
• Featured Posts Component @01:33:40
• Recent Posts Component @01:49:35
• Footer Component @02:00:10
• Blog Page @02:15:55
• Creating TOC Component @03:01:30
• Category Page @03:20:15
• About Page @03:44:55
• Contact Page @03:57:50
• Insights Component @04:13:35
• Store Blog Views using Supabase @04:23:05
• Adding SEO @04:48:40
• Adding Dark Mode @05:18:00
• Making it Responsive @05:30:00
• Adding Sitemap @06:38:48
• Image Optimization @06:42:36
• Adding Favicon and Manifest File @06:48:32
• Adding Google’s Structured JSON-LD for SEO @07:01:35