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.