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 frontend 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, utilitybased 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/devdocs/intro

Social Media:
Email: [email protected]
Twitter:   / nikelaz  
LinkedIn:   / nikolalazarov  

#headless #cms #nextjs