Next JS: The Complete Developer’s Guide
-
Get Started Here!How to Learn NextJS Quickly0sA Note about TurbopackProject Overview0sFile-Based Routing0sAdding Additional Routes0sLinking Between Pages0sCommon UI in Next JS with Layouts0sProject Structure Strategy0sAbsolute Path Import Shortcut0sImage Files + Import UpdateAdding Images in Next JS0sMore on the Image Component0sAdding a Reusable Presentation Component0sAdding Some Styling0sProduction Deployment with Vercel0sJoin Our Community!Course Diagrams
-
Changing Data with Mutations
-
Streaming Content with React Server ComponentsIntroducing Server Actions in Next.js0sA Deeper Dive into Server Actions0sServer Components vs Client Components0sFetching Data with Server Components0sAdding Dynamic Paths0sAsync Dynamic Params in Next.js 15Fetching Particular Records0sCustom Not Found Pages0sAutomatic Loading Spinnners0sA Few Quick Tasks0sStyling the Show Page0sLinking to the Edit Page0sMore Async Dynamic Params In Next.js 15Showing a Client Component in a Server Component0sAdding the Monaco Editor0sHandling Editor Changes0s
-
Server Actions in Great Detail
-
Server Forms with the UseFormState Hook
-
Understanding Next’s Caching System
-
Authentication with Next-AuthRequired Boilerplate for Application through Section 10Project Overview0sCritical Libraries in Our Project0sNextUI Setup0sPrisma Schema FileDatabase Setup0sOAuth Setup0sNext-Auth Setup0sThe Theory Behind OAuth0sWrapping Auth in Server Actions0sSign In, Sign out, and Checking Auth Status0sUpfront Design Process0sWhy Path Helpers?0sPath Helper Implementation0sCreating the Routing Structure0sStubbing Out Server Actions0sPlanning Revalidating Strategies0sBuilding the Header0sDisplaying the Sign In and Sign Out Buttons0sEnabling Sign Out0sMore Caching Issues0sStatic Caching While Using Auth0sCreating Topics0sCreating a Popover Form0sReceiving Form Data0sAdding Form Validation with Zod0sReminder on the UseFormState Hook0suseAction State in Next.js 15Fixing UseFormState Type Errors0sHere’s Our FormState Type0sBreaking Changes in Forms with React 19Displaying Validation Errors0sHandling General Form Errors0sHandling Database Errors in Forms0s
-
Using Data – Database QueriesReplacing useFormStatus with useActionStateShowing Loading Spinners0sFetching and Listing Content from Prisma0sMore Async Dynamic Params in Next.js 15Scaffolding the Topic Show Page0sMore useActionState in Next.js 15Displaying a Creation Form0sFormButton and Hook Name UpdateApplying Validation to Post Creation0sChecking Authentication Status0sPassing Additional Args to a Server Action0sType ‘string | undefined’ is not assignable to type ‘string’ FixCreating the Record0sA Few Project FilesMerging a Few Files0sConsiderations Around Where to Fetch Data0sData Fetching in Child Components0sRecommended Data Fetching0sDefine in Parent, Fetch in Child0sAlternative Type Names and Query Definitions0sDon’t Go Crazy With Reuse0sComment Creation0sRecursively Rendering Components0sFetching the Big List0s
-
Caching with Request Memoization
-
Implementing Search FunctionalityAdding in Component Streaming0sStreaming with Suspense0sAdding a Loading Skeleton0sTop Posts on the HomePage0sBack to the Search Input0sNotes on QueryStrings in Next0sAccessing the Query String0sRedirecting From a Server Action0sEven More Async Dynamic Params in Next.js 15Receiving the Query String in a Server Component0sRunning the Search0sThe De-Opt to Client Side Rendering Warning0sWrap Up!0sDeploying Discuss App to Vercel with Postgres
-
Supplement – React PrimerA Note About the Following LecturesLet’s Build an App!0sCritical Questions0sA Few More Critical Questions0sNode Setup0sStarter Project FilesLaunching the Application0sWhat is Create React App0sShowing Basic Content0sWhat is JSX?0sPrinting JavaScript Variables in JSX0sShorthand JSX Expressions0sTypical Component Layouts0sCustomizing Elements with Props0sConverting HTML to JSX0sApplying Styling in JSX0sExtracting Components0sModule Systems Overview0sCheatsheet for JSXProject Overview0sCreating Core Components0sIntroducing the Props Systems0sPicturing the Movement of Data0sAdding Props0sUsing Argument Destructuring0sReact Developer Tools0sMost Common Props Mistake0sImages for the AppIncluding Images0sHandling Image Accessibility0sReview on How CSS Works0sAdding CSS Libraries with NPM0sA Big Pile of HTML!0sLast Bit of Styling0s
-
Supplement – TypeScript PrimerA Note About the Following LecturesTypeScript Overview0sEnvironment Setup0sImportant Update About ts-node and AxiosA First App0sExecuting TypeScript Code0sOne Quick Change0sCatching Errors with TypeScript0sCatching More Errors!0sTypes0sMore on Types0sExamples of Types0sWhere Do We Use Types0sType Annotations and Inference0sAnnotations with Variables0sObject Literal Annotations0sAnnotations Around Functions0sUnderstanding Inference0sThe “Any” Type0sFixing the “Any” Type0sDelayed Initialization0sWhen Inference Doesn’t Work0sMore on Annotations Around Functions0sInference Around Functions0sAnnotations for Anonymous Functions0sVoid and Never0sDestructuring with Annotations0sAnnotations Around Objects0sArrays in TypeScript0sWhy Typed Arrays?0sMultiple Types in Arrays0sWhen to Use Typed Arrays0sTuples in TypeScript0sTuples in Action0sWhy Tuples?0sInterfaces0sLong Type Annotations0sFixing Annotations with Interfaces0sSyntax Around Interfaces0sFunctions in Interfaces0sCode Reuse with Interfaces0sGeneral Plan with Interfaces0s
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.
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.
What's included
- 15.5 hours on-demand video
- 27 articles
- 116 downloadable resources
- Access on mobile and TV
- Certificate of completion