Summary
Keywords
Full Transcript
❗️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 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
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
