Frontend Masters - Introduction to Next.js 13+, v3

Next.js is a finished full-stack framework based on top of React.js. You can utilize Next.js to make fundamental 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 elements in Next 13+, such as using the app router, server and client components, and server actions!

This course and others like it are accessible as a feature of our Frontend Masters video membership.

 

Table of Contents

Introduction

00:00:00 - 00:08:45

Introduction

Scott Moss introduces the course by sharing some personal and professional foundation. The fragment additionally includes an outline of the material that will be covered all through the course.

00:08:46 - 00:13:14

History of Next.js

Scott examines the historical backdrop of React and Next.js and how Next.js improves on the most common way of building server-side delivered React applications.

Project Arrangement and Routing

00:13:15 - 00:22:13

React Server Components

Scott examines single-page applications, server-side rendering, and how the introduction of React Server Components in Next.js 13 tackles a few issues with the server-side rendering strategy. Server-side rendering renders initial components on the server, however requires downloading the full JavaScript like in single-page applications, making React server components more effective for execution and client experience.

00:22:14 - 00:31:51

Arrangement Next.js

Scott strolls through the moves toward set up a Next.js application and addresses an inquiry regarding the well known styling framework, Tailwind. The portion likewise covers creating a prettierrc document for enabling auto-formatting.

00:31:52 - 00:44:21

Static Routing

Scott talks about the filesystem-based routing model in Next.js. Showings of creating a new endlessly course grouping are likewise canvassed in this fragment.

00:44:22 - 00:52:43

Static Routing back and forth discussion

Scott resolves understudies' inquiries regarding subjects, including whether an envelope can contain numerous pages and the necessity for using default sends out. The portion likewise covers using document names for course names and explains the idea of server-side rendering as an interaction that involves something beyond concatenating HTML.

00:52:44 - 01:05:48

Dynamic Routing

Scott shows the generation of dynamic courses to deal with circumstances where the course destination isn't known ahead of time or while working with dynamic data. The portion covers the use of various course boundaries, creating get all courses, and the organization of the boundary data.

01:05:49 - 01:11:13

Boundary back and forth discussion

Scott explains the idea of using generateStaticParams() related to dynamic course fragments to statically produce known courses during the form interaction. The portion additionally addresses understudy inquiries concerning accessing inquiry boundaries.

Designs and Styling

01:11:14 - 01:15:41

Rendering

Scott explains how Next.js handles the rendering of courses, distinguishing among static and dynamic courses. Static courses involve rendering components on the server during the form cycle and caching the outcome for ensuing solicitations, while dynamic courses render components on the server at the time of the solicitation.

01:15:42 - 01:33:31

Designs and Layouts

Scott exhibits the use of design components to share normal UI components across various pages. Formats, like designs, are utilized to deliver components each time a course changes.

01:33:32 - 01:40:33

Route

Scott strolls through the means of adding route to the app using the Link part in Next.js. Next.js gives different route highlights, including client-side route, dynamic routing, settled routing, and adaptable record rendering.

01:40:34 - 01:46:19

Styling Outline

Scott gives an outline of styling in Next.js, covering themes, for example, Tailwind CSS, importing CSS documents, and other regularly involved apparatuses for managing CSS.

01:46:20 - 01:55:31

CSS Modules

Scott exhibits the method involved with creating CSS modules, which take into consideration encapsulating CSS styles to just influence the documents where they are imported. In CSS modules, each standard turns into a property on the item when imported.

01:55:32 - 02:03:26

CSS in JS

Scott talks about instances of utilizing CSS in JavaScript, including well known libraries like styled-components and feeling. This portion likewise resolves an understudy's inquiry concerning integrating testing documents into the record design of a Next.js project.

Data Handling and Organization

02:03:27 - 02:14:46

Server Components

Scott exhibits the most common way of fetching data in server components using async and anticipate. This fragment likewise resolves an understudy's inquiry regarding procedures to deal with the inactivity of making numerous API calls to obtain data.

02:14:47 - 02:22:35

Client Components

Scott talks about the strategy for fetching data in client components and explains the restrictions on passing serializable props among server and client components. Of course, components in Next.js are considered server components, and to assign them as client components, the "utilization client" grammar should be included.

02:22:36 - 02:32:29

Prisma

Scott strolls through the most common way of setting up a database using Prisma, a Node.js and TypeScript ORM. This fragment likewise covers creating a construction for the task things.

02:32:30 - 02:41:15

Fetching Data with Prisma

Scott exhibits the execution of fetching data for the lineup for the day from the Prisma database. This portion additionally covers the fundamental stages to recover and integrate data from the database into the lineup for the day usefulness.

02:41:16 - 02:59:10

Structure Handling with Server Actions

Scott shows using server actions to make a structure that submits data to the server without using JavaScript. Server actions permit the capacity to run code on the server without having to arrangement another API course.

02:59:11 - 03:03:53

Loading and Blunder

Scott exhibits the method involved with implementing a loading state to show while a page or design is fetching data. The section likewise covers the formation of an error.js record to deal with UI show when a page or design experiences mistakes during rendering.

03:03:54 - 03:20:45

Server Actions back and forth discussion

Scott tends to understudy questions connected with structure approval, redirecting on structure accommodation, and handling validation checks. This fragment likewise covers subjects, for example, contingent mistake messages, creating a single-page application (SPA) course, the requirement for state the board libraries, and the method involved with importing server components.

03:20:46 - 03:30:19

Server Activity Transformation

Scott shows the most common way of updating server data using server actions. This fragment additionally covers invoking Server Actions outside of structures, fastens, or inputs by utilizing the startTransition capability given by the useTransition snare.

03:30:20 - 03:40:57

API Courses

Scott exhibits the use of Next.js' underlying serverless routing to make an API by defining course overseers in the route.js|ts document. The portion includes an exhibition of creating both a GET course and a POST course.

03:40:58 - 03:50:44

API question and answer session

Scott resolves understudies' inquiries concerning handling cross-origin asset sharing (CORS) and explains the distinctions between API courses in the pages registry and courses in the app catalog.

03:50:45 - 03:58:28

Middleware

Scott explains the idea of middleware in Next.js, which permits running code before a solicitation is finished. Middleware can change the reaction by rewriting, redirecting, modifying solicitation or reaction headers, or in any event, providing an immediate reaction in light of the incoming solicitation.

03:58:29 - 04:17:17

Building for Arrangement to Vercel

Scott strolls through the method involved with building an upgraded creation rendition of a Next.js application and shows how to send it using Vercel.

Wrapping Up

04:17:18 - 04:27:40

Wrapping Up

Scott wraps up the course by offering extra assets for additional learning about Next.js and momentarily mentioning highlights that were not shrouded in the course. This fragment likewise addresses understudy questions regarding confirmation proposals and the utilization of Next.js for big business applications.

Useful Links:

1. Instructor: Scott Moss
2. Workshop Schedule and Details