Top 8 Recommended Next.js Self-Study Materials! [December 2023]

Join this bestselling NextJS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & NextJS!

This course comes with two paths:

The "complete" path (the full >20h course) and the "summary" path (a ~3h summary module) - you can choose the path that best fits your time requirements!

-

I created the bestselling Udemy course on React, now I'm super excited to share this NextJS with you - an in-depth course about an amazing React framework that allows you to take the next step as a React developer and build real, production-ready projects with React and Next.js!

Next.js is the production-ready, fullstack-capable framework for ReactJS - the most popular JavaScript library you can learn these days!

Too many buzzwords for your taste?

Fair enough - but indeed, NextJS is a great choice for growing as a React developer and for taking your React apps to the next level!

Because NextJS is growing fast and therefore in high demand. And there are good reasons for that: NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!

In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend React apps. It's a breeze with NextJS!

Want to add authentication? NextJS simplifies that as well and makes user signup, sign in and session management very convenient.

This course will take you from NextJS beginner to advanced level in no time!

We'll start at the very basics, no NextJS knowledge is required at all, and we'll then dive into all the core features that make up NextJS. Both in theory as well as with multiple real projects where all concepts will be applied step-by-step.

For this course, you'll need basic React knowledge, though the course does come with a "React refresher" module in case it's been some time since you last worked with React.

This course also includes a "NextJS Summary" module which allows you to always come back to the course in the future and refresh your knowledge without going through the full course again. Or you just take that summary module (and skip the rest for now) to learn about all the core features in as little time as possible.

After finishing this course, you'll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!

In detail, this course will cover:

• What is NextJS? And why would you use it?

• Why is just React (in many cases) not enough?

• Creating NextJS projects from the ground up & understanding these projects

• Working with file-based routing

• Adding dynamic routes and catch-all routes

• Implementing different forms of page pre-rendering and server-side rendering

• Working with data and adding data fetching + pre-fetching to your apps

• Pre-generating dynamic and static pages

• Adding optimizations like metadata to pages

• Optimizing images with the NextJS Image component

• Building fullstack apps with API routes

• Managing app-wide state with React context (in NextJS apps)

• Adding authentication to NextJS apps

• Multiple complete apps where we'll apply all these core concepts!

• A complete React.js refresher module (so that we're all on the same page)

• A NextJS summary module so that you can refresh what you learned or just explore the core features quickly

• And much more!

I can't wait to start this journey together with you! :)

1. Getting Started
2. Welcome to the Course!
3. What Is Next.js? And Why Would You Use It?
4. Key Feature: Server-side Page (Pre-)Rendering
5. Key Feature: File-based Routing
6. Key Feature: Build Fullstack React Apps!
7. Join Our Learning Community!
8. Creating a NextJS Project & Setting Up Our IDE
9. About the "App Router"
10. Analyzing The Created Project
11. A First Demo: NextJS In Action!
12. About This Course & Course Outline
13. Taking This Course: Your Two Options
14. How To Get The Most Out Of This Course
15. Downloading Course Code
16. Course Resources & Dependency Versions
17. Module Resources
18. Optional: React Refresher
19. Module Introduction
20. What is ReactJS?
21. Why ReactJS & A First Demo
22. Building Single-Page Applications (SPAs)
23. React Alternatives
24. Creating a New React Project
25. Setting Up A Code Editor
26. React 18
27. Diving Into The Created Project
28. How React Works & Understanding Components
29. More Component Work & Styling With CSS Classes
30. Building & Re-using Components
31. Passing Data With Props & Dynamic Content
32. Handling Events
33. Adding More Components
34. Introducing State
35. Working with "Event Props"
36. Use The Right React Router Version
37. Adding Routing
38. Adding Links & Navigation
39. Scoping Component Styles With CSS Modules
40. Outputting Lists Of Data & Components
41. Adding Even More Components
42. Creating "Wrapper" Components
43. Working With Forms
44. Getting User Input & Handling Form Submission
45. Preparing The App For Http Requests & Adding a Backend
46. Sending a POST Http Request
47. Navigating Programmatically
48. Getting Started with Fetching Data
49. Using the "useEffect" Hook
50. Introducing React Context
51. Updating State Based On Previous State
52. Using Context In Components
53. More Context Usage
54. Module Summary
55. Module Resources
56. Pages & File-based Routing
57. Module Introduction
58. Our Starting Setup
59. What Is "File-based Routing"? And Why Is It Helpful?
60. Adding A First Page
61. Adding a Named / Static Route File
62. Working with Nested Paths & Routes
63. Adding Dynamic Paths & Routes
64. Extracting Dynamic Path Segment Data (Dynamic Routes)
65. Building Nested Dynamic Routes & Paths
66. Adding Catch-All Routes
67. Navigating with the "Link" Component
68. Navigating To Dynamic Routes
69. A Different Way Of Setting Link Hrefs
70. Navigating Programmatically
71. Adding a Custom 404 Page
72. Module Summary
73. Module Resources
74. Project Time: Working with File-based Routing
75. Module Introduction
76. Planning The Project
77. Setting Up The Main Pages
78. Adding Dummy Data & Static Files
79. Adding Regular React Components
80. Adding More React Components & Connecting Components
81. Styling Components In Next.js Projects
82. & NextJS 13
83. Adding Buttons & Icons
84. Adding the "Event Detail" Page (Dynamic Route)
85. Adding a General Layout Wrapper Component
86. Working on the "All Events" Page
87. Adding a Filter Form for Filtering Events
88. Navigating to the "Filtered Events" Page Progammatically
89. Extracting Data on the Catch-All Page
90. Final Steps
91. Module Summary
92. Module Resources
93. Page Pre-Rendering & Data Fetching
94. Module Introduction
95. The Problem With Traditional React Apps (and Data Fetching)
96. How NextJS Prepares & Pre-renders Pages
97. Introducing Static Generation with "getStaticProps"
98. NextJS Pre-renders By Default!
99. Adding "getStaticProps" To Pages
100. Running Server-side Code & Using the Filesystem
101. A Look Behind The Scenes
102. Utilizing Incremental Static Generation (ISR)
103. ISR: A Look Behind The Scenes
104. A Closer Look At "getStaticProps" & Configuration Options
105. Working With Dynamic Parameters
106. Introducing "getStaticPaths" For Dynamic Pages
107. Using "getStaticPaths"
108. "getStaticPaths" & Link Prefetching: Behind The Scenes
109. Working With Fallback Pages
110. Loading Paths Dynamically
111. Fallback Pages & "Not Found" Pages
112. Introducing "getServerSideProps" for Server-side Rendering (SSR)
113. Using "getServerSideProps" for Server-side Rendering
114. "getServerSideProps" and its Context
115. Dynamic Pages & "getServerSideProps"
116. "getServerSideProps": Behind The Scenes
117. Introducing Client-Side Data Fetching (And When To Use It)
118. Implementing Client-Side Data Fetching
119. A Note About useSWR
120. Using the "useSWR" NextJS Hook
121. Combining Pre-Fetching With Client-Side Fetching
122. Module Summary
123. Module Resources
124. Project Time: Page Pre-rendering & Data Fetching
125. Module Introduction
126. Preparations
127. Adding Static Site Generation (SSG) On The Home Page
128. Loading Data & Paths For Dynamic Pages
129. Optimizing Data Fetching
130. Working on the "All Events" Page
131. Using Server-side Rendering (SSR)
132. Adding Client-Side Data Fetching
133. Module Summary
134. Module Resources
135. Optimizing NextJS Apps
136. Module Introduction
137. Analyzing the Need for "head" Metadata
138. Configuring the "head" Content
139. Adding Dynamic "head" Content
140. Reusing Logic Inside A Component
141. Working with the "_app.js" File (and Why)
142. Merging "head" Content
143. The "_document.js" File (And What It Does)
144. A Closer Look At Our Images
145. Optimizing Images with the "Next Image" Component & Feature
146. Taking A Look At The "Next Image" Documentation
147. Module Summary
148. Module Resources
149. Adding Backend Code with API Routes (Fullstack React)
150. Module Introduction
151. What are "API Routes"?
152. Writing Our First API Route
153. Preparing the Frontend Form
154. Parsing The Incoming Request & Executing Server-side Code
155. Sending Requests To API Routes
156. Using API Routes To Get Data
157. Using API Routes For Pre-Rendering Pages
158. Creating & Using Dynamic API Routes
159. Exploring Different Ways Of Structuring API Route Files
160. Module Summary
161. Module Resources
162. Project Time: API Routes
163. Module Introduction
164. Starting Setup & A Challenge For You!
165. Adding a Newsletter Route
166. Adding Comments API Routes
167. Connecting the Frontend To the Comments API Routes
168. Setting Up A MongoDB Database
169. Running MongoDB Queries From Inside API Routes
170. Inserting Comments Into The Database
171. Getting Data From The Database
172. Adding Error Handling
173. More Error Handling
174. A Final Note On MongoDB Connections
175. Module Summary
176. Improvement: Getting Comments For A Specific Event
177. Module Resources
178. Working with App-wide State (React Context)
179. Module Introduction
180. Our Target State & Starting Project
181. Creating a New React Context
182. Adding Context State
183. Using Context Data In Components
184. Example: Triggering & Showing Notifications
185. Example: Removing Notifications (Automatically)
186. Challenge Solution
187. Module Summary
188. Module Resources
189. Complete App Example: Build a Full Blog A to Z
190. Module Introduction
191. Setting Up The Core Pages
192. Getting Started With The Home Page
193. Adding The "Hero" Component
194. Adding Layout & Navigation
195. Time To Add Styling & A Logo
196. Starting Work On The "Featured Posts" Part
197. Adding A Post Grid & Post Items
198. Rendering Dummy Post Data
199. Adding the "All Posts" Page
200. Working On The "Post Detail" Page

NextJS 13 is an amazing higher level framework, built on top of React, that will totally change the way you think about and build web applications.

In this course, we will learn all about the amazing features NextJS 13 has to offer by building a restaurant reservation application where people can view restaurants and reserve tables.

Firstly we are going to explore the file system in NextJS 13. We are going to learn how to create static and dynamic routes by simply defining files and folders.

We are then going to look at how to handle loading, error, not found, and success states within our application.

Then we will move onto the rendering modes of React components. We will learn about the differences between server and client components and when we should use one over the other.

Following that, we will dive into the server side of NextJS. We will spin up a Postgres database and define the models we need with Prisma (ORM). We will learn how to fetch data from this database, depending on the component we are utilizing.

We will then move to the backend and start defining some authentication endpoints. We will implement authentication for scratch by utilizing middleware, hashers and json web tokens.

The authentication endpoints will be consumed by our client and the user data will be stored  globally with the context API.

We then move onto the completing our application by building the availability and scheduling system. We will utilize multiple algorithms and logical thinking to accomplish this.

1. Introduction
2. Course Outline
3. Course Setup
4. File Based Routing and Navigation
5. [MUST READ] - AN IMPORTANT MESSAGE
6. Create a Next App
7. Exploring the Files and Folders
8. Adding Tailwind CSS
9. Your Two Options
10. Defining the Pages We Want
11. Understanding File Based Routing
12. Creating Those Pages
13. Challenge Solution
14. The Two Ways of Navigating Between Routes
15. The Link Component
16. Programmatic Navigation With the useRouter Hook
17. Next Components (Server and Client)
18. Cleaning Our Code With Components
19. Refactoring Our Pages
20. Some More Refactoring
21. Server vs Client Components
22. Exploring Which Components Should Be Client and Which Should Be Server
23. Defining Page Layouts and Head Meta
24. Our Code is Not Very DRY
25. Placing Universally Used Components in the Root Layout
26. Nested Components
27. Updating the Head Meta for Each Page
28. Fetching Data in Server Components
29. A Little SQL Lesson
30. Connecting to a Postgres Database
31. Defining Our SQL Schema
32. Seeding Our Database
33. How We Fetch Data in Server Components
34. Fetching Data in a Server Component
35. A Little TypeScript Lesson
36. Rendering the Fetched Data
37. A Common Error You Might Encounter
38. Fetching a Restaurant By Slug
39. Populating the Data in the Restaurant Page
40. Fetching the Restaurant's Menu
41. Time to Get Your Hands Dirty
42. Challenge 1 - Add Query Params
43. Solution for Challenge 1
44. Challenge 2 - Fetch Restaurants By Location
45. Solution for Challenge 2
46. Challenge 3 - Populating Data
47. Solution for Challenge 3
48. Challenge 4 - Fetching Data for Side NavBar
49. Solution for Challenge 4
50. Challenge 5 - Adding Query Params
51. Solution for Challenge 5
52. Challenge 6 - Filtering By Query Params
53. Solution for Challenge 6
54. Challenge 7 - Defining the User and Review Model
55. Solution for Challenge 7
56. Challenge 8 - Fetching Reviews Data
57. Solution for Challenge 8
58. Adding a Stars Component
59. More Star Components Stuff...
60. Handling Loading and Error States
61. Introduction to Loading State
62. Adding a Loading State
63. Overriding the Default Loading State
64. Handling Error States
65. Handling Not Found States
66. Implementing Authentication
67. What is Authentication
68. Adding Material UI
69. Adding the Modal Content
70. Completing the Modal Functionality
71. Steps to Implement Authentication
72. Creating an Endpoint
73. Validating the User's Input
74. Validating That the User's Doesn't Already Have an Account
75. Exploring Password Storage Solutions
76. Hashing Our Password
77. Creating a User
78. Creating and Sending a JSON Web Token
79. Implementing the Sign in Endpoint
80. Identifying Users With Json Web Token
81. Adding Middleware
82. Global State With Context API
83. Adding Client Side Validation
84. Creating a Custom useAuth Hook
85. Discussing the Authentication State
86. Creating a AuthContext Component
87. Handling the Loading State
88. Handling the Error State
89. Saving the JWT to Our Browser's Cookie
90. Doing the Same Thing For the Signup Function
91. Persisting an Auth State
92. Fixing the Issue... Sorry
93. Conditionally Rendering UI Based on the Auth State
94. Implementing the Logout Functionaility
95. Building an Availability System
96. Intro to Scheduling and Availability
97. The Rules We Will Follow
98. Rendering the Party Size Options
99. Rendering a DatePicker Component
100. Dynamically Rendering the Time Options
101. Understanding Many to Many Relationships
102. Defining Our New Models
103. The Availability Endpoint Overview
104. Building the Availability Endpoint
105. Step 1: Determining the Search Times
106. Step 2: Fetching the Bookings
107. Step 3: Compressing the Booking
108. Step 4: Fetching the Restaurant Tables
109. Step 5: Reformatting the Search Times
110. Step 6: Filtering Out the Booked Tables
111. Step 7: Determining the Availability
112. Step 8: Filtering by Restaurant Time Window
113. Building a useAvailabilities Hook
114. Storing the Reservation Criteria in State
115. Rendering the Available Time Options
116. Converting the Time to a Displayable Time
117. Building the Scheduling System
118. The Reservation Endpoint
119. Step 1: Validation
120. Step 2.0: Extracting the Table Availability Logic Into it's Own Function
121. Step 2.5: Determining the Available Tables
122. Step 3: Count the Tables Based on Seats
123. Step 4: Determine the Tables to Book
124. Step 5: Creating the Booking and Linking it to the Tables
125. Dynamically Rendering Data for the Reserve Header
126. Extracting the Query Params
127. Storing Our Inputs in State
128. Creating a useReservation Hook
129. Making a Reservation From the Client
130. Showing a Success State
131. Appendix A - Building the UI
132. The Nav and Header
133. The Search Bar and Restaurant Card
134. The Restaurant Page
135. The Title and Description
136. The Image Gallery
137. The Reservation Card
138. The Menu Page
139. The Search Page
140. The Reserve Page

Update (Nov. '23): this course now also covers Server Actions, made stable in Next.js v14 (released Oct. '23), in addition to the other App Router features stable since Next.js v13.4 (May '23).  The first ~10 hours of the course explain the App Router, and the rest the older — but still supported — Pages Router.

Dubbed as “The React Framework for the Web”, Next.js makes it easy to build highly optimized web applications by server-side rendering React components.

This course will guide you through learning Next.js by developing a complete project step by step.

Part I will show you how to use Next.js as a Static Site Generator, prerendering all your pages to static HTML, CSS, and JavaScript.

This will teach you fundamental Next.js concepts such as file-based Routing, Prerendering, React Server Components, the differences between Server and Client Components, and how to fetch data in Server Components.

It will also use the popular Tailwind CSS framework for styling, demonstrate how to embed Custom Fonts into your application, and how to make your pages more SEO-friendly with metadata.

The Deployment section will present you the various options for running your application in production, from using a fully-managed platform like Vercel to performing a Static Export that can be uploaded to any web server.

Part II will show you how to use Next.js as a Full-Stack Framework, enabling features such as Dynamic Rendering, Time-based Revalidation, and On-demand Revalidation.

It will use a Headless CMS — Strapi — to store data, and demonstrate how to call its REST API from the Next.js app, and the various options for updating the frontend pages when the data in the CMS changes.

It will also cover Image Optimization, showing how Next.js can convert and resize your images on-demand, and enable lazy-loading by the browser.

Finally, it will demonstrate how to integrate third-party UI components in your app, and when it can still make sense to use Client-Side Data Fetching.

Part III provides an example of Database Integration, using the Prisma Object/Relational Mapper and an SQL database. It then explains how to process form submissions with Server Actions, and how to optimize page loads use Streaming and Suspense.

You can follow the example using either JavaScript or TypeScript. The full source code is provided, with an easy way to see the changes made in every lecture.

1. Introduction
2. App vs Pages Router
3. Required Tools
4. Updates and Corrections
5. [app] Routing and Layouts
6. Project Overview
7. Creating a Next.js Project
8. Home Page
9. Source Code
10. TypeScript
11. Page Routes
12. Exercise: Add More Pages
13. Nested Layouts
14. [app] Rendering and Navigation
15. Prerendering
16. React Server Components
17. Dev vs Production Server
18. Link Component
19. Prefetching
20. Layout and Navigation
21. Exercise: Review Links
22. [app] Styling
23. Styling Solutions
24. Installing Tailwind CSS
25. Layout Styling
26. Color Palette
27. Heading Component
28. Import Alias
29. [app] Assets and Fonts
30. Static Assets
31. Image Cards
32. Font Optimization
33. Custom Tailwind Font
34. Exercise: Custom Default Font
35. Responsive Design
36. [app] Loading Data
37. Reading Files
38. Rendering Markdown
39. Tailwind CSS Typography
40. Front Matter
41. Data Layer Separation
42. Dynamic Routes
43. Listing Files
44. Rendering Arrays
45. Static Generation for Dynamic Routes
46. Exercise: Featured Review
47. [app] Metadata
48. Title and Meta Tags
49. Title Template
50. Dynamic Metadata
51. Icon and Metadata Files
52. [app] Client Components
53. Share Link Button
54. Client Components
55. Component State
56. Nested Client Components
57. Heroicons
58. [app] Deployment
59. Deployment Options
60. Deploying to Vercel
61. Static Export
62. Static Hosting
63. Self-Hosting
64. [app] Headless CMS
65. Project Phase 2
66. Starting Code
67. Strapi Overview
68. Preloaded CMS Instance
69. Fetch API
70. Strapi API Parameters
71. Get Reviews From CMS - Step 1
72. Get Reviews From CMS - Step 2
73. Get Review From CMS - Step 1
74. Get Review From CMS - Step 2
75. Refactoring: Fetch Reviews
76. Get Slugs From CMS
77. Static Build with CMS Data
78. [app] Image Optimization
79. ESLint
80. Next Image Component
81. Image Conversion
82. Lazy Loading and Priority
83. Exercise: Home Images
84. Subtitles
85. Alternative Image Loaders
86. [app] Dynamic Rendering and Revalidation
87. Dynamic Params
88. Dynamic Rendering
89. Page Not Found
90. Background Revalidation
91. Fetch Cache and Revalidation
92. Webhook Route Handler
93. On-Demand Revalidation
94. Rendering Strategies Comparison
95. [app] Pagination
96. Query String Parameters
97. Pagination with Strapi
98. Page Count
99. Exercise: Pagination Bar
100. Search Params and Dynamic Rendering
101. Exercise: usePathname
102. [app] Client-Side Data Fetching
103. Third-Party Components
104. Client-Only Rendering
105. Combobox Styles
106. Combobox Events
107. Server to Client Props
108. Client-Side Fetch
109. Search Route Handler
110. Calling Route Handlers
111. Cancelling Requests
112. Debouncing Requests
113. [app] Deploying with External Services
114. Environment Variables
115. Configurable Image Source
116. Strapi Cloud
117. Strapi URL for Testing
118. Deploying with Environment Variables
119. [app] Database Integration with Prisma
120. Project Phase 3
121. Starting Code
122. Comments User Interface
123. Choosing a Database
124. Installing Prisma
125. Defining a Model
126. Database Queries
127. Loading Data From the Database
128. Prisma Client and Dev Server
129. [app] Server Actions
130. Forms Before Server Actions
131. Inline Server Action
132. Redirect After Post
133. Revalidate Path
134. Progressive Enhancement
135. Client-Side Form Validation
136. Separate Server Action File
137. Invoking a Server Action
138. Displaying Action Errors
139. Preventing Duplicate Submissions
140. [app] Streaming with Suspense
141. Suspense
142. Skeleton Component
143. Loading File
144. End of the App Router Part
145. [pages] Getting Started
146. Next Blog: Overview
147. Next.js Project Setup
148. Source Code
149. Pre-rendering
150. Development vs Production Server
151. [pages] Routing and Navigation
152. Adding New Pages
153. Next Link Component
154. Shared NavBar Component
155. Custom App Component
156. Next Head Component
157. [pages] Styling
158. Global Styles
159. Component Styles with Styled JSX
160. Images and Other Assets
161. [pages] Loading Data
162. First Post Page
163. Markdown Syntax
164. getStaticProps Function
165. getStaticProps in Production Mode
166. Reading a File
167. Lib Module
168. Rendering Markdown
169. Front Matter
170. Dynamic Route and getStaticPaths
171. Listing Files in a Folder
172. Listing Posts
173. Dynamic Routes in Production Mode
174. [pages] Client-side Functionality
175. ThemeSwitch Component
176. Dark Mode Styles
177. DarkTheme Component
178. Hydration
179. Saving Preferences to Local Storage
180. Feature Detection
181. [pages] Deployment
182. Deployment Options
183. Vercel Platform
184. Exporting as a Static Website
185. Linux Server with Nginx
186. Linux Server with Node.js
187. [pages] Next Shop: Setup
188. Next Shop: Overview
189. Create Next App
190. TypeScript Support
191. Source Code
192. Tailwind CSS Setup
193. Utility-First CSS
194. High-level Architecture
195. Strapi Headless CMS
196. Note: Strapi Version
197. Backend Setup
198. [pages] Data Fetching
199. Displaying Products
200. Fetching Data Server-side

Hello! Welcome to the Next.js 13 Bootcamp - where we'll take you from scratch to building a full-stack app. As you may be aware, Next.js has emerged as one of the most popular web development frameworks in 2023. So, if you come from a web background, learning Next.js would undoubtedly be a beneficial choice for you.

These course will be having the duration of total 10 Hours . In that we will use 50% of the time to cover all the topics in Next JS and then remaining 50% of the time we will build a full stack task manager project by implementing all the concepts which we cover in first 5 Hours.

  Topics we will cover in first 5 Hours

1. What is Next.js? How is it different from React.js? What are the advantages of Next.js over React.js?

2. Folder Structure of New Next JS App

3. Understanding next js static and dynamic pages

4. App Router Features like Layout , Middleware , Errors

5. Next JS Sever Components and Client Components

6. Rendering , Data Fetching , Performing interactions in both client and server components

7. Next JS API's

8. Difference between Next JS API's and Third party server API's

9. Next JS with Mongo DB

10. Connecting to Mongo DB and Performing all CRUD operations

11. Working with POSTMAN and Mongo DB

12. Implementing Redux Toolkit to manage global state

Project - Task Manager

1. Login and Register Pages using Tailwind CSS

2. Authentication API's with JWT Tokens for authorization.

3. Protecting Routes and API's from unauthorized users.

4. Tasks CRUD operation with Mongo DB and Next JS APIS

5. Dashboard with Tasks Reports

6. Filters using Server Side Rendering

7. Deployment to Vercel

Next.js is a popular JavaScript framework for building server-side-rendered React applications. Next.js v13 was released by Vercel at the Next.js conference in October 2022, bringing many new features and improvements. Understanding the complexities of this latest version is essential for developers to utilize its capabilities and build efficient and scalable applications effectively. This article will cover various aspects of the new version, including its unique features, changes from previous versions, and tips for overcoming any challenges that might arise while working with it.

Prerequisites

Must have good knowledge on how React Framework works behind the scenes

Basic knowledge about API's , Endpoints , Request , Response is required to understand the Next JS

Strong knowledge on HTML , CSS , Javascript

A computer / laptop of atleast 4GB Ram with good internet connection

1. Introduction
2. What is Next JS
3. First Project
4. Creating Next App
5. Understanding Folder Structure
6. Do's and Dont's
7. Creating Pages
8. Creating Static Pages
9. Navigation between pages
10. Creating dynamic pages
11. Creating nested pages
12. Reading Query Strings from URL
13. App Router Advanced Featutes
14. Default Layout
15. Custom Layout
16. Not Found / Error Pages
17. Middlewares
18. Server Components vs Client Components
19. Next JS Server and Client Components
20. Rendering in Client Components
21. Rendering in Server Components
22. Interactions in Client and Server Components
23. Using Client Components in Server Components
24. Accessing Browser Resources in Client and Server Components
25. When to Use Server and Client Components
26. Next JS Route Handlers (API's)
27. API's Intro , Handling Get and Post Methods
28. Accessing Query Strings
29. Accessing Request Body
30. Put and Delete Methods
31. Next JS with Mongo DB and POSTMAN Client
32. Connecting to Mongo DB
33. Creating Models
34. Add Operation
35. Get Operation
36. Put Operation
37. Delete Operation
38. Integrating Next API's and Pages
39. Getting Data from API
40. Handling Cache Issues
41. Next JS with Redux Toolkit (State Management)
42. Creating Reducers , Slice , Store
43. Accessing and Manipulating Redux Data
44. Final Project - Task Manager
45. Project Intro and Setup
46. Register Page
47. Login Page
48. Task Manager - Build User Auth API's
49. User Model
50. Mongo Connection & Register API
51. Integrate Register API with UI
52. Login API
53. Integrating with Login API with UI
54. Task Manager - Protecting Pages and APIs
55. Using Middleware
56. Protected Pages
57. Protected API's
58. Getting API data in Server Component
59. Getting API data in Client Component
60. Task Manager - Layout
61. Build Layout
62. Using Redux to Store Global Data
63. Showing Loaders
64. Logout Functionality
65. Task Manager - Tasks CRUD
66. Creating Required Pages
67. Add Task
68. Task Model and API
69. Show Tasks
70. Edit Task - 1
71. Edit Task - 2
72. Delete Task
73. Task Manager - Dashboard and Filters
74. Dashboard API
75. Dashboard UI
76. Tasks Filters
77. Clear Filters
78. Responsiveness and Deployment
79. Making the Project Responsive
80. Deployment To Vercel

Learn a straightforward way to build a real Fullstack web application with React & Next.js + Typescript!

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, etc. No config is required.

Next.js is the production-ready, framework for React JS!

Data fetching in Next.js allows you to render content in different ways. These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration. It can make your applications very fast!

During the course, we'll cover the most important topics.

There're presented TDD or TLD approaches that I'll try to practice with you during the coding sessions. Probably you don't have enough experience with the tests, but it's ok, there's still an excellent way to learn it from the course. When you work with code and cover it with test cases, it provides you with guarantees that your code works as you expected. This is the purpose and benefit of the tests.
Tools for testing: Jest, React Testing Library

Storybook is the most popular way to build the components library. From our side, it's the most basic part of the course. We'll install and configure Storybook, which will provide us with a full components spec. This approach is called Components Driven Development.
CSS-IN-JS, EmotionJS, and Styled-Components are very powerful toolkits to build UI components. Even very complex component styles can be easily produced and supported by it.

We create Dark and Light modes for your application with EmotionJS and styled-components API and NextJS!

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want. We create our deployment workflow!

Last but not least it's Redux. Redux is a beautiful way to manage an application state. We'll use the Redux-Toolkit library - it simplifies the work with Redux.
Check out the full curriculum and free preview videos. Join the course risk-free with a 30-day money-back guarantee!
See you on the course!

1. Intro
2. Create-next-app with Typescript
3. Github repo review
4. NextJS and Storybook
5. Images Optimization and Storybook
6. Prettier
7. CSS-IN-JS. EmotionJS
8. The first component
9. Review
10. The power of Storybook
11. JSX at Glance
12. JSX compilation
13. Jest and React Testing Library
14. Dark / Light themes in Storybook
15. Aliases, Fonts and Global styles
16. Aliases and themes for Jest
17. Storybook addon interactions
18. Storybook addon a11y
19. Visual testing and Chromatic
20. Review
21. Storybook and Components Library
22. Tile component
23. Icon component
24. Refactoring
25. Checkbox component
26. Custom hook useId
27. Switch component
28. Logo component
29. Icon Button
30. Input component part 1
31. Input component part 2
32. Input component refactoring
33. Basic layout and pages
34. Create basic layout part 1
35. Create basic layout part 2
36. Theme toggler
37. Next Image and Course component
38. Course component refactoring
39. Home page part 1
40. Home page part 2
41. Custom 404 error page
42. Versel deploy
43. Github Actions and Chromatic
44. CI Test + Lint
45. Review
46. Login and Registration
47. Intro and refactoring
48. Strapi init
49. User, roles and auth flow
50. Login page part 1
51. Login page part 2
52. React hook form and login
53. React hook form, validation and tests
54. Fix styles, add login button
55. Theme toggle flicker fix
56. Registration page
57. User Page and review
58. Auth flow and Redux
59. Update deps
60. State management and Redux-Toolkit
61. User slice
62. Async actions
63. Async actions tests
64. Integration tests and msw
65. Login / Registration flow
66. React-redux and login flow
67. React-redux in Jest and Storybook
68. Full login flow and registration
69. Add page test cases
70. Content with Next and Strapi
71. Upgrade Strapi
72. Add courses endpoint with data
73. SSG, getStaticProps and index page
74. Fix tests and storybook
75. Review deploy with docker and AWS
76. Fix deploy problem
77. Course page, SSG and getStaticPath
78. Search input behavior
79. Search courses
80. SSR + getServerSideProps
81. Fix problems and review