Next.js Beginner Course: Get Started π
Learn Next.js fundamentals and get proficient. Note: Minor correction at 5:15 to reach the starting point.

freeCodeCamp.org
235.2K views β’ Jun 1, 2021

About this video
Learn how to get started and get proficient with Next.js.
β οΈ Minor error in course- At 5:15, to get to that Next.js starting point, please do the following:
1. Run the command: `npx create-next-app next-recipe-app`, let that build
2. Go into the folder: `cd next-recipe-app`
3. Open in your code editor of choice!
Through building a full-stack recipe app with Next.js, Sanity.io, and Vercel, you'll learn how to set up dynamic routing, pre-render, pull content from external APIs, set up serverless functions, offer real-time content previews, and deploy your app on the web.
βοΈ Your instructor for this course is Kapehe, devrel specialist at Sanity.io.
π Kapehe's website: https://kapehe.io
π₯ On YouTube: https://www.youtube.com/c/BetterDevs
π» Code: https://github.com/sanity-io/next-recipe-app
π Sign up for Sanity.io here: https://www.sanity.io/
β Resources β
π https://nextjs.org/docs
π https://www.sanity.io/docs
π https://www.vercel.com
β€οΈ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)
βοΈ Course Contents βοΈ
β¨οΈ (0:00:00) Introduction
β¨οΈ (0:02:52) What is Next.js
β¨οΈ (0:04:05) Tools: Node.js, VS Code, and the command line
β¨οΈ (0:05:15) Setting up Next.js
β¨οΈ (0:10:02) Setting the Sanity Studio CMS
β¨οΈ (0:53:12) Connecting Next.js with your content lake
β¨οΈ (1:04:54) Making a simple navigation bar in _app.js
β¨οΈ (1:10:45) Making your first page template in index.js
β¨οΈ (1:30:15) Setting up dynamic routes with [slug].js
β¨οΈ (1:36:14) Diving into data fetching and pre-rendering with getStaticPaths & getStaticProps
β¨οΈ (2:01:36) Create a like button with API routes and serverless functions
β¨οΈ (2:16:46) Adding live real-time preview with Sanity.io's content lake
β¨οΈ (2:25:11) Set up automatic deployment with GitHub and Vercel
β¨οΈ (2:35:18) Summary: What you have learned and next steps
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
β οΈ Minor error in course- At 5:15, to get to that Next.js starting point, please do the following:
1. Run the command: `npx create-next-app next-recipe-app`, let that build
2. Go into the folder: `cd next-recipe-app`
3. Open in your code editor of choice!
Through building a full-stack recipe app with Next.js, Sanity.io, and Vercel, you'll learn how to set up dynamic routing, pre-render, pull content from external APIs, set up serverless functions, offer real-time content previews, and deploy your app on the web.
βοΈ Your instructor for this course is Kapehe, devrel specialist at Sanity.io.
π Kapehe's website: https://kapehe.io
π₯ On YouTube: https://www.youtube.com/c/BetterDevs
π» Code: https://github.com/sanity-io/next-recipe-app
π Sign up for Sanity.io here: https://www.sanity.io/
β Resources β
π https://nextjs.org/docs
π https://www.sanity.io/docs
π https://www.vercel.com
β€οΈ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)
βοΈ Course Contents βοΈ
β¨οΈ (0:00:00) Introduction
β¨οΈ (0:02:52) What is Next.js
β¨οΈ (0:04:05) Tools: Node.js, VS Code, and the command line
β¨οΈ (0:05:15) Setting up Next.js
β¨οΈ (0:10:02) Setting the Sanity Studio CMS
β¨οΈ (0:53:12) Connecting Next.js with your content lake
β¨οΈ (1:04:54) Making a simple navigation bar in _app.js
β¨οΈ (1:10:45) Making your first page template in index.js
β¨οΈ (1:30:15) Setting up dynamic routes with [slug].js
β¨οΈ (1:36:14) Diving into data fetching and pre-rendering with getStaticPaths & getStaticProps
β¨οΈ (2:01:36) Create a like button with API routes and serverless functions
β¨οΈ (2:16:46) Adding live real-time preview with Sanity.io's content lake
β¨οΈ (2:25:11) Set up automatic deployment with GitHub and Vercel
β¨οΈ (2:35:18) Summary: What you have learned and next steps
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Video Information
Views
235.2K
Likes
5.8K
Duration
02:38:25
Published
Jun 1, 2021
User Reviews
4.7
(47) Related Trending Topics
LIVE TRENDSRelated trending topics. Click any trend to explore more videos.
No specific trending topics match this video yet.
Explore All Trends