In this Video, we are going to build full news Blog Website with the help of NEXT JS and Strapi Headless CMS in 7 hour. While building this you will also learn basic concept of Next JS.

Below is the timestamp
0:00 Introduction
0:40 Application Demo
13:45 Important Note
15:58 What is Next JS ?
20:00 Set-up Next JS Project
22:15 Understanding Next JS Folder
25:14 Creating About Page
28:53 Understand Dynamic Route
32:05 Understand Navigation
34:52 Understand Head in Next JS
37:26 Creating Layout for Our App
47:06 Shorter Import path
53:06 Working on Header
57:22 Working on Footer
59:17 Working on Hero Component
01:03:12 Configure API folder
01:06:47 Understand data fetching in Next JS
01:11:39 Working on Homepage
01:16:19 Creating Custom 404 page
01:20:39 Working on each news item component
01:30:59 Working on Single News Page
01:41:30 Fixing common API issue
01:47:37 Configure env variable
01:49:17 Configure Strapi CMS and Next JS Starter Project(i.e. if you skip basic of Next JS)
01:56:23 Set-Up Cloudinary in Strapi Backend
02:03:04 Creating collection in Strapi
02:08:24 Replacing API route with Strapi API
02:12:54 Configure Cloudinary in Next JS App
02:19:24 Working on Add News Page
02:40:34 Adding Edit and Delete Button
02:41:54 Working on Edit News Page
02:46:44 Working on Delete News
02:55:04 Working on Image Upload
03:16:44 Working on Search Functionality
03:34:24 Working on Pagination
03:48:54 Working on Signin Page
03:59:44 Working on Signup Page
04:05:44 Set-up context in our App
04:26:00 Working on Signin API
04:48:54 Persisting user in our App
04:57:24 Working on Signout
05:01:14 Working on Signup API
05:07:44 Creating Custom user news API in Strapi
05:24:54 Working on Dashboard
05:40:38 Creating User Policy
05:55:58 Apply User Policy in our Front-end
06:12:08 Added user info on each news article
06:14:58 Integrating Disqus Comment in our App
06:30:48 Working on Scroll to Top
06:40:28 Final Touch

Resource file for this Project :- https://github.com/trickjsprogram/sport-news-resource
Next JS Starter Project :- https://github.com/trickjsprogram/next-js-strapi

#nextjs #javascript #react