Production-Grade Next.js
Learning Paths:
Table of Contents
Introduction
Introduction
Scott Moss introduces the course and provides course materials including the GitHub repository.
Quick Next.js Review
Scott does a brief refresh of Next.js for students skipping introduction courses, discusses file naming conventions, and Next.js's compatibility with global styling using React.js.
Course App Review
Scott briefly talks about Vercel as the deployment service to be used, walks through the files included in the repo, and gives a first look at what the application looks like in the browser. Note: Due to the older dependencies used in the repo, we recommend using Node version 10.24.1 with this application.
Dynamic Content
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
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
Protecting Pages in Server Side Props
Scott demonstrates how to protect pages by using a getSession hook from Next-auth and getServerSideProps to check if a user is signed in. The home navigation bar will also use getSession to generate a reactive button based on user login status.
Server Side Props Q&A
Scott answers student questions about how to get refresh tokens for Next-auth.js and if getServerSideProps is hit every time or if client side routing is used.
Connecting to a Database
Scott walks through how to connect globally to a Mongo database with MongoClient for serverless environments to be stateless. This process will avoid hitting connection limits and multiple connection calls by caching the database connection for later use.
Server Side Data Fetching
Scott live codes CRUD helper methods to avoid raw database queries and instead use the database created in getServerSideProps. The functions used to get, create, and update folders and docs are covered in this segment.
Data Fetching in Server Side Props
Scott implements the previously built CRUD helper functions with getServerSideProps to import data from the server-side database with Next.js. The use of context (ctx) will allow getServerSideProps to determine which states are active without making API calls.
Client Side Mutations & Deployment
Auth Callback Session Data
Scott demonstrates how to use callbacks in Next-auth.js to create "getting started" documents and folders for new user accounts by passing the session ID and user data as a JWT payload. Once the user data is received by the database the new documents and folders are created via a template.
Setting Up API Routes
Scott live codes API routes using next-connect and middleware error handlers to handle users creating new docs.
Client Side Mutations
Scott walks through adding a new handler for API calls when a new folder is created to merge states for an updated state. A question regarding integrating GraphQL APIs with getServerSideProps is also covered in this segment.
Deployment
Scott walks through manually importing GIT repositories via the Vercel CLI, deploying the application to Vercel, and setting up Vercel environment variables so it can be pulled and used locally.
