Superfilter AI
Introduction to Next.js, v3
4 hours, 27 minutes
CC
Course Description
Next.js is a complete full-stack framework built on top of React.js. You can use Next.js to create basic blog websites up to full-blown, full-stack applications and APIs. In this course, you'll learn server-side rendering, static site generation, data fetching, building API endpoints, creating pages, and new features in Next.js, like using the app router, server and client components, and server actions!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
Scott Moss is so down to Earth and explains everything simply and to the point. It is amazing that he jumps right into the subject and keeps us engaged. Everything is applicable.
Dušana T.
Dušana T.
I completed "Introduction to Next.js, v3" and got to understand the basic workings of Next.js. 🚀 Pretty solid and helpful. I've been working with Next.Js projects and templates, but I didn't quite understand the inner workings and had to do a lot of searching, This course has given me a deeper level of understanding of Next.Js and its features.
Festus Idowu
Mcnobledev
I just completed "Introduction to Next.js 13+, v3" by Scott Moss on Frontend Masters! I appreciate how detailed and insightful the course was. Highly recommended 💯
Sky 💻
skyXakash
Course Details
Published: August 11, 2023
Learning Paths
Topics
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: 13 minutes
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.
Scott discusses the history of React and Next.js and how Next.js simplifies the process of building server-side rendered React applications.
Project Setup & Routing
Section Duration: 57 minutes
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.
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.
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.
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.
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.
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.
Layouts & Styling
Section Duration: 52 minutes
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.
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.
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.
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.
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.
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.
Data Handling & Deployment
Section Duration: 2 hours, 13 minutes
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Section Duration: 10 minutes
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.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops