Next.JS Masterclass: Learn NextJS by Building Modern Web App

Master Next.js pages and file-based routing to build navigable apps with automatic routes from your pages folder, including nested routes and client-side transitions using next/link.

Learn to build dynamic and nested routes in Next.js with TypeScript, creating pages that adapt to URL parameters and display nested user and post identifiers using router and params.

Explore api routes in next.js, handle requests and dynamic routes. Return json responses and build simple backend logic, including hello and post examples.

Learn to manage static assets and metadata in a Next.js with TypeScript project, including public assets and global CSS for a fast, professional web app.

Style your Next.js TypeScript app using CSS, Sass modules, and Tailwind CSS. Learn global styles, CSS modules, Sass modules, and utility-first Tailwind classes through practical examples.

Explore how getStaticProps and getStaticPaths enable static site generation with Next.js and TypeScript. Build fast, SEO-friendly pages and dynamic routes using static props.

Learn how getServerSideProps in Next.js fetches data on every request, enabling dynamic content. Build a server-side example that retrieves data from an API and passes it as props.

Master client-side data fetching in next.js by using useEffect, swr, and axios to load data after render for real-time data and authenticated routes.

Explore SWR's stale-while-revalidate data fetching in Next.js, leveraging caching and background revalidation for efficient remote data retrieval. Implement mutate for manual revalidation to keep the UI fresh without full reloads.

Learn to implement authentication in a Next.js app using NextAuth.js, including email sign-in and Google provider, with login, protected routes, and session management.

Explore JWT-based authentication in a Next.js app by building a JWT utility, signing and verifying tokens with a secret key, and issuing http-only cookies on login.

Explore role-based authentication in a Next.js app by protecting routes with admin and editor roles, using an authentication context, router redirects, and conditional component rendering for a secure, user-specific dashboard.

Protect routes in Next.js using client-side guards and server-side redirects. Implement token-based authentication with cookies to guard dashboard and admin pages.

Explore the context API to simplify global state management in a Next.js app, replacing prop drilling with a theme context and provider.

Master redux toolkit in a Next.js app by configuring the store and a counter slice with increment, decrement, and reset, then wrap the app with the provider.

Zustand for lightweight state management in a Next.js app, using hooks, no context provider, with a counter store featuring increase, decrease, and reset.

Learn how to optimize images in a Next.js app with the next/image component, showcasing resizing, lazy loading, responsive layouts, and handling local and external images for better performance and SEO.

Optimize loading of external and inline scripts in a Next.js app with the next/script component, using after interactive, before interactive, and lazy loading for performance and SEO.

Master incremental static regeneration to boost Next.js app speed and scalability by regenerating static pages in the background with revalidate and on-demand API routes.

Build RESTful APIs with Next.js using API routes, performing get, post, and delete operations. Create serverless endpoints, return JSON, and test with simple user data.

Connects your Next.js app to MongoDB with mongoose, PostgreSQL via Prisma, and Firebase Firestore in real time for dynamic data.

Set up Prisma with Next.js and SQLite to build a full-stack app. Create a post API route, use Prisma client, and render posts on the home page with server-side rendering.

Deploy your Next.js app on Vercel using Git integration, environment variables, and build optimizations to deliver a production-ready, high-performance deployment workflow.

Deploy your Next.js app to the web using Netlify, DigitalOcean, or AWS Amplify, from static export to full server hosting.

Learn how Next.js middleware runs code before requests, enabling authentication redirects and rewrites, including cookie-based token checks and dashboard protection. Explore geo-based content customization using request geo data and headers.

Learn to implement internationalization in Next.js by configuring i18n in next.config.js, defining English, French, and German locales, using the useTranslation hook, and loading server-side translations with getStaticProps.