Introduction to Next.js 13+, v3

Table of Contents

• 

  Introduction

  00:00:00 - 00:08:45 View Transcript

  Scott Moss introduces the course by sharing some personal and professional background. The segment also includes an overview of the material that will be covered throughout the course.
• 

  History of Next.js

  00:08:46 - 00:13:14 View Transcript

  Scott discusses the history of React and Next.js and how Next.js simplifies the process of building server-side rendered React applications.

• 

  React Server Components

  00:13:15 - 00:22:13 View Transcript

  Scott discusses single-page applications, server-side rendering, and how the introduction of React Server Components in Next.js 13 solves some problems with the server-side rendering method. Server-side rendering renders initial components on the server, but requires downloading the full JavaScript like in single-page applications, making React server components more efficient for performance and user experience.
• 

  Setup Next.js

  00:22:14 - 00:31:51 View Transcript

  Scott walks through the steps to set up a Next.js application and addresses a question about the popular styling framework, Tailwind. The segment also covers creating a prettierrc file for enabling auto-formatting.
• 

  Static Routing

  00:31:52 - 00:44:21 View Transcript

  Scott discusses the filesystem-based routing model in Next.js. Demonstrations of creating a new route and route grouping are also covered in this segment.
• 

  Static Routing Q&A

  00:44:22 - 00:52:43 View Transcript

  Scott addresses students' questions about topics, including whether a folder can contain multiple pages and the requirement for using default exports. The segment also covers using file names for route names and clarifies the concept of server-side rendering as a process that involves more than just concatenating HTML.
• 

  Dynamic Routing

  00:52:44 - 01:05:48 View Transcript

  Scott demonstrates the generation of dynamic routes to handle situations where the route destination is not known beforehand or when working with dynamic data. The segment covers the utilization of multiple route parameters, creating catch-all routes, and the format of the parameter data.
• 

  Parameter Q&A

  01:05:49 - 01:11:13 View Transcript

  Scott explains the concept of using generateStaticParams() in conjunction with dynamic route segments to statically generate known routes during the build process. The segment also addresses student questions about accessing query parameters.

• 

  Rendering

  01:11:14 - 01:15:41 View Transcript

  Scott explains how Next.js handles the rendering of routes, distinguishing between static and dynamic routes. Static routes involve rendering components on the server during the build process and caching the result for subsequent requests, while dynamic routes render components on the server at the time of the request.
• 

  Layouts & Templates

  01:15:42 - 01:33:31 View Transcript

  Scott demonstrates the usage of layout components to share common UI elements across different pages. Templates, similar to layouts, are used to render components every time a route changes.
• 

  Navigation

  01:33:32 - 01:40:33 View Transcript

  Scott walks through the steps of adding navigation to the app using the Link component in Next.js. Next.js provides various navigation features, including client-side navigation, dynamic routing, nested routing, and customizable document rendering.
• 

  Styling Overview

  01:40:34 - 01:46:19 View Transcript

  Scott provides an overview of styling in Next.js, covering topics such as Tailwind CSS, importing CSS files, and other commonly used tools for managing CSS.
• 

  CSS Modules

  01:46:20 - 01:55:31 View Transcript

  Scott demonstrates the process of creating CSS modules, which allow for encapsulating CSS styles to only affect the files where they are imported. In CSS modules, each rule becomes a property on the object when imported.
• 

  CSS in JS

  01:55:32 - 02:03:26 View Transcript

  Scott discusses examples of utilizing CSS in JavaScript, including popular libraries like styled-components and emotion. This segment also addresses a student's question about integrating testing files into the file structure of a Next.js project.

• 

  Server Components

  02:03:27 - 02:14:46 View Transcript

  Scott demonstrates the process of fetching data in server components using async and await. This segment also addresses a student's question about techniques to handle the latency of making multiple API calls to obtain data.
• 

  Client Components

  02:14:47 - 02:22:35 View Transcript

  Scott discusses the procedure for fetching data in client components and explains the limitations on passing serializable props between server and client components. By default, components in Next.js are considered server components, and to designate them as client components, the "use client" syntax must be included.
• 

  Prisma

  02:22:36 - 02:32:29 View Transcript

  Scott walks through the process of setting up a database using Prisma, a Node.js and TypeScript ORM. This segment also covers creating a schema for the todo items.
• 

  Fetching Data with Prisma

  02:32:30 - 02:41:15 View Transcript

  Scott demonstrates the implementation of fetching data for the todo list from the Prisma database. This segment also covers the necessary steps to retrieve and integrate data from the database into the todo list functionality.
• 

  Form Handling with Server Actions

  02:41:16 - 02:59:10 View Transcript

  Scott demonstrates using server actions to create a form that submits data to the server without using JavaScript. Server actions allow the ability to run code on the server without having to setup a new API route.
• 

  Loading & Error

  02:59:11 - 03:03:53 View Transcript

  Scott demonstrates the process of implementing a loading state to display while a page or layout is fetching data. The segment also covers the creation of an error.js file to handle UI presentation when a page or layout encounters errors during rendering.
• 

  Server Actions Q&A

  03:03:54 - 03:20:45 View Transcript

  Scott addresses student questions related to form validation, redirecting on form submission, and handling authentication checks. This segment also covers topics such as conditional error messages, creating a single-page application (SPA) route, the need for state management libraries, and the process of importing server components.
• 

  Server Action Mutation

  03:20:46 - 03:30:19 View Transcript

  Scott demonstrates the process of updating server data using server actions. This segment also covers invoking Server Actions outside of forms, buttons, or inputs by utilizing the startTransition function provided by the useTransition hook.
• 

  API Routes

  03:30:20 - 03:40:57 View Transcript

  Scott demonstrates the usage of Next.js' built-in serverless routing to create an API by defining route handlers in the route.js|ts file. The segment includes a demonstration of creating both a GET route and a POST route.
• 

  API Q&A

  03:40:58 - 03:50:44 View Transcript

  Scott addresses students' questions about handling cross-origin resource sharing (CORS) and explains the differences between API routes in the pages directory and routes in the app directory.
• 

  Middleware

  03:50:45 - 03:58:28 View Transcript

  Scott explains the concept of middleware in Next.js, which allows running code before a request is completed. Middleware can modify the response by rewriting, redirecting, modifying request or response headers, or even providing a direct response based on the incoming request.
• 

  Building for Deployment to Vercel

  03:58:29 - 04:17:17 View Transcript

  Scott walks through the process of building an optimized production version of a Next.js application and demonstrates how to deploy it using Vercel.

• 

  Wrapping Up

  04:17:18 - 04:27:40 View Transcript

  Scott wraps up the course by offering additional resources for further learning about Next.js and briefly mentioning features that were not covered in the course. This segment also addresses student questions regarding authentication recommendations and the usage of Next.js for enterprise applications.