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

        

For Demo checkout following links👇:
Nextjs Personal Blog Website

Starter Code Files👇:
Nextjs Personal Blog Website Starter Code

If you want to learn how to create it please follow below tutorial👇:
https://youtu.be/1QGLHOaRLwM

---

✨ Checkout my brand new Saas application -> AI Headshot Generator

---

Checkout My Personal blog: DevDreaming

---

NOTE: In the youtube tutorial I have used contentlayer for the markdown files. Since contentlayer is not actively maintained, I have switched to Velite.js for the markdown files. If you want to checkout the contentlayer please switch to the contentlayer branch.

---

🚀 2026 Modernization Update

The repo has been refreshed to run on the latest stable versions of every dependency. Highlights:

• Bun is now the package manager (bun install, bun dev, bun run build).
• Next.js 16 with Turbopack as the default for dev and build.
• React 19.
• Tailwind CSS v4 — CSS-first config in src/app/globals.css (@theme, @custom-variant dark, @plugin); tailwind.config.js removed and @tailwindcss/postcss replaces autoprefixer.
• ESLint 10 flat config (eslint.config.mjs) with next/core-web-vitals.
• Shiki 4 + latest rehype-pretty-code, velite, @supabase/supabase-js, react-hook-form, next-sitemap, sharp, and all rehype/remark plugins.
• Velite now runs as a predev / prebuild script (Turbopack does not support the old custom webpack plugin).
• Async params migration applied to dynamic routes for Next 16.

Looking for the old version? The pre-update code is preserved in git history — check out commit 186f9ee (or any commit before this update) to use the original Next.js 15 + Tailwind v3 + ESLint 9 setup from the YouTube tutorial.

---

⭐DO NOT FORGET TO STAR THIS REPO⭐

Images of The Portfolio Website:

Home

About

Contact

For more Images please check the project images folder from this repo or check the demo link.

Resources Used in This Project

• Character image in the About page created by using [Bing Search[(https://www.bing.com/).
• Lottie animation in the contact page: from here
• Fonts from https://fonts.google.com/
  
• Icons from https://iconify.design/
  

All the images used in the blogs:

• Photo by Carlos Muza on Unsplash
• Photo by Marvin Meyer on Unsplash
• Photo by Paul Esch-Laurent on Unsplash
• Photo by Kelly Sikkema on Unsplash
• Photo by Lauren Mancke on Unsplash
• Photo by Luca Bravo on Unsplash
• Photo by Christina @ wocintechchat.com on Unsplash
• Photo by C D-X on Unsplash
• Photo by charlesdeluvio on Unsplash
• Photo by Emile Perron on Unsplash
• Photo by Roman Synkevych on Unsplash

This is a Next.js project bootstrapped with create-next-app.