Next.js for Beginners – Full Course

Wordpress sites

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:
🎥 On YouTube:

💻 Code:

🔗 Sign up for Sanity.io here:

⭐ Resources ⭐
🔗
🔗
🔗

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

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

42 thoughts on “Next.js for Beginners – Full Course”

  1. This is really good ,I’ve been looking for a frame work that makes freelancing easier

  2. Zachary Zynda

    I listen to most of these videos in the background while I’m driving or traveling for work. She has by far the best voice for long videos. Easy to listen to and follow along without watching!

  3. Thank you so much for this opportunity. Making this video was a lot of fun.

    I did notice one section accidentally got cut out, that’s my bad! 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!

    Thanks for watching!

    1. @Jimmy Briggs Yeah, thanks I realise that now. But my point still stands, this should have been in the video. If a mistake was made in the content of the video, it should have been rectified properly.

    2. Sabino Ramirez

      @Duane McDonald i tried it and got confused. You would have to modify next.config.js to include an entry for images and domains and pass it cdn.sanity.io.. also in this examples useCdn is set to false so I don’t even know if it’s possible like that. Then there’s the part where

    3. @Kapehe at 1:23:41 when importing the data from our sanity.js file I did realise that Sanity has updated their method of importing sanity data in 2022 which will give an error that imagebuilder ,clientdata and other imported data are not functions this is the imports in the sanity.js file, this is kinda a headache to solve it would be good if you can revisit the GitHub repo and adapt it suit sanity’s style of implementation in 2022, I might have to stop the program half way and have been learning alot, thanks once again

  4. Xasan Valiyev

    Great and awesome work .Thanks for this course Kapehe. I wish you success in future

  5. Definitely appreciate this in-depth tutorial, but it feels like this would be a lot more simple with a static HTML file and a Cloudflare service worker/Netlify cloud function.

    1. Yeah, but then you lose a lot of the modularity and reusability that you get with React, which is why Next is mainly used for larger production builds.

  6. ÖMER KARATAŞ

    Thank you for your time to prepare this tutorial, but most of the video is about Sanity not about NextJS features. I was expecting focus on more NextJS, but I have watched like a Sanity tutorial.

  7. Abhishek Kumar Pandey

    Please make an advance Tutorial on NextJS, this was a great Tutorial, Thank You 😊

  8. I’m having trouble with the pulling data into the Home function part. I’m getting an error saying unhandled runtime error.
    TypeError: Cannot read properties of undefined (reading ‘recipes’)
    const recipes = data.recipes; this is the line that is throwing an error

  9. Hello @Kapehe, I really enjoyed the course! My first Next.js app and first time using Sanity and it’s so easy! I love it. I do however have trouble getting the images on my frontend using forUrl. The error I get is: Server Error
    Error: Unable to resolve image URL from source (undefined) Any Idea what this can be? Help would be apprciated 🙂 Thanks for the video too!

  10. It’s actually more sanity than next.js. But very informative and useful nonetheless! Thank you!

    1. thats the reason why i dropped video after 10 minutes, “lets learn next.js, oh btw we need to spend 1.5 hour setting up all external services to show of the demo that we will be building today”

  11. Hi Kapehe, can I create this app with TypeScript? Thanks teacher, really nice course!

  12. cant believe I fell for it.. after more than half of the video, I realized this was more of an advertisement for sanity than tutorial for nextjs

Comments are closed.