Learning Next.js (2022)

Course details

The Next.js web development framework gives you all the benefits of a server-side rendering tool with the speed and ease of a single-page app. Using this popular, React-based tool, you can build, manage, and customize a complete web application from scratch in JavaScript.

In this course, instructor Sandy Ludosky shows you how to get the best developer experience from your Next.js project—with zero configuration, zero user headaches, and lightning fast, dynamic page speeds. Explore the benefits of server-side rendering with web frameworks like Next.js. Sandy walks you through basic features such as pages, data fetching, and layout options; advanced topics like dynamic routes and API routes; and how to build and stylize a React project from start to finish so you can create a Next.js app on your own.

Concepts

0. Introduction

01 - Speeding up your workflow with Next.js
02 - What you should know
03 - The exercise files and what you need

1. Why Choose Next.js

04 - Learning the building blocks of an application
05 - What is a web framework
06 - Discovering the Next.js framework
07 - Learning the benefits of Next.js

2. Getting Started and Learning the Basics

08 - Getting started with the Next.js tooling
09 - Creating new pages
10 - Building a file-based routing system
11 - Creating links to navigate between pages
12 - Setting up dynamic routing and URLs
13 - Challenge - Set up a file-based system with zero config
14 - Solution - Set up a file-based system with zero config

3. Pre-rendering and Data Fetching

15 - Discovering the rendering strategies
16 - Discovering the rendering strategies with getStaticProps
17 - Pre-rendering at build time with static generation
18 - Pre-rendering super fast and super SEO-efficient content
19 - Discovering the rendering strategies with getServerSideProps
20 - Using dynamic routes and user's input to query content
21 - Search, request, and pre-render content with SSR
22 - Discovering the rendering strategies with getStaticPaths
23 - Pre-rendering at build time with static paths
24 - Handling errors with a fallback page (404 not found)
25 - Customizing an error page
26 - Challenge - Pre-rendering at build vs. runtime
27 - Solution - Pre-rendering at build vs. runtime

4. Styling Your Next.js Application

28 - Adding global styles
29 - Using scoped CSS with CSS modules
30 - Styling Next.js with styled JSX
31 - Loading static images
32 - Challenge - Add global and scoped styling
33 - Solution - Adding and maintain CSS globally

Conclusion

34 - What to learn next

Learning Next.js (2022)

Authors

Sandy Ludosky