This course has been updated! We now recommend you take the Introduction to Next.js 13+, v3 course.
Table of Contents
IntroductionScott 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&AScott 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.
Creating a Next.js AppScott 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 & ParamsScott 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 GroupingScott 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.
Layout ComponentsScott 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.
NavigationScott 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 ComponentsScott 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 ComponentsScott 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 ComponentsScott 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 with Server ComponentsScott 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&AScott 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 RoutesScott 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 ParamsScott 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 PageScott 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 BoundariesScott 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 ResponsesScott demonstrates implementing component types and API response types in Next.js.
Mutating DataScott 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.
Global StylesScott demonstrates implementing global styling by importing styles from a globally available styles.css file.
CSS Modules & Third-Party LibrariesScott 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 PageScott 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 PostsScott demonstrates implementing pulling in blog posts to the course app from a CMS and adding a loading screen.
Contact Form & Server APIScott 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.