Next.js makes developing React applications simpler. It provides a common structure that allows you to build frontend React applications, and transparently handles server-side rendering for you.
We just released a full course on the freeCodeCamp.org YouTube channel that will teach you the basics of Next.js.
Kapehe developed the course. She is a devrel specialist at Sanity.io and she is an excellent teacher.
In this course, you will learn how to be proficient with Next.js. 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.
Here are the sections covered in this course:
- What is Next.js
- Tools: Node.js, VS Code, and the command line
- Setting up Next.js
- Setting the Sanity Studio CMS
- Connecting Next.js with your content lake
- Making a simple navigation bar in _app.js
- Making your first page template in index.js
- Setting up dynamic routes with [slug].js
- Diving into data fetching and pre-rendering with getStaticPaths & getStaticProps
- Create a like button with API routes and serverless functions
- Adding live real-time preview with Sanity.io's content lake
- Set up automatic deployment with GitHub and Vercel
- Summary: What you have learned and next steps
Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch).