Create Pages & Fetch Data in Next.js Using Static & Dynamic Routes

Published: 01 October 2021
on channel: Colby Fayock
28,830
744

Learn how to create static and dynamic routes in Next.js and fetch dynamic data to build a variety of pages. We'll use The Last Airbender API to work through getStaticProps, getStaticPaths, and getServerSideProps.

🧐 What's Inside
00:00 - Intro to Creating Pages in Next.js
00:19 - Tools we'll use including Next.js and data fetching
01:59 - Starting a new Next.js application with Next.js
03:04 - Creating a basic new Next.js page
03:44 - Using getStaticProps to add dynamic data to a static Next.js page
07:34 - Dynamically building static pages with getStaticProps and getStaticProps
18:80 - Rendering a dynamic page on the server with getServerSideProps
23:32 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-c...

💾 Code
https://github.com/colbyfayock/my-las...

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...

🐦 Get updates straight to your Twitter @colbyfayock
  / colbyfayock  

📸 Catch the next stream live on Twitch @colbyfayock
  / colbyfayock  

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses

🧰 More Resources

The Last Airbender API
https://last-airbender-api.herokuapp....

Next.js Pages
https://nextjs.org/docs/basic-feature...

Next.js Data Fetching
https://nextjs.org/docs/basic-feature...

🎼 Music
Know Myself
Patrick Patrikios
YouTube Audio Library

#colbyfayock #nextjs #jamstack #ssg #ssr #webdevelopment