Production-Grade Next.js

Scott Moss

Scott Moss

Superfilter AI
3 hours, 57 minutes CC
Production-Grade Next.js

Course Description

Take Next.js to the next level through building a production-ready, full-stack React app. You’ll add authentication to your app, add the ability to generate hundreds of pages performantly, preview your content, query a database, and use a CMS with Next.js. Then deploy your app to production using the Vercel platform. No matter if you're making a blog, marketing page, or a full-stack app, Next.js has the tools for you!

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: March 2, 2021

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 18 minutes

Dynamic Content

Section Duration: 1 hour, 14 minutes
  • Dynamic Content & Static Routes
    Scott explains the benefits of making an application with dynamic content including increasing production by avoiding hard coded mistakes, briefly mentions headless CMS. The getStaticProps method can be used to add dynamic content to a page by making a call to a custom built CMS.
  • Dynamic Content & Dynamic Routes
    Scott briefly recaps the project files that hold application's content, implements getStaticProps on the index page to pull data from the CMS, and returns the data using a package called matter. Content routes are also implemented to pull from .mdx file systems using Next.js to avoid bundling code on the browser.
  • Set Up Dynamic Paths with getStaticPaths
    Scott live codes a dynamic page with static paths using getStaticPaths to provide Next.js a path to generate at build time. The meaning of fallback is also discussed and how the fallback state effects the length of build time by altering content generation.
  • Dynamic Content Q&A
    Scott answers students' questions regarding executing child processes in the background, caching in Next.js, where the CSS is located, and including getStaticProps to pull data. How to handle fallback for data that doesn't exist, if client-side data can be accessed with getStaticProps, and functions order of execution are also covered in this segment.
  • Render Content with getStaticProps
    Scott live codes page error handling using getStaticProps to check for matching slugs in the file systems and demonstrates how to render content using getStaticProps and renderToString to pull the post data.
  • Preview Content Feature
    Scott introduces a built in preview content feature in Next.js which allows users to preview dynamic content by calling an api and setting a cookie to preview content mode. This feature can be used to preview draft data before data goes public.
  • Implementing Preview Content
    Scott demonstrates how to implement the preview content and clear preview features using setPreviewData to redirect the user from the public page to draft content. This feature can be used in tandem with a GUI to easily switch between preview and public views for testing purposes.

Authentication with NextAuth.js

Section Duration: 36 minutes
  • Auth with JWTs & NextAuth.js Setup
    Scott demonstrates how to implement auth using the NextAuth.js package to handle user sign up, login, page protection, and database access. Configuring the Nextauth instance using a catch all route and jwt with environment variables including providers, user info, and database is also covered in this segment.
  • Environment Variables & Connecting to Mongo
    Scott walks through setting up environment variables including registering a new OAuth application through GitHub and creating a database cluster in MongoDB Atlas to hold the user data. Run-rs is also available to use for databases for local development.
  • Q&A and GitHub Auth with OAuth
    Scott answers questions about differences in auth provider set up, what is contained in the session object, and if the session object can be used for authentication. Implementation of the sign in functionality and how to login process using Next-auth with GitHub as the OAuth provider is also covered in this segment.
  • Auth Q&A and Provider Setup
    Scott answers student questions regarding the difference between sessions and JWT when signing in and opinions on using state management in React.js. The provider is then implemented on the app page to increase performance by avoiding multiple api calls to check user login status.

Protecting Pages

Section Duration: 50 minutes

Client Side Mutations & Deployment

Section Duration: 48 minutes

Wrapping Up

Section Duration: 8 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now