Table of Contents
Introduction
Introduction
Scott Moss introduces the course by discussing changes introduced in Next 13 and providing some personal background. A brief overview of the material covered in this course is also provided in this segment.
Next.js Origins and Q&A
Scott discusses the React origins of Next.js and the reasoning behind building on top of React. Situations when Next.js should and should not be used are also discussed in this segment.
Setup
Creating a Next.js App
Scott walks through setting up a Next.js project with create-next-app, the contents of the generated files, and provides manual setup instructions. Student questions regarding testing in Next.js, the status of _app.tsx and _document.tsx in Next.js 13, and what font and theme Scott is using are also covered in this segment.
File-Based Routing & Params
Scott demonstrates folder and file naming conventions which allow Next.js to automatically configure routers through a file-based routing system. Implementing dynamic routes through query params is also demonstrated in this segment.
Route Grouping
Scott demonstrates separating sections of applications that share functionality utilizing route grouping. Setting up routes for the course application and a student's question regarding protections for route collisions are also covered in this segment.
Rendering
Layout Components
Scott discusses defining a head component that can be page specific or shared and demonstrates creating reusable page layouts by utilizing layout components. Pages embedded in the layout component will share the defined page elements, such as a navbar, header, and footer.
Navigation
Scott discusses how navigation works under the hood in Next.js, demonstrates implementing a Link component, and how to handle dynamic routes. Programmatic navigation using the useRouter hook is also briefly discussed in this segment.
Server vs Client Components
Scott demonstrates the differences between server side and client side components and how to change server components to client components. Student questions regarding using nested relative routes with Link components, if the use client pragma is new, and if client components are never rendered on the server are also covered in this segment.
Rendering Server Components
Scott discusses server components compared to SSR, when to use server components, and how the new folder structure has impacted third-party libraries. Student questions whether the Link component is a client component and how the hosting and sharing of state has been affected.
Client Components
Scott discusses client components, when and how to use them, and demonstrates what happens when trying to use state in a server component. Demonstrations of how client and server components interact are also provided in this segment.
Data Fetching
Data Fetching with Server Components
Scott discusses fetching data in server components to keep apps secure and reduce the load on the main thread. A demonstration of fetching data from an API is also provided in this segment.
Data Fetching Q&A
Scott answers student questions regarding whether 'use client' has to be used when using libraries to handle requests like React Query, if the API is cached client side, and how the app knows to re-render.
Creating API Routes
Scott walks through creating API routes with Next.js and discusses how this handles middleware. Student questions regarding versioning the API and how the API would handle websockets are also covered in this segment.
Static Params
Scott demonstrates generating static parameters for dynamic routes. Student questions regarding how to decide when to generate static parameters, the limits of getStaticParams, and if async components are from Next.js or React are also covered in this segment.
Loading Page
Scott demonstrates handling a loading state using special pages provided by Next.js to handle loading and error states. A demonstration of using Suspense to manually set up a loading state is also provided in this segment.
Error Boundaries
Scott walks through handling application errors using the error page provided by Next.js and discusses that error boundaries can be created similarly to Suspense where they wrap components. A student's question regarding accessing error information from the error page is also covered in this segment.
Typing Components & API Responses
Scott demonstrates implementing component types and API response types in Next.js.
Mutating Data
Scott discusses data mutations in Next.js which currently recommends refreshing the router to trigger the server component relationship. At the time of this course recording Next.js is working on a different strategy for mutating data.
Styling
Global Styles
Scott demonstrates implementing global styling by importing styles from a globally available styles.css file.
CSS Modules & Third-Party Libraries
Scott discusses creating scoped CSS modules in Next.js and using third-party libraries. Student questions regarding styling by tags, styling by IDs, and support for Sass or Tailwind.
Building a Basic Blog App
Creating & Styling the Home Page
Scott walks through creating and styling a base home page for the course application. Adding Link components to the homepage is also covered in this segment.
Loading Blog Posts
Scott demonstrates implementing pulling in blog posts to the course app from a CMS and adding a loading screen.
Contact Form & Server API
Scott walks through creating a contact form, defining a page that uses the client, and submitting a form. A student's question regarding how Next.js client components interact with things like Three.js and React Fiber is also covered in this segment.
