Make Next js Home Page Dynamic with WordPress + WPGraphQL | Slider & Properties | Exp 5

In this video, we continue building a real estate website using Next.js, WordPress and WPGraphQL. We take the static Home page and start making it dynamic by connecting the frontend with data from WordPress. 🚀 What we cover in this video Install and configure Swiper Create a reusable GraphQL client Organize GraphQL queries in a separate queries folder Fetch Home page Hero Slider data from WordPress Make the Hero Slider dynamic using Swiper + WPGraphQL Fetch Popular Properties from WordPress Create a reusable PropertyCard component Create a reusable PropertySlider component Display dynamic properties from WordPress Make the property slider responsive for desktop, tablet and mobile This is part of my step-by-step Headless WordPress + Next.js + WPGraphQL series where we are building the project from scratch. 🙋 About Me I’m Sandeep Jain, a WordPress developer with 13+ years of experience, currently focusing on Headless WordPress, Next.js, React and WPGraphQL development. If you are enjoying this series, please LIKE the video 👍 and SUBSCRIBE to the channel 🔔. Your support helps me continue creating the next parts of this series. 👉 Subscribe here:    / @sandeepjainwp   💻 Source Code GitHub: https://github.com/sandeepjain2015/he... Video 5 changes: https://github.com/sandeepjain2015/he... 🤝 Hire Me Looking for an experienced WordPress / Headless WordPress / Next.js developer? https://sandeepjain.in/hire-me/ LinkedIn:   / sandeep-jain-wp   🎥 Check Out My Other Videos https://sandeepjain.in/all-youtube-vi... 📺 Playlists Headless WooCommerce + Next.js:    • WooCommerce + Next.js   WooCommerce Development:    • WooCommerce   💳 Cashfree Payments Looking for a payment gateway for your website/app? Sign up for Cashfree Payments using my referral link and get reduced transaction rates! 🔹 Standard rate: 1.95% 🔹 Special rate via my link: 1.70% 👉 Sign up now: https://merchant.cashfree.com/merchan... 🌐 Best Hosting Deal — Hostinger https://hostinger.in?REFERRALCODE=KR1... Cloud Startup - 20% off https://www.hostinger.in/cart?product... Cloud Professional - 20% off https://www.hostinger.in/cart?product... Cloud Enterprise - 20% off https://www.hostinger.in/cart?product... 🔔 Don't Miss the Next Episode If you're learning Headless WordPress + Next.js, make sure you subscribe and turn on notifications so you don't miss the next episode. In the next video, we'll continue working on the Home page and build more sections of the project. #HeadlessWordPress #Nextjs #WPGraphQL #WordPress #GraphQL #React #HeadlessCMS #WebDevelopment #NextjsTutorial #WordPressDeveloper