Scott Moss
Initialized
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.
Preview
CloseCourse 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
Table of Contents
Introduction
Section Duration: 18 minutes
Scott Moss introduces the course and provides course materials including the GitHub repository.
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.
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
Section Duration: 1 hour, 14 minutes
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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
Section Duration: 48 minutes
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.
Scott live codes API routes using next-connect and middleware error handlers to handle users creating new docs.
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.
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.
Wrapping Up
Section Duration: 8 minutes
Scott wraps up the course by sharing recommended resources and giving advice to learning more about Next.js.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops