Next.js for Beginners Full Tutorial

Learn how to get started with the Next.js JavaScript framework. Through building a full-stack recipe app with Next.js, Sanity.io, and Vercel, you will 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.

Next.js has the best-in-class “Developer Experience” and many built-in features; a sample of them are:

  • An intuitive page-based routing system (with support for dynamic routes)
  • Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
  • Automatic code splitting for faster page loads
  • Client-side routing with optimized prefetching
  • Built-in CSS and Sass support, and support for any CSS-in-JS library
  • Development environment with Fast Refresh support
  • API routes to build API endpoints with Serverless Functions
  • Fully extendable
  • Next.js is used in tens of thousands of production-facing websites and web applications, including many of the world’s largest brands.

Video producer: https://www.freecodecamp.org/

⚠️ There is a 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!