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

  
  
  <br />

For Demo checkout following links👇: <br />
Nextjs Personal Blog Website <br />

Starter Code Files👇: <br />
Nextjs Personal Blog Website Starter Code <br />

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

---

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

---

Checkout My Personal blog: DevDreaming<br />

---

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/ <br />
• Icons from https://iconify.design/ <br />

All the images used in the blogs:

• Photo by <a href="https://unsplash.com/@kmuza?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Carlos Muza</a> on <a href="https://unsplash.com/photos/hpjSkU2UYSU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@marvelous?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Marvin Meyer</a> on <a href="https://unsplash.com/photos/SYTO3xs06fU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@pinjasaur?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Paul Esch-Laurent</a> on <a href="https://unsplash.com/photos/oZMUrWFHOB4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@kellysikkema?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kelly Sikkema</a> on <a href="https://unsplash.com/photos/-1_RZL8BGBM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@laurenmancke?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Lauren Mancke</a> on <a href="https://unsplash.com/photos/aOC7TSLb1o8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@lucabravo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Luca Bravo</a> on <a href="https://unsplash.com/photos/XJXWbfSo2f0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@wocintechchat?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Christina @ wocintechchat.com</a> on <a href="https://unsplash.com/photos/OtHEYbQXLFU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@cdx2?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">C D-X</a> on <a href="https://unsplash.com/photos/PDX_a_82obo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@charlesdeluvio?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">charlesdeluvio</a> on <a href="https://unsplash.com/photos/cZr2sgaxy3Q?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@emilep?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Emile Perron</a> on <a href="https://unsplash.com/photos/xrVDYZRGdw4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
• Photo by <a href="https://unsplash.com/@synkevych?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Roman Synkevych</a> on <a href="https://unsplash.com/photos/vXInUOv1n84?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

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