Build a Blog with Next.js and a Headless CMS (Strapi)

In this video we'll build a blog application from scratch, starting with only a simple design in Photopea. I will first implement the design to a modern front-end web application using the Next.js framework and React.js. After that we will setup a Headless Content Management System (CMS) and integrate it with Next.js. I will also demonstrate how to setup next so that it statically generates all of the blog pages during build time for optimal performance. Along the way we'll touch on multiple interesting concepts, such as project structure, utility-based stylesheets (CSS) architecture, building reusable and responsive card components with container queries, fetching data with async/await and more. 0:00 Introduction 0:24 Design 0:46 Create a Next.js Application 4:15 Adding SASS and Global Styles 6:55 Grid System 12:48 Fonts 15:05 Typography 18:30 Header Component 22:12 Footer Component 25:25 Card Component 1:00:05 Blog Details Page 1:06:04 Headless CMS (Strapi) Setup 1:14:44 Integrate Strapi with Next.js References: https://nextjs.org/docs https://docs.strapi.io/dev-docs/intro Social Media: Email: [email protected] Twitter:   / nikelaz   LinkedIn:   / nikola-lazarov   #headless #cms #nextjs