Let’s build a LIVE NEWS APP with Next.js 13 (TypeScript, StepZen, Tailwind, Dark Mode, GraphQL)

Sonny Sangha

StepZen has hooked us up with a Customized FREE plan… Check it out! https://stepzen.com/signup?utm_source=papareact&utm_medium=videotutorial

Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

Join my Community, “University of Code” for FREE: https://www.universityofcode.com

LOOKING FOR THE CODE?
https://links.papareact.com/github

Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

Join me as I build a Real-Time News App with Next.js 13. You’ll learn the following in this build:

How to handle Dynamic data (SSR alternative in Next.js 13)
How to handle Static data with updates (ISR alternative in Next.js 13)
How to build a fully responsive website with Tailwind CSS
How to add Dark mode to your app!
Ability to search the News API via keywords, categories and more!
Leverage the power of Server components in Next.js 13 (and how to use client components alongside them correctly!)
How to use the new App folder structure in Next.js 13!
Dynamic page routing in Next.js 13
How to Pull data from the MediaStack News API in an efficient + optimized manner to prevent overloading the API quota
How to use Stepzen to launch a GraphQL interface which we query from via the newly updated FETCH API (with next.js 13 revalidation & caching additions!)
How to use Typescript to reduce the overall number of Bugs and Errors
How to deploy the final build on Vercel!

+ So Much More!

WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here https://links.papareact.com/newsletter

FOLLOW ME HERE:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord

WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPA Merch: https://links.papareact.com/merch

TIMESTAMPS:
00:00 Introduction
00:32 Build Showcase
02:00 StepZen Sponsorship
4:04 University of Code
04:47 Build Tech
07:41 Setting Up Next.js 13 & Tailwind CSS
12:55 Implementing Next.js 13 Features
19:31 Building the Header Component
28:07 Creating the Nav Links Component
29:14 Setting up Type Definitions
30:21 Building the Nav Links Component (1/2)
31:33 Building the Nav Link Component
32:07 Building the Nav Links Component (2/2)
39:39 Building the Search Box Component
50:24 Building the Home Page
53:59 Building the Fetch News Function (1/2)
56:36 Implementing GraphQL Request Library
57:47 Implementing Mediastack API
1:01:45 Implementing StepZen
1:23:00 Building the Fetch News Function (2/2)
1:37:19 Building the News List Component (1/2)
1:38:26 Creating the Article Component
1:38:58 Building the News List Component (2/2)
1:40:45 Building the Article Component
1:47:54 Implementing Line Clamp for Tailwind CSS
1:49:49 Adding Dark Mode (1/2)
1:52:31 Implementing Next Themes Library
1:53:46 Adding Dark Mode (2/2)
2:00:26 Implementing the Read More Button
2:04:42 Building the Article Page
2:11:53 Implementing the Search Functionality
2:15:39 Implementing Dynamic Routing in Next.js 13
2:21:41 Implementing Live Timestamp Functionality
2:24:08 Final Build Demo
2:25:37 Implementing a Loading State
2:27:36 Deploying to Vercel
2:33:28 Final Deployed Build Demo
2:37:39 Outro

Let’s get it PAPAFAM .

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with any News Channels and/or it’s subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.

#nextjs13 #reactjs #typescript #stepzen #javascript