Introduction to Next.js 13+, v2

Table of Contents

Introduction

In this blog post, we will be covering the course on Introduction to Next.js 13+. The course teaches how to use Next.js to create blog websites and full-stack applications. We will cover topics such as server-side rendering, static site generation, data fetching, building API endpoints, and creating pages. Additionally, the course introduces new features in Next.js 13+, including file-based routing, server components, and client components.

Scott Moss, the instructor of the course, provides an overview of the material covered in the course and discusses some of the changes introduced in Next.js 13. He also shares his personal background and experience with Next.js.

Next.js Origins and Q&A

Scott Moss begins the course by discussing the origins of Next.js and the reasoning behind building it on top of React. He explains how Next.js takes advantage of React’s powerful features and tools while providing additional functionalities for server-side rendering and routing. He also discusses situations when Next.js is a good fit and when it may not be necessary.

Setup

To get started with Next.js, Scott walks through the process of setting up a Next.js project using the create-next-app command. He explains the structure and contents of the generated files and provides manual setup instructions for those who prefer to set up the project manually. Scott also addresses common questions regarding testing in Next.js, the status of _app.tsx and _document.tsx in Next.js 13, and the font and theme he is using in the course.

File-Based Routing & Params

Next.js provides a file-based routing system that allows automatic configuration of routers based on folder and file naming conventions. Scott demonstrates this feature by creating a basic file-based routing system for the course application. He also explains how to implement dynamic routes using query parameters.

Route Grouping

When building complex applications, it is often necessary to separate sections of the application that share functionality. Scott demonstrates route grouping in Next.js, allowing developers to organize and structure routes in a more logical and modular way.

Rendering

Next.js provides various techniques for rendering components, depending on the type of component and its requirements. In this section of the course, Scott covers two important topics: layout components and navigation.

Layout Components

Layout components in Next.js allow developers to define shared page elements, such as a navbar, header, and footer. Scott discusses how to define a head component that can be page-specific or shared across multiple pages. He then demonstrates how to create reusable page layouts by utilizing layout components. Pages embedded in the layout component will share the defined page elements, providing consistent design and navigation throughout the application.

Navigation

Scott explains how navigation works under the hood in Next.js and demonstrates how to implement navigation using the built-in Link component. He also discusses how to handle dynamic routes and programmatic navigation using the useRouter hook.

Server vs Client Components

In Next.js, components can be rendered on the server or the client, depending on their nature and requirements. Scott explains the differences between server-side and client-side components. He demonstrates how to change server components to client components and vice versa. He also addresses common questions from students, such as using nested relative routes with Link components and the use of client components with the new use client pragma.

Rendering Server Components

Scott introduces server components in Next.js and compares them to server-side rendering (SSR). He explains when to use server components and how the new folder structure has impacted third-party libraries. He also answers questions from students about whether the Link component is a client component and how hosting and sharing of state are affected by server components.

Client Components

Client components are a new feature in Next.js 13+ that allows components to be rendered on the client side only. Scott explains when and how to use client components and demonstrates what happens when trying to use state in a server component. He provides demonstrations to showcase how client and server components interact.

Data Fetching with Server Components

Next.js offers server components as a way to fetch data in server-side components, keeping the app secure and reducing the load on the main thread. Scott discusses the advantages of using server components for data fetching and demonstrates how to fetch data from an API. He also showcases a demonstration of fetching data from an API using server components.

Data Fetching Q&A

Scott answers students’ questions about using libraries like React Query with server components and whether the API is cached client-side. He also explains how the app knows when to re-render and how the use of use client may or may not be necessary when working with libraries.

Creating API Routes

In this section, Scott walks through creating API routes in Next.js. He explains how to define and structure API endpoints using Next.js’s built-in routing capabilities. He also discusses how to handle middleware in API routes. Furthermore, Scott addresses student questions regarding versioning the API and how the API would handle websockets.

Static Params

Next.js provides the ability to generate static parameters for dynamic routes. Scott demonstrates how to generate static parameters using the getStaticParams function. He also answers questions from students about when to generate static parameters, the limits of getStaticParams, and whether async components are specific to Next.js or React.

Loading Page

Scott demonstrates how to handle a loading state in Next.js using special pages provided by the framework. He explains how to use these pages to handle loading and error states in a smooth and user-friendly manner. He also demonstrates how to set up a loading state manually using Suspense.

Error Boundaries

When building applications, handling errors is a critical aspect. Scott walks through handling application errors in Next.js using the error page provided by the framework. He also discusses how error boundaries can be created in Next.js by wrapping components, similar to how suspense works in React. He addresses a student’s question regarding accessing error information from the error page.

Typing Components & API Responses

In Next.js, ensuring type safety is important, especially when dealing with components and API responses. Scott demonstrates how to implement component types and API response types in Next.js to ensure type safety in the application.

Mutating Data

Scott discusses data mutations in Next.js and the recommended approach for handling data mutations. Currently, Next.js recommends refreshing the router to trigger the server component relationship. However, he also mentions that Next.js is working on a different strategy for mutating data.

Styling

Styling is an essential aspect of building web applications. Scott covers different approaches to styling in Next.js.

Global Styles

Scott demonstrates how to implement global styling in Next.js by importing styles from a globally available styles.css file. He explains how global styles can be used to apply styles throughout the application.

CSS Modules & Third-Party Libraries

Next.js provides support for CSS modules, enabling developers to create scoped CSS modules for individual components or pages. Scott discusses how to create scoped CSS modules in Next.js and demonstrates how to use third-party libraries for styling. He also answers student questions regarding styling by tags, styling by IDs, and the support for Sass or Tailwind in Next.js.

Building a Basic Blog App

In this section, Scott walks through building a basic blog app using Next.js. He covers several aspects of building the app, including creating and styling the home page, loading blog posts from a CMS, and implementing a contact form with a server API. He also addresses a student’s question about how Next.js client components interact with things like Three.js and React Fiber.

Wrapping Up

Scott wraps up the course by recommending further resources and places to learn more about Next.js. He encourages students to explore the documentation and community resources to deepen their understanding and leverage the full potential of Next.js.

Conclusion

In this blog post, we covered the course on Introduction to Next.js 13+. We explored various aspects of using Next.js, including setup, file-based routing, server and client components, data fetching, styling, and building a basic blog app. Scott Moss provided in-depth explanations and demonstrations, addressing common questions from students and providing valuable insights. This course is a great resource for developers looking to learn Next.js and build powerful web applications.