English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 90 Lessons (8h 20m) | 2.88 GB
Next.js is one of the most popular frameworks for building web applications. It’s fast, flexible, and powers some of the biggest sites on the internet.
But when it comes to building production-ready applications, setting up your Next.js project can be a real headache.
With the introduction of the App Router and React Server Components, there have been significant changes to the way applications are structured and built. There are also decisions to make about styling approaches, data fetching strategies, testing frameworks, and the CI/CD pipeline.
It’s easy to get overwhelmed.
Here are just some of the challenges that developers face when working with Next.js:
- Router Uncertainty: Should you use the App Router or the older pages router? What are the trade-offs?
- Component Confusion: When should you use client components vs. React Server Components? How do best handle context and data sharing?
- Performance Bottlenecks: Why does your app feel slow? How can you optimize data fetching and rendering?
- Authentication Headaches: How do you handle user authentication and session management securely?
- Deployment Anxiety: What are the best practices for deploying Next.js applications to production to ensure they’re reliable and secure with minimal downtime and bugs?
- Scaling Pains: What should you do to ensure your Next.js application can handle increased user load as it grows?
Working with Next.js shouldn’t be confusing.
Whether you’re brand new to Next.js or a seasoned developer looking to keep up to date with the latest features, Pro NextJS will teach you everything you need in order to build web apps with confidence.
This series of self-paced workshops is full of in-depth knowledge, real-world examples, and practical advice to help you understand trade-offs when building with Next.js.
Table of Contents
1 Welcome to Pro Next.js
2 Why You Should Choose Next.js
3 When Not to Use Next.js
4 The React, Next.js, and Vercel Controversy
5 Create and Deploy a Next.js Application
6 An Overview of the First Application
7 Create Your First Route
8 Add a Header Using Layout
9 Choosing a SSR Framework or a SPA System
10 Client vs. Server Components in Next.js
11 Add Authentication with NextAuth.js
12 NextAuth v5 Update
13 Composition in Next.js: Understanding Client and Server Components
14 Intro to Server Actions
15 Add Interactivity with Next.js Server Actions
16 Store Chat Data in a Database
17 File-Based Routing with App Router
18 Adding Parameterized Routes to a Next.js App
19 Access Data with React Server Components
20 Implement Parallel Routes for a Chat Menu Sidebar
21 Implement Streaming AI Responses
22 What You’ve Learned So Far
23 Styling Next.js App Router Applications
24 Create a Layout with CSS Modules
25 Refine the Layout with CSS Modules
26 Getting Started with Tailwind CSS
27 Configure Container Queries with Tailwind CSS
28 Combine CSS Modules with Tailwind CSS
29 Intro to Meta’s StyleX
30 Finish Styling with StyleX
31 Styling with Material UI’s Pigment CSS
32 Finish Styling with Pigment CSS
33 Styling with Emotion
34 Comparing Emotion with Tailwind and Pigment
35 Introduction to Component Libraries
36 shadcn/ui – Blog App Overview
37 Park UI
38 Bootstrap
39 Ant Design
40 Material UI
41 Chakra UI
42 Wedges
43 NextUI
44 Mantine
45 Building a Strong Foundation
46 Setting up ESLint and Prettier
47 Organizing Component Files
48 Organizing Components into Directories
49 Importing Component Files
50 Component Locations
51 Setting up Storybook with Next.js
52 Testing with Jest
53 Testing Async RSCs with Jest
54 Testing with Vitest
55 Testing Async RSCs with Vitest
56 End-to-End Testing with Cypress
57 E2E Testing with Playwright
58 Check Bundle Size with GitHub Actions and Husky
59 Should You Use a Monorepo?
60 Creating a Next.js App in a Turborepo Monorepo
61 Storybook in a Turborepo Monorepo
62 Naming and Organizing Server and Client Components
63 Lego Components
64 Embrace the JS, Next.js, and React Ecosystem
65 Caching with the Next.js App Router
66 The Full Route Cache
67 Dynamic Routes in Next.js
68 Automatic and Manual Revalidation
69 Next.js API Route Caching
70 Data Caching and Revalidation with React Server Components
71 Cache-busting with Tags
72 The Next.js Router Cache
73 Understanding the Example Monorepo Structure
74 Intro to Systems Architecture
75 The API Route Variant of Local Systems
76 Building with Local Server Actions in Next.js
77 BFF Architecture with GraphQL
78 Backend-for-Frontend (BFF) Architecture with Server Actions
79 The API Variant of Backend-for-Frontend Architecture
80 BFF Pattern with gRPC (TwirpScript)
81 BFF Architecture with tRPC
82 Server Architecture with an External API Domain
83 Proxying External Systems with Next.js
84 Token Variation of the External Systems Architecture
85 Token Variation of the External Systems Architecture
86 Adding Suspense to the Application
87 Granular Suspense in React
88 DIY Streaming with Server Actions
89 Cached Server Actions in Next.js
90 File Uploads in Next.js App Router Apps
Resolve the captcha to access the links!