Next JS: The Complete Developer's Guide
Congratulations! You’re on the brink of entering the fast-evolving world of NextJS, designed to empower developers with the tools to create high-performance, feature-rich web applications that stand out in the modern digital landscape. NextJS is the key to unlocking the full potential of server-rendered React applications, combining the best of web development into one powerful, developer-friendly framework. This comprehensive course takes you on a deep dive into advanced NextJS features that can set you apart in the job market, equipping you to tackle real-world projects with confidence. By exploring the intricacies of authentication with the Next-Auth library, the innovative approach to data mutations using server actions, and the foundational concepts of server and client components, you'll be well on your way to mastering modern web development.
With the tech industry looking for skilled professionals, mastering Next puts you at the forefront of opportunity, with a skill set that's in high demand. Whether you're eyeing a new career as a software engineer or aiming to enhance your existing projects, there's never been a better time to delve into Next.
More
What will you achieve?
Through an extensive collection of video lectures complemented by detailed diagrams and real-world examples, this course ensures a thorough understanding of Next's capabilities, no pre-existing knowledge of the framework necessary. I've crafted a learning experience that's both rigorous and encouraging, with layers of knowledge built one at a time and ample dialogue to contextualize each feature of Next.
I proudly offer the most detailed journey through Next available online. No stone is left unturned in this resource-packed adventure.
Prepare to conquer a diverse array of topics, including:
- Implementing user authentication flows with next-auth, for secure and scalable user management
- Effectively structuring server actions to handle data mutations
- Dissecting the theory of server vs client components, and knowing how to leverage each for maximum efficiency
- Mastering data validation techniques to ensure the reliability and integrity of user input
- Navigating Next's sophisticated caching systems to deliver lightning-fast content performance
- Recognizing the critical differences between development and production environments and preparing your applications for successful deployment
- Tailoring Server-Side Rendering (SSR) and Static Site Generation (SSG) to your application's needs
- Utilizing Incremental Static Regeneration (ISR) for the best of SSR and SSG
- Enriching user interfaces with TailwindCSS support for styling components
- Optimizing images on-the-fly with Next's Image component for better performance and user experience
- Deploying your Next applications with Vercel and other hosting platforms with ease
- Leveraging TypeScript with Next for robust, type-safe applications
With each new topic, you’ll gain knowledge, proficiency, and the assurance to apply what you’ve learned to practical scenarios.
Embrace the opportunity to define the future of web development with your newly acquired NextJS expertise. Join the ranks of developers who not only follow best practices but also contribute to them. Sign up now and transform your understanding and execution of modern web development with Next.
Watch Online Next JS: The Complete Developer's Guide
| # | Title | Duration |
|---|---|---|
| 1 | How to Learn NextJS Quickly | 03:59 |
| 2 | Project Overview | 03:32 |
| 3 | File-Based Routing | 06:44 |
| 4 | Adding Additional Routes | 03:49 |
| 5 | Linking Between Pages | 03:04 |
| 6 | Common UI in Next JS with Layouts | 05:43 |
| 7 | Project Structure Strategy | 03:40 |
| 8 | Absolute Path Import Shortcut | 02:17 |
| 9 | Adding Images in Next JS | 06:12 |
| 10 | More on the Image Component | 08:31 |
| 11 | Adding a Reusable Presentation Component | 07:30 |
| 12 | Adding Some Styling | 05:34 |
| 13 | Production Deployment with Vercel | 04:47 |
| 14 | App Overview | 01:32 |
| 15 | Project Setup | 03:51 |
| 16 | Adding a Create Page | 02:16 |
| 17 | Creating a Prisma Client within Next.js | 02:15 |
| 18 | Adding a Creation Form | 05:52 |
| 19 | Introducing Server Actions in Next.js | 10:38 |
| 20 | A Deeper Dive into Server Actions | 02:49 |
| 21 | Server Components vs Client Components | 08:51 |
| 22 | Fetching Data with Server Components | 03:52 |
| 23 | Adding Dynamic Paths | 04:57 |
| 24 | Fetching Particular Records | 05:07 |
| 25 | Custom Not Found Pages | 05:09 |
| 26 | Automatic Loading Spinnners | 03:01 |
| 27 | A Few Quick Tasks | 06:26 |
| 28 | Styling the Show Page | 02:58 |
| 29 | Linking to the Edit Page | 03:29 |
| 30 | Showing a Client Component in a Server Component | 09:54 |
| 31 | Adding the Monaco Editor | 05:04 |
| 32 | Handling Editor Changes | 03:22 |
| 33 | Server Actions in Nextjs Client Components | 05:44 |
| 34 | Server Actions in a Separate File | 03:37 |
| 35 | Options for Calling Server Actions from Client Components | 07:34 |
| 36 | Calling a Server Action from a Client Component | 05:00 |
| 37 | Deleting a Record with a Server Action | 03:28 |
| 38 | Understanding the UseFormState Hook | 07:11 |
| 39 | UseForm State in Action | 06:55 |
| 40 | Adding the Form Validation | 03:36 |
| 41 | Gotchas Around Error Handling in Nextjs | 09:49 |
| 42 | Super Unexpected Behavior | 02:17 |
| 43 | The Full Route Cache System | 04:03 |
| 44 | What Makes a Static or Dynamic Route in Next.js | 05:11 |
| 45 | When to Use Each Cache Control | 05:19 |
| 46 | Help, My Page is Showing Old Data! | 04:07 |
| 47 | Enabling Caching with GenerateStaticParams | 02:38 |
| 48 | Caching Dynamic Routes | 06:19 |
| 49 | Project Overview | 03:36 |
| 50 | Critical Libraries in Our Project | 02:51 |
| 51 | NextUI Installation and Setup | 06:59 |
| 52 | Database Setup | 04:51 |
| 53 | OAuth Setup | 05:49 |
| 54 | Next-Auth Setup | 08:18 |
| 55 | The Theory Behind OAuth | 08:14 |
| 56 | Wrapping Auth in Server Actions | 03:05 |
| 57 | Sign In, Sign out, and Checking Auth Status | 12:11 |
| 58 | Upfront Design Process | 06:53 |
| 59 | Why Path Helpers? | 03:50 |
| 60 | Path Helper Implementation | 03:35 |
| 61 | Creating the Routing Structure | 03:23 |
| 62 | Stubbing Out Server Actions | 06:03 |
| 63 | Planning Revalidating Strategies | 07:18 |
| 64 | Building the Header | 08:14 |
| 65 | Displaying the Sign In and Sign Out Buttons | 05:04 |
| 66 | Enabling Sign Out | 05:54 |
| 67 | More Caching Issues | 06:16 |
| 68 | Static Caching While Using Auth | 08:53 |
| 69 | Creating Topics | 05:15 |
| 70 | Creating a Popover Form | 05:08 |
| 71 | Receiving Form Data | 02:59 |
| 72 | Adding Form Validation with Zod | 09:08 |
| 73 | Reminder on the UseFormState Hook | 02:41 |
| 74 | Fixing UseFormState Type Errors | 05:16 |
| 75 | Here's Our FormState Type | 04:56 |
| 76 | Displaying Validation Errors | 02:45 |
| 77 | Handling General Form Errors | 06:06 |
| 78 | Handling Database Errors in Forms | 09:14 |
| 79 | Showing Loading Spinners with UseFormStatus | 07:06 |
| 80 | Fetching and Listing Content from Prisma | 06:31 |
| 81 | Scaffolding the Topic Show Page | 03:04 |
| 82 | Displaying a Creation Form | 06:09 |
| 83 | Applying Validation to Post Creation | 09:19 |
| 84 | Checking Authentication Status | 02:48 |
| 85 | Passing Additional Args to a Server Action | 09:23 |
| 86 | Creating the Record | 04:59 |
| 87 | Merging a Few Files | 04:16 |
| 88 | Considerations Around Where to Fetch Data | 10:57 |
| 89 | Data Fetching in Child Components | 11:39 |
| 90 | Recommended Data Fetching | 04:27 |
| 91 | Define in Parent, Fetch in Child | 08:39 |
| 92 | Alternative Type Names and Query Definitions | 03:56 |
| 93 | Don't Go Crazy With Reuse | 04:53 |
| 94 | Comment Creation | 01:13 |
| 95 | Recursively Rendering Components | 04:51 |
| 96 | Fetching the Big List | 09:43 |
| 97 | Multiple Repeated DB Queries | 02:12 |
| 98 | Introducing Duplicate Queries | 04:52 |
| 99 | Request Memoization | 04:11 |
| 100 | Deduplicating Requests with Cache | 02:26 |
| 101 | Adding in Component Streaming | 04:23 |
| 102 | Streaming with Suspense | 03:20 |
| 103 | Adding a Loading Skeleton | 03:45 |
| 104 | Top Posts on the HomePage | 04:28 |
| 105 | Back to the Search Input | 01:52 |
| 106 | Notes on QueryStrings in Next | 06:22 |
| 107 | Accessing the Query String | 02:19 |
| 108 | Redirecting From a Server Action | 03:27 |
| 109 | Receiving the Query String in a Server Component | 02:35 |
| 110 | Running the Search | 04:41 |
| 111 | The De-Opt to Client Side Rendering Warning | 02:52 |
| 112 | Wrap Up! | 02:41 |
| 113 | Let's Build an App! | 07:57 |
| 114 | Critical Questions | 05:50 |
| 115 | A Few More Critical Questions | 08:52 |
| 116 | Node Setup | 01:59 |
| 117 | Creating a React Project | 02:39 |
| 118 | What is Create React App | 05:51 |
| 119 | Showing Basic Content | 06:42 |
| 120 | What is JSX? | 05:49 |
| 121 | Printing JavaScript Variables in JSX | 04:30 |
| 122 | Shorthand JSX Expressions | 01:52 |
| 123 | Typical Component Layouts | 01:59 |
| 124 | Customizing Elements with Props | 07:37 |
| 125 | Converting HTML to JSX | 05:08 |
| 126 | Applying Styling in JSX | 06:14 |
| 127 | Extracting Components | 04:27 |
| 128 | Module Systems Overview | 16:07 |
| 129 | Project Overview | 05:38 |
| 130 | Creating Core Components | 05:01 |
| 131 | Introducing the Props Systems | 04:52 |
| 132 | Picturing the Movement of Data | 06:07 |
| 133 | Adding Props | 03:05 |
| 134 | Using Argument Destructuring | 04:58 |
| 135 | React Developer Tools | 02:38 |
| 136 | Most Common Props Mistake | 04:44 |
| 137 | Including Images | 08:10 |
| 138 | Handling Image Accessibility | 06:40 |
| 139 | Review on How CSS Works | 06:11 |
| 140 | Adding CSS Libraries with NPM | 05:58 |
| 141 | A Big Pile of HTML! | 09:39 |
| 142 | Last Bit of Styling | 05:46 |
| 143 | TypeScript Overview | 06:20 |
| 144 | Environment Setup | 08:00 |
| 145 | A First App | 04:44 |
| 146 | Executing TypeScript Code | 05:04 |
| 147 | One Quick Change | 03:36 |
| 148 | Catching Errors with TypeScript | 07:23 |
| 149 | Catching More Errors! | 05:16 |
| 150 | Types | 05:13 |
| 151 | More on Types | 05:54 |
| 152 | Examples of Types | 04:50 |
| 153 | Where Do We Use Types | 00:50 |
| 154 | Type Annotations and Inference | 02:04 |
| 155 | Annotations with Variables | 04:54 |
| 156 | Object Literal Annotations | 06:54 |
| 157 | Annotations Around Functions | 05:57 |
| 158 | Understanding Inference | 03:52 |
| 159 | The "Any" Type | 07:48 |
| 160 | Fixing the "Any" Type | 01:50 |
| 161 | Delayed Initialization | 03:06 |
| 162 | When Inference Doesn't Work | 04:38 |
| 163 | More on Annotations Around Functions | 04:57 |
| 164 | Inference Around Functions | 06:09 |
| 165 | Annotations for Anonymous Functions | 01:43 |
| 166 | Void and Never | 02:50 |
| 167 | Destructuring with Annotations | 03:36 |
| 168 | Annotations Around Objects | 07:06 |
| 169 | Arrays in TypeScript | 05:06 |
| 170 | Why Typed Arrays? | 04:31 |
| 171 | Multiple Types in Arrays | 02:58 |
| 172 | When to Use Typed Arrays | 00:55 |
| 173 | Tuples in TypeScript | 04:06 |
| 174 | Tuples in Action | 05:29 |
| 175 | Why Tuples? | 03:21 |
| 176 | Interfaces | 01:27 |
| 177 | Long Type Annotations | 04:43 |
| 178 | Fixing Annotations with Interfaces | 04:37 |
| 179 | Syntax Around Interfaces | 03:32 |
| 180 | Functions in Interfaces | 04:47 |
| 181 | Code Reuse with Interfaces | 04:16 |
| 182 | General Plan with Interfaces | 03:13 |
Similar courses to Next JS: The Complete Developer's Guide
Next.js & React with ChatGPT - Development Guide (2023)
Duolingo Clone
Stripe for SaaS
Full Stack Development
Shadcn UI & Next JS - Build beautiful dashboards with shadcn
Next.js From Scratch 2024
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
