Superfilter AI
Next.js Fundamentals, v4
6 hours, 41 minutes
CC
Course Description
Learn everything you need to build high-powered Next.js apps! Build a deep understanding of React Server Components and Server Actions. Create an app that leverages both static and dynamic routing. Add more complex features like authentication, caching with dynamicIO, and edge functions. Deploy your app to Vercel and showcase your professional Next.js skills!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: April 3, 2025
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: 6 minutes
Scott Moss introduces this course by providing some personal background and stating that he only teaches what he uses in production. The course will cover topics such as authentication, static pages, API routes, and server actions.
Setup
Section Duration: 1 hour, 19 minutes
Scott provides instructions for setting up the development environment, including installing Node.js, cloning the repository, and setting up environment variables for authentication and database connection.
Scott demonstrates how to set up a Next.js app from scratch and explains the options and preferences during the setup process, including the use of TypeScript, ESLint, and AppRouter. He demonstrates the basic structure of a Next.js app and highlights the default files and configurations provided.
Scott explains that Next.js is heavily opinionated and uses the file system to determine features and functionality. Scott provides an overview of specific file names that have special attention, such as page, layout, loading, and error. He also mentions common patterns and folder structures that developers may use.
Scott explains the differences between static and dynamic routes in Next.js. Static routes are pre-rendered and do not change, while dynamic routes contain parameters and are created using a specific folder structure. Scott also discusses layouts, which are components that wrap pages and remain unchanged, and route groups, which allow routes to share a common layout without affecting the URL structure.
Scott demonstrates how to use the Link component instead of an anchor tag for client-side routing. Scott emphasizes the importance of returning something in each route component and explains how layouts work by rendering their children.
Scott discusses different approaches to styling in Next.js, including CSS modules, which allow for scoping CSS to specific components, global CSS for global styles, and recommends using Tailwind CSS for its simplicity and compatibility. He also mentions CSS-in-JS options like styled-components and CSS preprocessors like Stylus.
Scott demonstrates how to create static pages which are regular pages that don't fetch dynamic data and are not personalized to the user. He also mentions the use of the `Link` component for client-side routing and prefetching.
Server Actions
Section Duration: 1 hour, 58 minutes
Scott introduces the concept of server actions in Next.js, which are synchronous functions that are executed on the server in response to client interactions. He also mentions that server actions have access to the request object and can set cookies, making them useful for handling authentication-related tasks.
Scott demonstrates using server-side functions for signing in, signing up, and signing out in Next.js. He also discusses the importance of using the `use server` directive to ensure the functions have access to the request and are treated as server-side code.
Scott introduces the useActionState hook from React, which allows for submitting forms and making requests to an API. He also mentions the useClient hook, which is necessary for components that require interactivity and JavaScript to run in the browser.
Scott explains how to use the `useRouter` hook in Next.js to navigate programmatically. He introduces the `useActionState` hook, which is used to handle form submissions and provides the current state of the form. Scott also demonstrates how to set up the action state and handle form submissions, including showing success messages and navigating to a different page.
Scott demonstrates the functionality of a sign-up form by testing the validation for a minimum password length on the server side. He also explains that form submissions always go to the current route unless a different action is specified. Scott then quickly adds a sign-in page, which is similar to the sign-up page in terms of implementation.
Authentication & Data Handling
Section Duration: 41 minutes
Scott explains that Data Access Layers (DAL) functions are utility functions that run on the server side before a route renders. They have access to the request and are used for fetching data dynamically for the page. Scott also explains how to access the request and cookies within a DAL function using the `next headers` package.
Scott demonstrates the process of querying the users table based on the session's user ID and returning the first match. Scott also mentions that server actions rely on the context of an active HTTP request and will break if used outside of that context.
Scott demonstrates how to create an async function to fetch data from a database and render it in a component. He also introduces dynamicIO, which allows developers to choose whether a component should be dynamic or cached. He emphasizes the importance of explicitly choosing whether to cache or make a component dynamic.
Scott explains the concept of suspense and how to use it to control the loading behavior of components. He also discusses the benefits of pushing data fetching calls down to the component level and using caching for static data. Additionally, Scott shows an alternative way to wrap a route in suspense using a loading file in Next.js.
Server Actions
Section Duration: 1 hour, 58 minutes
Scott demonstrates the process of creating an issue using server actions and shows how to fetch the current user and validate the issue data. He emphasizes the importance of validating inputs before inserting them into the database and provides an example of an issue form that uses action state and the user ID to submit the issue.
Scott answers student questions regarding the relationship between loading.tsx and layout, the terms suspending and caching, and calling server actions from client components.
Scott walks through implementing the edit and delete features, explaining how to update issues and delete them using server actions and parameters. He also clarifies that the return type for server actions is flexible and not constrained by Next.js.
Scott demonstrates how to retrieve data from the params object in a dynamic route and use it to fetch the corresponding issue from the database. He also shows how to handle errors and redirect to a "not found" page if the issue is not found.
Scott explains that it is possible to create middleware for server actions in Next.js by creating a higher-order function that wraps the server action function. He also mentions the useTransition hook in React, which allows for wrapping server actions and provides access to the status of the action. This hook is useful for showing loaders or performing server actions without blocking the UI.
Caching & API Routes
Section Duration: 1 hour, 7 minutes
Scott demonstrates how to use `useCache` to cache a function in the data access layer. He also explains the need for cache invalidation and introduces the `unstableCacheTag` and `revalidateTag` to achieve this. He also addresses questions about dynamic cache tags, revalidating while fetching, handling cache invalidation in background processes or webhooks, and caching across multiple Next.js instances.
Scott demonstrates how to use the `cache` function from React to memoize a function in a server component in Next.js. He also shows how to observe the memoization in action and mentions that in development mode, Next.js calls components twice, but in production mode, the memoization should work as expected.
Scott explains that API routes in Next.js are designed to execute in a serverless environment and follow web standards. Scott also mentions that API routes can be useful for handling webhooks or creating a developer API, but they are not always necessary for basic CRUD operations within an app.
Scott demonstrates how to create routes for a developer API, specifically for getting all issues and creating a new issue. He also shows how to create a get request to retrieve a specific issue by its ID.
Middleware & Edge Functions
Section Duration: 26 minutes
Scott discusses the official middleware implementation that Next.js provides, which can be used to intercept and process requests before they reach the application. He also explains that middleware can be used for various purposes such as authentication, rewriting, redirecting, and rate limiting.
Scott explains how to create middleware in Next.js and how it can be configured to run on specific paths using a matcher. He demonstrates an example of creating middleware to authenticate API requests by checking for an authorization header. He also mentions that middleware can be spread across different files as long as they are edge-compatible.
Scott introduces Edge functions and runtime, which is a lightweight JavaScript environment optimized for functions that need to be executed quickly and closer to the user. Scott also discusses how to use Edge runtime in Next.js, including using middleware, specifying the runtime in API routes or server components, and the limitations and compatibility considerations when working with Edge runtime.
Deployment & Testing
Section Duration: 57 minutes
Scott demonstrates how to deploy a Next.js app to Vercel. He walks through the process of setting up a Vercel account, connecting it to a GitHub repository, configuring the deployment settings, and adding environment variables. Scott shows how to trigger a deployment and explains the concept of preview branches for testing changes before merging them into the main branch.
Scott demonstrates how to trigger a deployment and explains the concept of preview branches for testing changes before merging them into the main branch. He also answers questions about scaling Next.js apps and deploying Docker containers on Vercel.
Scott discusses using Vitest, a popular testing library, to test a Next.js project. He mentions that most of the testing concepts and techniques he will cover are not specific to Next.js, but rather apply to React in general. Scott also provides instructions on setting up the necessary dependencies and configuration files for testing with Vitest.
Scott demonstrates creating tests for the dashboard page and writes test cases using assertions to check if the expected elements are rendered on the page. Vitest is a popular testing framework in the Next.js community, but other frameworks such as Jest can also be used.
Scott recommends third-party libraries like Magic UI, UIverse, 21st.dev, Dribbble, Mobbin, and Upstash. He highlights Next.js's static export feature for SPAs, which automatically splits bundles by route. Emphasizing efficiency, he advocates prioritizing business logic while leveraging tools for builds and performance optimization.
Wrapping Up
Section Duration: 4 minutes
Scott wraps up the course by introducing Fluid Compute with Next.js and encouraging learners to build progressively challenging projects to reinforce their skills.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops