# Next.js Blog Tutorial: Build SEO Optimized Blog with Next.js, Contentlayer, and Tailwind CSS 🔥 > Build a stunning static blog with Next.js, Tailwind CSS, and Contentlayer. Achieve top-notch performance, SEO, and elegant design with dark/light modes and Markdown support. - **Source:** DevDreaming (https://devdreaming.com) - **Canonical URL:** https://devdreaming.com/videos/nextjs-seo-optimized-blog-tutorial-with-contentlayer-and-tailwind-css - **Author:** CodeBucks - **Published:** 2023-09-03 - **Last updated:** 2025-01-26 - **Topics:** Web App, Tailwind CSS, Next.js --- **[▶ Watch on YouTube](https://www.youtube.com/watch?v=1QGLHOaRLwM)** ### 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](https://create-blog-with-nextjs.vercel.app/) **Support**: [Buy Me Coffee](https://codebucks.gumroad.com/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](https://github.com/codebucks27/Nextjs-contentlayer-blog) 2. **Final Code (Contentlayer)**: [GitHub Link](https://github.com/codebucks27/Nextjs-tailwindcss-blog-template/tree/Contentlayer) 3. **Updated Code (Velite.js)**: [GitHub Link](https://github.com/codebucks27/Nextjs-tailwindcss-blog-template) ### Resources Here's a list of resources used in this project: - Character Image on About Page: [Bing Image Search](https://www.bing.com/) - Lottie Animations: [LottieFiles](https://lottiefiles.com/animations/sloth-meditate-SzNofNFhYY) - Fonts: [Google Fonts](https://fonts.google.com/) - Icons: [Iconify](https://iconify.design/) ### Time Stamps Find the key milestones in the video tutorial below: - Intro + Demo [@00:00:00](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=0s) - Setup and Installation [@00:09:34](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=574s) - Tailwind CSS Setup, Dark Mode and project files [@00:12:58](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=778s) - Adding Fonts [@00:18:33](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=1113s) - Navbar Component [@00:26:20](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=1580s) - Setup Contentlayer [@00:45:55](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=2755s) - How to render a Blog [@01:07:55](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=4075s) - Creating Home Cover Section [@01:12:35](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=4355s) - Featured Posts Component [@01:33:40](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=5620s) - Recent Posts Component [@01:49:35](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=6575s) - Footer Component [@02:00:10](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=7210s) - Blog Page [@02:15:55](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=8155s) - Creating TOC Component [@03:01:30](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=10950s) - Category Page [@03:20:15](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=12015s) - About Page [@03:44:55](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=13495s) - Contact Page [@03:57:50](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=14270s) - Insights Component [@04:13:35](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=15215s) - Store Blog Views using Supabase [@04:23:05](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=15785s) - Adding SEO [@04:48:40](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=17320s) - Adding Dark Mode [@05:18:00](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=19080s) - Making it Responsive [@05:30:00](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=19800s) - Adding Sitemap [@06:38:48](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=23928s) - Image Optimization [@06:42:36](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=24156s) - Adding Favicon and Manifest File [@06:48:32](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=24472s) - Adding Google's Structured JSON-LD for SEO [@07:01:35](https://www.youtube.com/watch?v=1QGLHOaRLwM&t=25295s) --- ## Related on DevDreaming - [All Video Tutorials](https://devdreaming.com/videos) - [Blog & Tutorials](https://devdreaming.com/blogs) - [Free Developer Tools](https://devdreaming.com/tools) --- _This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._