This course has been updated! We now recommend you take the Introduction to Next.js 13+, v3 course.
Table of Contents
Introduction
Introduction
Scott Moss introduces the course content, mentions the course prerequisites, and details past and current work experience.
Course Overview
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.
Next.js Overview
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.
Getting Started with Next.js
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
Routing with Pages in Next.js
Scott creates folder for the source code for site pages, a default index page, and demonstrates how to add nested routes to the application.
Dynamic Route Parameters in Next.js
Scott demonstrates how to query a route using a parameter. In this example, the ID is the parameter that is used.
Catch-All Routes
Scott demonstrates how to create a catch-all route, and refers to it as a glob because it captures all the routes within the same folder. Catch-all routes are useful when a developer has multiple pages with similar if not identical layouts, but have different content and need a unique URL.
Page Navigation with the Link Component
Scott demonstrates how to navigate between pages in Next.js using the Link component, and explains that the link component is only used for client-side transitions
Routing and Navigation Q&A
Scott answers questions about routing parameters, where routes have to be declared in Next.js, SEO, and the Link component.
Config
Adding CSS & Modules
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.
Adding Theme UI
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.
Styling with Theme UI
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.
Variants & Styling
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.
Customizing the Next.js Config
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.
Plugins
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.
Typescript with Next.js
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
Creating API Routes
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.
API Handlers
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.
Creating an API
Scott demonstrates how to create, retrieve, and delete notes from the note application that was started in previous sections.
Fetching Data & getStaticProps
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.
Building Static Pages with getStaticPaths
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.
Building Dynamic Pages with getServerSideProps
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.
Methods of Fetching Data Review and Auth Q&A
Scott reviews the various fetch functions discussed in previous segments, and answers questions about getServerSideProps method best practices and how to add authentication.
Fetching Notes with getServerSideProps
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.
Fetching Notes & Dynamic Rendering
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.
Rendering Modes
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.
Working with SSR
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.
Deployment
Deploying Next.js Overview
Scott explains that, there are various environment in which a Next.JS application can be deployed, and recommends using Vercel, a deployment package supported by Next.js
Deploying Next.js on Vercel
Scott demonstrates how to install Vercel, and how to deploy the application started in previous sections in Vercel through the terminal.
Q&A
Scott answers questions about the API server in Next.js, how to use MDX with Next.js, and deploying large websites with Next.js. How to use sourcebit, a package that helps when pulling data from third-party resources including Next.js, is explored in this section. Stackbit, a platform for the Jamstack is also mentioned in this segment.
