Introduction to Next.js
Table of Contents
IntroductionScott Moss introduces the course content, mentions the course prerequisites, and details past and current work experience.
Course OverviewScott 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 OverviewScott 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.jsScott 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 with Pages in Next.jsScott 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.jsScott demonstrates how to query a route using a parameter. In this example, the ID is the parameter that is used.
Catch-All RoutesScott 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 ComponentScott 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&AScott answers questions about routing parameters, where routes have to be declared in Next.js, SEO, and the Link component.
Adding CSS & ModulesScott 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 UIScott 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 UIScott 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 & StylingScott 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 ConfigScott 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.
PluginsScott 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.jsScott 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.
Creating API RoutesScott 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 HandlersScott 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 APIScott demonstrates how to create, retrieve, and delete notes from the note application that was started in previous sections.
Fetching Data & getStaticPropsScott 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 getStaticPathsScott 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 getServerSidePropsScott 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&AScott 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 getServerSidePropsScott 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 RenderingScott 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 ModesScott 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 SSRScott 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.
Deploying Next.js OverviewScott 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 VercelScott demonstrates how to install Vercel, and how to deploy the application started in previous sections in Vercel through the terminal.
Q&AScott 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.