Next.js for Beginners - Full Course

Published: 01 June 2021
on channel: freeCodeCamp.org
224,323
5.7k

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:    / betterdevs  

💻 Code: https://github.com/sanity-io/next-rec...

🔗 Sign up for Sanity.io here: https://www.sanity.io/

⭐ Resources ⭐
🔗 https://nextjs.org/docs
🔗 https://www.sanity.io/docs
🔗 https://www.vercel.com

⭐️ 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


Watch video Next.js for Beginners - Full Course online without registration, duration hours minute second in high quality. This video was added by user freeCodeCamp.org 01 June 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 224,32 once and liked it 5.7 thousand people.