🔴 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