Introduction to Next.js 13+, v3

Scott Moss

Scott Moss

Superfilter AI
4 hours, 27 minutes CC
Introduction to Next.js 13+, v3

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 13+, 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
Close

Course Details

Published: August 11, 2023

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 13 minutes

Project Setup & Routing

Section Duration: 57 minutes
  • React Server Components
    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
    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
    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
    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
    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
    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
  • Rendering
    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
    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
    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
    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
    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
    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
  • Server Components
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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
  • Wrapping Up
    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.
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

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 💻

Sky 💻

skyXakash

Introduction to Next.js on frontend masters is the best code tutorial I've seen. The pacing is literally perfect.
Marcus Filipus

Marcus Filipus

Marcus_filipus

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now