> Markdown version of [/playlists/next-js](https://www.wearedevelopers.com/playlists/next-js). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Playlist: Next.js 16 videos · 30 moments · 91.0 minutes ## GraphQL + Apollo + Next.js: A Lovely Trio - **Scaffolding pages and routing single-page applications with Next.js** (01:34, 4min) — How Next.js manages view state and accelerates performance through single-page application and prefetching. - **Introduction to the GraphQL, Apollo, and Next.js stack** (00:03, 1min) — An overview of combining GraphQL, Next.js, and Apollo to build modern web applications. - **Fetching data using static and server-side Next.js props** (06:05, 5min) — Implementing performant data loading utilizing static site generation, incremental static regeneration, and server-side rendering. - **Configuring automatic TypeScript support for Next.js applications** (13:49, 2min) — How Next.js automatically detects and configures TypeScript compilation while providing precise property types for server loading. - **Building dynamic router paths inside a Next.js application** (11:55, 1min) — How to use file-based dynamic routes and extract query parameters using the Next.js router hook. [Learn more](https://www.wearedevelopers.com/videos/311-graphql-apollo-next-js-a-lovely-trio) ## Create a Programmatic SEO Project Using Next.js and Static Site Generation - **Selecting Next.js for hybrid static and server rendering** (09:50, 1min) — Adopting a batteries-included framework to dynamically construct HTML layouts instead of manually duplicating static files. - **File-based routing and pre-rendering architecture in Next.js** (11:29, 1min) — How built-in automated pre-rendering serves immediate HTML to search bots while preserving interactive client-side hydration. - **Connecting a backend API to the Next.js frontend** (14:35, 1min) — Serving an integration catalog from a dedicated API to supply the static generator with structured information. [Learn more](https://www.wearedevelopers.com/videos/449-create-a-programmatic-seo-project-using-next-js-and-static-site-generation) ## Next.js Unleashed: Optimizing Web Vitals for superior User Experience - **Leveraging the Next.js framework for performance improvements** (08:09, 3min) — Next.js provides built-in server-side rendering and static site generation to effectively overcome standard single-page application bottlenecks. - **Optimizing images for stable layouts and visual performance** (11:15, 3min) — Replacing standard HTML image tags with the Next.js image component automatically enables responsive resizing and modern formats like WebP. - **Building a personal app and discovering poor performance** (00:03, 3min) — Constructing a simple application reveals unexpected front-end performance bottlenecks measured by a low Lighthouse baseline score. [Learn more](https://www.wearedevelopers.com/videos/973-next-js-unleashed-optimizing-web-vitals-for-superior-user-experience) ## Streaming AI Responses in Real-Time with SSE in Next.js & NestJS - **Full stack architecture for server-sent events using Next.js** (06:28, 2min) — Native browser APIs and backend frameworks enable seamless data streaming while integrating authentication and rate limiting. - **Implementing streaming endpoints for OpenAI and Gemini models** (09:20, 3min) — Configuring proxy headers and utilizing provider SDKs ensures reliable chunk-by-chunk delivery to the client. [Learn more](https://www.wearedevelopers.com/videos/1630-streaming-ai-responses-in-real-time-with-sse-in-next-js-nestjs) ## Meta Harnesses: What the JS Framework Wars Teach Us About What Is Next for AI Agents - **The rise of meta-frameworks like Next.js** (06:45, 1min) — Missing application-level standards in React led to the creation of meta-frameworks that combine routing and rendering cohesively. [Learn more](https://www.wearedevelopers.com/videos/100353-meta-harnesses-what-the-js-framework-wars-teach-us-about-what-is-next-for-ai-agents) ## Vision for Websites: Training Your Frontend to See - **Architecting a multimodal storefront interface using Next.js** (20:52, 2min) — Wiring frontend UI components to remote API routes securely hands text and image queries off to backend machine learning tools. [Learn more](https://www.wearedevelopers.com/videos/1213-vision-for-websites-training-your-frontend-to-see) ## Teini - an extremely small webshop leveraging awesome and free tech - **Generating dynamic product detail pages in Next.js** (26:34, 7min) — Implementing getStaticPaths maps database configurations to URL parameters across dynamically nested routing files to resolve single product views. - **Core technologies for a tiny e-commerce stack** (01:26, 0min) — Combining Prisma, Next.js, and Stripe creates an easy-to-maintain headless webshop architecture. - **Initializing a Prisma development environment in Next.js** (01:58, 2min) — Adding Prisma as a dependency establishes the foundation for managing a local SQLite database directly within the project. [Learn more](https://www.wearedevelopers.com/videos/286-teini-an-extremely-small-webshop-leveraging-awesome-and-free-tech) ## From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners - **Setting up a Next.js application with the app router** (04:12, 2min) — Bootstrapping a new project format and understanding directory architecture changes in a stable release. - **Summary of modern Next.js web development toolchains** (26:13, 1min) — Final recaps emphasizing the progressive workflow enhancements provided by newer meta-framework architectures. - **Benefits of using Next.js and Tailwind CSS frameworks** (00:04, 1min) — Why meta-frameworks improve development speed and how tailored styling systems simplify component creation. - **Exploring the legacy Next.js file-based pages router** (01:54, 2min) — A review of file-based routing and application structure paradigms in older Next.js versions. [Learn more](https://www.wearedevelopers.com/videos/766-from-zero-to-hero-nextjs-13-and-tailwind-css-for-beginners) ## tRPC: API schemas are pure overhead - **Live coding a Next.js application with tRPC** (05:40, 6min) — Configuring a shared app router allows backend method changes to instantly surface as frontend build errors. [Learn more](https://www.wearedevelopers.com/videos/796-trpc-api-schemas-are-pure-overhead) ## Security in modern Web Applications - OWASP to the rescue! - **Introducing the Next.js security module port** (21:04, 3min) — Expanding default HTTP protection rules to the React ecosystem requires adapting middleware patterns for data fetching. [Learn more](https://www.wearedevelopers.com/videos/724-security-in-modern-web-applications-owasp-to-the-rescue) ## Web-Fragments: incremental micro-frontends migration approach for enterprise - **Modernizing legacy client-rendered components with server-side frameworks** (09:59, 3min) — Migrating heavy client-side React domains to server-side frameworks like Next.js and Qwik substantially improves initial page loading speed. [Learn more](https://www.wearedevelopers.com/videos/1587-web-fragments-incremental-micro-frontends-migration-approach-for-enterprise) ## Microfrontends at Scale - **Selecting opinionated frameworks for hybrid frontend generation tasks** (28:17, 1min) — Adopting feature-complete libraries like Next.js simplifies hybrid server and static rendering over custom webpack setups. [Learn more](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) ## New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw - **Analyzing the deprecation of the Create React App tool** (24:45, 8min) — The shift away from simple React templates pushes beginners toward more complex meta-frameworks like Next.js. [Learn more](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) ## Build Your Own Subscription-based Course Platform - **Architecture and tech stack for the course platform** (02:01, 3min) — An overview of the tools used to build the application, including Next.js, Stripe, Supabase, and GraphCMS. [Learn more](https://www.wearedevelopers.com/videos/321-build-your-own-subscription-based-course-platform) ## Going Beyond Passwords: The Future of User Authentication - **Integrating passwordless authentication with magic links and SMS** (09:14, 3min) — Implementing one-time codes and magic links via the Auth0 Next.js SDK establishes secure passwordless environments. [Learn more](https://www.wearedevelopers.com/videos/714-going-beyond-passwords-the-future-of-user-authentication) ## SSO with Ethereum and Next JS - **Introduction to single sign-on with Ethereum** (00:00, 1min) — An overview of utilizing Ethereum wallets to authenticate users within Next.js applications. [Learn more](https://www.wearedevelopers.com/videos/288-sso-with-ethereum-and-next-js)