Mastering Next.js

Hey, everyone! 👋 I'm Lee, the creator of Mastering Next.js. This course was originally released in 2019. Next.js has evolved quite a bit since v9 and some of this course is officially "outdated".

I've updated the course overview below to annotate which parts are up to date, which have changed, and what my new suggestions are. In my opinion, this is the ideal way to evolve this course. The videos will serve as a reference to a point in time, but newer additions to the framework make certain aspects much easier.

• 🟢 Up to date
• 🟡 Outdated
• 🔴 Do not recommend

Introduction

• 🎥 Watch Now (26:07)
• 🟢 Here are my latest thoughts on the framework comparison
• 🟡 This video mentions Image Optimization, which is now supported in Next.js

React Overview

I taught Class Components in 2019 for those still in the process of converting to React Hooks. In 2021, it's now standard to use React Hooks for all projects and I would recommend starting there.

• 🎥 Watch Lesson (21:01)
• 👀 View Code
• 🟢 Props & State
• 🟢 Functional Components
• 🟢 React Hooks
• 🟢 ES6
• 🟢 JSX
• 🟡 Class Components

Developing Locally

• 🎥 Watch Lesson (9:49)
• 🟢 next dev, next build, and next start
• 🟢 Prettier
• 🟡 Image Optimization is now supported in Next.js
• 🟡 ESLint is now integrated in Next.js
• 🔴 Standard (Prettier + ESLint won)

Navigating Between Pages

• 🎥 Watch Lesson (19:25)
• 👀 View Code
• 🟢 next/link (client-side routing)
• 🟢 useRouter
• 🟢 Retrieving data from URLs
• 🟡 getInitialProps – This has largely been replaced by newer APIs

Styling

• 🎥 Watch Lesson (20:04)
• 👀 View Code
• 🟢 Responsive + Mobile-First Design
• 🟢 styled-jsx
• 🟡 CSS & CSS Modules are now supported out of the box
• 🔴 Sass - I would recommend other options
• 🔴 Styled-Components - I would recommend other options

Fetching Data

• 🎥 Watch Lesson (46:30)
• 👀 View Code
• 🟢 API Routes
• 🟢 SWR
• 🟢 GraphQL
• 🟢 Hasura
• 🟡 Apollo Client - I'd recommend SWR
• 🟡 Custom Server - Most needs for this have moved into Next.js core next start.

Managing Assets and SEO

• 🎥 Watch Lesson (14:19)
• 🟢 Favicons
• 🟢 Open Graph
• 🟢 Core themes are still valid for SEO
• 🟡 Image Optimization is now supported in Next.js
• 🟡 There's now official guidance on SEO

Building A Blog With MDX

• 🎥 Watch Lesson (32:32)
• 👀 View Code
• 🟢 MDX vs CMS
• 🟡 Component Library (Theme UI) – I would recommend other options
• 🔴 StaticKit – Acquired by Formspree

Authentication

• 🎥 Watch Lesson (23:34)
• 🟢 JWTs
• 🟢 Auth0
• 🟢 I have a new course using Firebase and Next.js
• 🟡 Would recommend next-auth for an OSS solution now
• 🟡 Here are my latest thoughts on State Management (Forms)

Testing & Error Handling

• 🎥 Watch Lesson (33:12)
• 🟢 Jest
• 🟢 React Testing Library
• 🟢 Sentry (see latest example)

State Management & More

• 🎥 Watch Lesson (25:41)
• 🟢 TypeScript Integration
• 🟡 Here are my latest thoughts on State Management
• 🟡 Redux (see latest example)

Exporting & Deployment

• 🎥 Watch Lesson (11:20)
• 🟢 Vercel
• 🟢 You no longer need to customize anything in vercel.json - it just works!
• 🟡 ZEIT is now Vercel