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

Опубликовано: 04 Сентябрь 2023
на канале: CodeBucks

42,129

1.3k

Tutorial😇 to build a amazing static blog using Nextjs, Tailwind css and contentlayer that has great lighthouse score.

Demo Link🖤: https://create-blog-with-nextjs.verce...

-----------------------------------------------
Need Web Development or AI Solutions Services? 🚀
Let's bring your ideas to life!
Contact Me From Here: https://tally.so/r/wdlj0N
-----------------------------------------------

Contentlayer documentation link (Temporary): https://website-git-new-landing-page-...

-----------------------------------------------------------------------------------------------------------
Starter CODE:
➡ Link 💚: https://github.com/codebucks27/Nextjs...

Final CODE:
➡ Link 1💚(Give ⭐ to the repo): https://github.com/codebucks27/Nextjs...
➡ Link 2💚(If you want to support the channel): https://codebucks.lemonsqueezy.com
This link contains all the code which is used in the Video

🔴NOTE: At @06:55:15 we have created one file called ThemeScript.js, there is no need to do that instead just add id and strategy to the script that is in the layout.js file.
-----------------------------------------------------------------------------------------------------------

Hey there 👋,

In this comprehensive coding tutorial, you'll learn how to create a stunning static blog website with Next.js, Contentlayer, and Tailwind CSS. We'll cover everything from building a homepage, blog pages, category pages, an about page, and a contact page, 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.

For this project, we're going to use,
▶️ Next Js
▶️ Tailwind CSS for styling
▶️ Contentlayer to render Markdown blogs
▶️ Supabase to count and display blog page views
▶️ Lottie Animation
▶️ React hook form
▶️ Next Sitemap to create sitemap of the website
▶️ Google's structured json-ld schema for SEO

Don't forget to watch the whole video, we're going to learn a lot of stuff like:
▶️ Setting up a Static Blog with Next.js
▶️ New Next.js App router
▶️ Designing a Beautiful Homepage
▶️ Creating Engaging Blog and Category Pages
▶️ Crafting an Informative About Page
▶️ Building an Interactive Contact Page
▶️ Implementing Powerful SEO Techniques
▶️ Adding Dark and Light Themes
▶️ Ensuring Mobile Responsiveness
▶️ Showcasing Markdown Blogs
▶️ Different methods to highlight code blocks and use themes

Watch the full video to understand, so that you can easily build and customize your own website.

Timestamps⌛:
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

𝗙𝗼𝗹𝗹𝗼𝘄 𝗺𝗲 𝗼𝗻 👇 𝘄𝗵𝗲𝗿𝗲 𝗜'𝗺 𝘀𝗵𝗮𝗿𝗶𝗻𝗴 𝗹𝗼𝘁'𝘀 𝗼𝗳 𝘂𝘀𝗲𝗳𝘂𝗹 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀!
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: [email protected]

In upcoming videos, I'm going to create lots of cool stuff with JavaScript and React so make sure to subscribe.

Like, Sub🥂 & Share! ♥

Learn More About,

🔥How to Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion🌟
   • How to Create a Stunning Portfolio We...

🔥⭐Build Feature Rich Crypto Screener App with Tailwind CSS
   • React Website Tutorial: ⭐Build Featur...

🔥Build awesome 3D landing page for Apple iPhone using ReactJS + ThreeJS + GSAP
   • 🔥Build awesome 3D landing page for Ap...

🔥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]
   • 🔥Build a Stunning Fashion Studio Webs...

🔥Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ]
   • 🔥Build a Stunning Portfolio Website w...

If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.

Thank You for watching! 😉

Where else you can find me:
Twitter🐤 :   / code_bucks
LinkedIn 🔗:   / codebucks
Instagram 📫:   / code.bucks
Email 📧: [email protected]

Disclaimer:
All videos are for educational purposes only, please use them wisely.

#nextjs
#tailwindcss
#blogwebsite