Skip to main content
Introduction
Scott Moss introduces the course content, mentions the course prerequisites, and details past and current work experience.
Scott describes the course format, shares the course repo, and discusses the main project, a notes application that the students get to build during this course. The specifics of what students will learn in the course are also discussed in this segment.
Scott explains why Next.js is a complete fullstack framework for modern applications that depends heavily on React, compares React and Gatsby to Next.js, and explains that Next.js has more to offer. Next.js can be used by developers for server-side rendering (SSR), to create a single page application (SPA), or to use an API.
Scott demonstrates how to install, how to start developing an application with Next.JS, and covers all of the necessary commands to start a new project.
Routing
Config
Scott explains how to use modules written in CSS to add style to a Next.js application, and explains that CSS modules do not have a global scope and require a class name to function properly.
Scott demonstrates how to add the Theme UI library to the application started in previous sections, and explains how to add or change the styling of the application. Theme UI allows developers to create theme objects and use these objects in components.
Scott explains that Theme UI has inline styling by accessing theme variables with the JSX compiler, and adds class names. The difference between Theme UI vs. Tailwind CSS and when to use each is also discussed in this section.
Scott continues styling the various pages of the notes application started in previous sections using variant style objects. A brief overview of Baseweb, an npm package, and its commonalities with Theme UI is discussed.
Scott explains that, in order to change the build system's behavior, extend Next.js's features, or add environment variables, developers need to create and update the Next.js config file.How to modify the configuration based on different conditions is also discussed in this segment.
Scott explains that plugins are common logic used and built by developers within the Next.js community that are added to the configuration file (next.config.js), and demonstrates how to write and add a plugin to the application started in previous sections.
Scott gives a brief overview of the already existing plugins in Next.js, and explains that it is best practice to check when a plugin was last updated before adding it to a code based.
API
Scott explains that the syntax to create routes in Next.js is similar to the syntax to create pages, and adds that the file structure and the catch-all routes are the same as well in Next.js.
Scott demonstrates how to write an API handler that responds to all requests from a given URL, adds logic based on each API route, and uses the next-connect npm package as a middleware to simplify building the handler.
Scott demonstrates how to create, retrieve, and delete notes from the note application that was started in previous sections.
Scott explains, that depending on when the data is needed or what it is needed for, there are different ways to fetch data in Next.js. How to use the getStaticProps function, which runs at build time and return props, is also discussed in this segment.
Scott explains that the getStaticPaths function is similar to getStaticProps, but the main difference is that it can fetch all of the paths and the unique URLs within an application, and therefore, works better with dynamic paths. An example of how to use getStaticPaths is also discussed here.
Scott explains that the getServerSideProps function is similar to the handlers used in similar functions, but is used within a page, and refactors code using getServerSideProps.
Scott reviews the various fetch functions discussed in previous segments, and answers questions about getServerSideProps method best practices and how to add authentication.
Scott uses the getServerSideProps function to render multiple notes into a single page. The relationship between the getServerSideProps function and server-side rendering is also discussed in this segment.
Scott continues to work on the note fetching functionality using the getServerSideProps method, explains why using getServerSideProps is the best option in this case, and adds a redirect to the notes page in the situation that a request fails.
Scott gives an overview of the different rendering modes, in Next.js namely, static generation, server-side rendering, and client-side rendering, and explains that it is possible to use various renderings within the same function.
Scott explains that in some cases, developers need to skip server-side rendering (SSR), adds that Next.js supports dynamic imports that, when used with component, opt out of SSR, and live codes an example of SSR exemption.