TechPrufer
Get started
Vercel
Vercel logoVercel · Feature trail

Next.js Framework Evolution

19 posts · Oct 2016 – Sep 2026

What this trail covers

Vercel's platform continues to evolve its support for modern JavaScript frameworks like Next.js, integrating advanced caching, streaming SSR, and per-route runtime selection across Node.js and Edge runtimes. This evolution includes optimizations for SEO best practices such as Incremental Static Regeneration (ISR), image optimization, code splitting, and font optimization, all contributing to improved user experience and search engine ranking. React 18 introduces Server Components, Client Components. The platform also actively engages in securing the ecosystem by identifying and mitigating vulnerabilities in dependencies like libheif, ensuring the safety of image optimization features.

All Vercel trails
  1. Reproducing, disclosing, and fixing the libheif vulnerability with Hacktron and the maintainersThis post details the discovery, reproduction, and mitigation of a remote code execution (RCE) vulnerability in libheif, an AVIF image decoder used by Next.js image optimization. It outlines the dependency chain from Next.js's `<Image>` component through sharp and libvips to libheif. Vercel implemented a platform-wide mitigation by disabling AVIF optimization in its Image Optimization Service. The post also describes the coordination with Hacktron and upstream maintainers of sharp, libvips, and libheif for a fix, and the subsequent security release by Next.js that disabled AVIF optimization as a timely mitigation.
  2. Next.js 16.3 support on VercelThis post details Vercel's platform improvements to support Next.js 16.3, focusing on immutable static assets and faster routing at scale. For immutable static assets, Vercel now supports reusing these across deployments, reducing CDN requests by 17% and bytes transferred by 24% for static content, and speeding up deployments by up to 30%. For routing, Vercel improved the route metadata serving layer, making it ~2x faster with ~10x fewer cache misses by combining metadata entries into JSONL-formatted shards. Additionally, observability has been enhanced to query prefetch requests and introduced observability for Partial Prerendering (PPR).
  3. Introducing: React Best PracticesThis post introduces a new framework for React best practices, designed to proactively address common performance issues like async waterfalls, large client bundles, and unnecessary re-renders. It organizes over 40 rules across 8 categories, prioritizing critical fixes like eliminating waterfalls and reducing bundle size. The framework includes code examples and is packaged as Agent Skills for integration with AI coding agents, enabling consistent application of these practices across codebases.
  4. Running Next.js in ChatGPT: How to Build ChatGPT AppsThis post details how to run a full Next.js application within ChatGPT's nested iframe architecture. It addresses specific technical challenges including: 1. Asset loading by setting `assetPrefix` in `next.config.ts`. 2. Relative URL resolution by using the HTML `<base>` element. 3. Patching `history.pushState` and `history.replaceState` to store only relative paths. 4. Rewriting `window.fetch` requests to target the correct origin for client-side navigation and RSC payloads. 5. Adding CORS headers and handling OPTIONS preflight requests via Next.js middleware. 6. Mitigating React hydration mismatches caused by parent frame modifications. 7. Ensuring external links open in the user's browser instead of within the iframe.
  5. Preventing the stampede: Request collapsing in the Vercel CDNIntroduced request collapsing to prevent cache stampedes for Incremental Static Regeneration (ISR) routes. This mechanism ensures that when multiple requests hit an expired cache for the same route, only one request per region invokes a function to regenerate the page. The remaining requests wait and receive the cached response. This feature is automatically inferred from framework-defined infrastructure and applied without manual configuration. It utilizes a two-level distributed locking system (node and regional) and the double-checked locking pattern to efficiently manage concurrent cache misses.
  7. Migrating Grep from Create React App to Next.jsThis post details the migration of Grep.app from Create React App (CRA) to Next.js, focusing on leveraging React Server Components (RSC) for performance improvements. Key technical contributions include: - **State Synchronization:** Implementing conditional rendering of a `SearchBar` component between the homepage (client-rendered, centered) and the header (server-rendered, in navbar) to maintain search input state across page navigations without layout shifts. This involves synchronizing state to the URL via search params and using React Context for local input state. - **Server-First Data Fetching:** Utilizing TanStack Query with `HydrationBoundary` to prefetch data on the server without blocking HTML streaming. Client-side fetching with `useSuspenseQuery` and `useDeferredValue` is used for subsequent searches to avoid unnecessary server round trips and prevent stale or out-of-order results. - **Preventing Stale Results:** Combining React's `useOptimistic` hook with `useTransition` and TanStack Query's unique cache keys to ensure the UI always reflects the latest user input and discards stale responses. - **Prefetching Dynamic Routes:** Explicitly prefetching the `/search` route layout using `router.prefetch` in a client component to ensure instant page transitions. - **Mobile-Specific Challenges:** Introducing a `usePreventScroll` hook to stabilize the search input on mobile Safari by preventing unpredictable scroll and zoom behaviors.
  8. Personalization strategies that power ecommerce growthThis post details how Vercel's platform, in conjunction with Next.js features like Middleware and hybrid rendering, enables sophisticated personalization strategies for e-commerce growth. It explains architectural personalization (site structure, navigation) and content personalization (product recommendations, dynamic content), emphasizing the importance of incremental implementation and performance. It highlights the use of Next.js Middleware for network-level personalization (geo-targeting, A/B testing), feature flags for experimentation, and Vercel Marketplace integrations for third-party personalization engines. The post also discusses common mistakes like over-reliance on client-side rendering and inefficient content management, and outlines best practices for implementing personalization with hybrid rendering approaches.
  9. ISR on Vercel is now faster and more cost-efficientThis post details Vercel's optimizations for Incremental Static Regeneration (ISR) in Next.js. Key improvements include regionalized caching for lower latency and faster revalidations (up to 80% TTFB improvement), and automatic compression of ISR cache entries to reduce write/read units and Fast Origin Transfer (FOT) costs, leading to up to 65% savings. These enhancements require no configuration changes and are automatically applied upon redeployment.
  10. Headless Salesforce: An incremental migration from monolith to composableThis post details an incremental migration strategy from Salesforce Commerce Cloud to a headless architecture using Next.js and Vercel. It outlines technical approaches including leveraging Next.js for the frontend, using Edge Middleware for traffic management and reverse proxying, synchronizing user sessions via encrypted cookies or JWTs, preserving SEO by managing redirects and canonical tags, and mitigating Salesforce API challenges through strategic data fetching and caching with Incremental Static Regeneration (ISR). The post highlights performance gains (e.g., 10x faster load times, improved Core Web Vitals) and business impacts (e.g., 28% decrease in cart abandonment, 15% increase in mobile conversion rates) achieved by a global sportswear brand.
  11. How Vercel adopted microfrontendsThis post details Vercel's adoption of vertical microfrontends for its main website, migrating from a single monolithic Next.js application to independent marketing, documentation, and dashboard microfrontends. The migration leverages Next.js Multi-Zones and a monorepo structure with Turborepo for improved build times (over 40% improvement in preview builds and local compilation), dependency management, and developer velocity. It also discusses the trade-offs between horizontal and vertical microfrontend splits and the incremental migration strategy using feature flags. The post highlights how this internal dogfooding of microfrontend architecture can inform platform improvements for all users.
  12. From CDNs to Frontend CloudsThis post introduces the concept of 'frontend clouds' and 'Framework Defined Infrastructure' as the next generation of web application delivery, moving beyond traditional CDNs and IaC. It highlights how modern meta-frameworks like Next.js enable frontend engineers to embrace full-stack development, blurring the lines between development and infrastructure. The core principles of application delivery (fast, global, scalable, dynamic, reliable, secure) are emphasized as being consistently achievable through this new paradigm, where code-level optimizations translate directly to infrastructure enhancements.
  13. Incremental Static Regeneration (ISR): A flexible way to cache dynamic contentThis post details Incremental Static Regeneration (ISR) as a caching strategy that combines static site generation (SSG) and server-side rendering (SSR) benefits. It explains how ISR allows for cached speeds with live content, selective regeneration without full site rebuilds, and on-demand invalidation. The post highlights Vercel's implementation of ISR, which uses framework-defined infrastructure and scales automatically with traffic, acting as a replacement for edge HTTP caching. It also outlines time-based and on-demand ISR implementation techniques with code examples for SvelteKit and Astro, and discusses real-world scenarios in e-commerce, news websites, and AI-powered applications.
  14. What’s new in React 19This post details the new features in React 19, including Server Components, Client Components, Directives ('use client', 'use server'), Actions (Client Actions, Server Actions), and new hooks (`useActionState`, `useFormStatus`, `useOptimistic`). It explains how these features improve initial page load times, code portability, SEO, and developer experience by enabling server-side rendering, data fetching before UI render, and streamlined form handling. The post also provides diagrams illustrating the evolution of React rendering (CSR, SSR, SSG/ISR, RSC) and code examples for implementing these new features. It highlights Vercel's support for these advancements, particularly through Next.js.
  15. How to choose the best rendering strategy for your appThis post explores the evolution of web rendering strategies, detailing Static Site Generation (SSG), Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), Client-Side Rendering (CSR), and the experimental Partial Prerendering (PPR). It outlines the ideal use cases, benefits, and implementation considerations for each, emphasizing the importance of choosing the right strategy for performance, SEO, and user experience. The post highlights how Next.js leverages these strategies, particularly with the App Router and React Server Components, and discusses the potential of PPR to simplify rendering decisions by combining static and dynamic content delivery. It also touches on best practices for each strategy, such as using React Suspense with SSR and optimizing Core Web Vitals.
  16. How Teleport overhauled their docs with Next.js and Vercel | Customers | VercelThis post details Teleport's migration of their documentation and website from MkDocs and Hugo to Next.js and Vercel. Key technical contributions include: implementing dynamic content integration with a CMS, supporting complex dynamic pages, automating deployments via GitHub, leveraging Next.js features like client routing, SSR, and automatic SEO, and `next/image` for optimization. Custom solutions for versioning docs from different branches, maintaining old syntax during migration, and introducing dynamic features like shared user variables, automated linking, custom code blocks, and Mermaid.js charts were developed. Performance improvements include over 60% decrease in build times and 3x more concurrent builds. Security was enhanced with Vercel's Firewall and DDoS mitigation.
  17. How Ruggable optimized their frontend architecture | Customers | VercelThis post details how Ruggable optimized their frontend architecture by decoupling from Shopify and adopting Next.js on Vercel. Key technical aspects include using Next.js for full control over rendering, performance, and optimization, and leveraging Vercel's preview deployments for collaboration. The architecture also incorporates Contentful for content management, enabling marketing teams to manage content without developer involvement. The improvements resulted in a 75% increase in SEO rankings, 40% faster site speed, and 300% increase in unbranded search clicks, with zero downtime during peak seasons.
  18. Revolutionizing video editing on the web with Next.js and Vercel | Customers | VercelThis post details how Ozone, a video editing platform, migrated from Heroku to Vercel, experiencing a 5x increase in development speed and an 85% decrease in build times. It highlights Vercel's ability to handle heavy-duty rendering functionalities and large data volumes with React and WebAssembly. The post emphasizes Vercel's developer experience workflow, including comments on feature branches and independent feature deployments, which democratized collaboration and development. It also touches upon Ozone's integration of AI functionality using Vercel's AI Integrations and AI SDK, enabling features like video, image, music, and speech generation. The competitive advantage gained through rapid iteration and user feedback incorporation is also discussed.
  19. WordPress monolith to Vercel: How Personio elevated performance and DX | Customers | VercelThis customer story details Personio's migration from a monolithic WordPress site to a composable architecture using Vercel, Next.js, and Contentful. It highlights significant performance improvements (over 90% in Core Web Vitals, 29% in mobile LCP) and improved developer experience through Vercel's platform features like Preview Deployments and commenting. The post emphasizes the benefits of a headless CMS and modern frontend framework for performance, security, and agility.
  20. How streaming helps build faster web applicationsThis post details how streaming UI, enabled by the Next.js App Router and React Suspense, improves web application performance and user experience. It explains how streaming allows progressive UI delivery, preventing slow data sources from blocking initial rendering and enabling parallel loading of assets. The post highlights the benefits of colocating compute near data origins for reduced latency and introduces Partial Prerendering as a technique for generating static shells and streaming dynamic data. It also emphasizes the application of streaming for AI applications and LLMs to mitigate long response times.
  21. Common mistakes with the Next.js App Router and how to fix themThis post identifies and explains common mistakes developers make when using the Next.js App Router, providing concrete code examples and solutions. It covers issues related to using Route Handlers with Server Components, static vs. dynamic Route Handlers, using Server Actions with Client Components, correct placement of Suspense boundaries, accessing request objects in Server Components, and proper usage of Context Providers with the App Router. It also clarifies the distinction and interaction between Server and Client Components.
  22. The power of headless: Ecommerce success with Next.js, Vercel, and Shopify | Customers | VercelThis post details how Commerce-UI leverages Next.js and Vercel for headless e-commerce, focusing on custom URL structures, internationalization with Edge Middleware, and tailored CMS experiences. It highlights performance optimizations through Next.js's caching and rendering controls, route handlers, and third-party widget loading. Features like Draft Mode, ISR, Preview Deployments, and comments are discussed for iteration velocity. Vercel's FdI and Edge Network caching, including the Vercel Data Cache, are presented as solutions for dynamic content delivery at static-like speeds. Enhanced reporting and insights are also mentioned.
  23. Partial prerendering: Building towards a new default rendering model for web applicationsThis post introduces Partial Prerendering (PPR) as a new rendering model for web applications, built on Next.js 14 and Vercel. PPR combines static edge delivery with dynamic capabilities by leveraging React Suspense boundaries. It generates a static shell served from the edge, with 'holes' for dynamic content that is rendered in parallel. PPR is implemented using ISR for static shells and dynamic rendering when request information like cookies is accessed. It can be adopted by any framework via Vercel's Build Output API.
  24. Building secure and performant web applications on VercelThis post details how Vercel's platform supports building secure and performant web applications, focusing on collaboration and iteration workflows, seamless API and database integrations, security features, powerful compute, and monitoring capabilities. It highlights features like Preview Deployments, comments on UI, decoupling deploys from releases with Edge Middleware, support for various databases (MySQL, Postgres, MongoDB, Redis), authentication integrations (Okta, AWS Cognito, Google Sign-In), API gateway features (rate limiting, authentication, SSL encryption), Secure Compute for private connections, serverless architecture with automatic scaling, and built-in monitoring tools. It also mentions instant rollbacks and the ability to incrementally migrate applications.
  25. Building the most ambitious sites on the Web with Vercel and Next.js 14This post announces the stabilization of Server Actions in Next.js 14, the introduction of experimental Partial Prerendering, and performance improvements in local server startup and code updates. It highlights the growth of the Next.js community and the adoption of the App Router. It also details performance gains from Turbopack and the ongoing migration of the Next.js Compiler to Rust, aiming for faster development server startup, code updates, and builds. Partial Prerendering is explained as a new rendering model that serves a static shell with dynamic content holes, enabling parallel client and server work for faster initial and dynamic visuals without new APIs.
  26. Tekla's ecommerce evolution: harnessing flexibility with Vercel and Medusa | Customers | VercelThis post details how Tekla, an e-commerce brand, migrated from Gatsby Cloud to Vercel and from WooCommerce to Medusa. The migration to Vercel was driven by buggy and slow builds on Gatsby Cloud, aiming for higher traffic handling, reliable performance, flexibility, and scalability. The adoption of Next.js is planned for faster web deployments on Vercel, further enhancing personalized UX without compromising speed or performance. Vercel Analytics and Monitoring are highlighted as tools for tracking website performance and identifying areas for improvement.
  27. How Whop improved their Real Experience Score by 200% with the Next.js App Router | Customers | VercelThis post details Whop's successful migration from Ruby on Rails to Next.js, and subsequently to the Next.js App Router. It highlights the use of Edge Middleware for incremental adoption of the App Router, enabling traffic routing between legacy Pages Router and new App Router projects. The post emphasizes the benefits of React Server Components for a cohesive DX, allowing data fetching and mutation alongside JSX. It quantifies the improvements in Real Experience Score (RES) and Good URLs, showcasing the performance gains achieved through this transition.
  28. Why Vercel and Next.js are the perfect fit for this global fashion media group | Customers | VercelThis post details how L'Officiel Inc. migrated from a Ruby on Rails stack to Next.js and Vercel, achieving a 60% increase in web traffic and zero downtime. It highlights the benefits of Next.js's SEO optimizations, including automatic webfont and image optimization, and Vercel's managed infrastructure and Framework Defined Infrastructure (FDI) for reducing the burden of infrastructure management. The post emphasizes the reliability and performance improvements gained from the new stack.
  29. How the at-home workout sensation, Hydrow, cut authoring times from weeks to minutes | Customers | VercelThis post details how Hydrow migrated from Shopify Liquid and WordPress to a headless architecture using Contentful, Next.js, and Vercel. It highlights the technical implementation of Incremental Static Regeneration (ISR) with Contentful webhooks for real-time content updates, the use of Vercel's preview deployments for author workflows, and the application of Edge Middleware for personalized user experiences and A/B testing. The post emphasizes the benefits of this composable e-commerce workflow, including reduced authoring times, improved Core Web Vitals, and faster website updates.
  30. Algolia cuts build times in half with ISR using Next.js on VercelThis post details how Algolia reduced their build times by 50% by migrating from Gatsby to Next.js on Vercel. It highlights the ease of implementation and maintenance of Next.js, and specifically mentions the benefits of Incremental Static Regeneration (ISR) for faster website changes and improved collaboration. The post also touches on Vercel Analytics for optimizing third-party scripts.
  31. Next.js Commerce: A headless Shopify ecommerce template built with the App RouterThis post introduces Next.js Commerce 2.0, highlighting its readiness for the App Router and its ability to create dynamic storefronts at the speed of static. It details how React Server Components, Streaming with Suspense, and the new data fetching and caching paradigms in the App Router enable granular control over static and dynamic content. Specific examples include a Shopify fetch wrapper demonstrating default caching and revalidation tags, and an API route for revalidating data via Shopify webhooks. The post also touches on the simplified architecture with a single provider per repository and the use of layouts and pages for shared components like headers and footers.
  32. Understanding React Server ComponentsThis post explains the fundamentals of React Server Components (RSCs), their motivation, capabilities, and limitations. It details how RSCs improve performance and reduce bundle size by rendering on the server, and how they integrate with Suspense for better data fetching and rendering. It also touches upon how Next.js's App Router eases RSC implementation and introduces Server Actions for client-server interaction. The post highlights that RSCs are not meant to replace Client Components but to work alongside them, and that Next.js makes all components Server Components by default, requiring explicit opt-in for Client Components.
  33. Engineering a site at the speed of breaking news | Customers | VercelThis post details The Washington Post's successful migration to Next.js and Vercel for their election results pages. Key technical contributions include migrating to Next.js 12 to leverage Incremental Static Regeneration (ISR), hosting both development and production environments for streamlined review, rewriting the frontend in TypeScript for improved error catching, and enhancing test coverage and documentation. The migration addressed challenges with their previous AWS ECS cluster and intricate revalidation system, resulting in improved performance, reduced complexity, and cost savings. The team successfully handled spiky traffic and streaming data, showcasing the scalability and responsiveness of Vercel's platform.
  34. How Vercel helped this popular health database increase free trials by 284% | Customers | VercelThis post details how Examine.com migrated to Vercel and Next.js, resulting in a 90% decrease in build times (from 15-20 minutes to 1-2 minutes) and a 284% increase in free trial signups. Key technical improvements include leveraging Next.js for dynamic loading and prefetching, Vercel's Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), and Static Site Generation (SSG) for drastically improved page load times. The decoupling of frontend and backend also reduced infrastructure overhead. The team also benefited from streamlined developer workflow with Vercel Preview Deployments and a significant reduction in codebase size.
  35. Incrementally adopting Next.js at one of Europe's fastest growing brands | Customers | VercelThis post details reMarkable's incremental migration from Gatsby to Next.js and Sanity, focusing on improving developer experience and UX. Key technical contributions include: reducing build times by 87% (from 5m 55s to 39s for production builds), leveraging Vercel Preview Deployments for faster review cycles and stakeholder feedback, enabling a self-sufficient editorial team through Sanity, and a strategic incremental migration approach to de-risk the transition. The post highlights the benefits of a composable stack with Next.js and Vercel for faster shipping and improved developer workflows.
  36. Making Commerce-UI a trusted partner for global ecommerce brands | Customers | VercelThis post details how Commerce-UI leverages Next.js and Vercel to build performant, scalable eCommerce experiences. It highlights the use of Edge Middleware for regional personalization and managing viral traffic spikes, and Incremental Static Regeneration (ISR) for efficient content updates without redeployments. The post also touches on improved developer experience through Preview Deployments and webhooks.
  37. Containing multi-site management within a single codebase | Customers | VercelThis post details how Wunderman Thompson leverages Next.js and a monorepo workflow with Turborepo to manage multiple client sites within a single codebase. It highlights the benefits of component-based architecture, full-stack access, optimized performance (including ISR), and framework-defined infrastructure. The post also emphasizes the integration of Atomic Design principles and headless CMS for streamlining data management and component organization, leading to significant reductions in development time and costs.
  38. Deploy Remix without limits on VercelThis post introduces an advanced integration for Remix on Vercel, enabling support for streaming SSR with both Node.js and Edge runtimes, API routes via route loaders, advanced caching using headers like `stale-while-revalidate` and `stale-if-error`, and data mutations via `actions` within Vercel Functions. It highlights the use of `@vercel/remix` as a replacement for `@remix-run/node` for a more streamlined serverless deployment, and demonstrates isomorphic streaming support with React 18's `defer()` and `<Await>` components. The integration also emphasizes framework-defined infrastructure, allowing Remix apps to automatically leverage Vercel's primitives.
  39. Optimizing performance for over 6M monthly visitors at CruiseCritic | Customers | VercelThis post details Cruise Critic's successful migration from a monolithic PHP application to Next.js and Vercel. Key technical improvements include a reduction in engineering build times from 30 minutes to less than eight minutes, enabling multiple daily production deployments. Page performance saw an 85% decrease in download time and a nearly 100% decrease in page size. The core benefit highlighted is the ability for the team to focus on product development rather than infrastructure concerns.
  40. Improve your search engine ranking with Next.js on VercelThis post details how Next.js, in conjunction with Vercel's Edge Network, facilitates SEO best practices. It explains the importance of rendering strategies (SSG, SSR, ISR) for search engine crawlers, and how Next.js's ISR provides a balance of static performance and dynamic updates. It also highlights Next.js features that improve site speed and user experience, crucial for SEO: `next/image` for image optimization, dynamic imports for code splitting, automatic webfont optimization, and responsive design for cross-platform performance. Furthermore, it discusses content strategies like structured data and engineering for success through dynamic metadata (`next/head` and App Router metadata) and smarter navigation with the App Router, layouts, dynamic routing, and the `Link` component.
  41. Moving from monolithic WordPress to composable gives Plenti total freedom | Customers | VercelThis post details Plenti's migration from a monolithic WordPress stack to a composable frontend using Next.js and Vercel. It highlights the benefits of Next.js for flexibility and speed, the use of the Vercel API to integrate with Strapi for automated deployments, and the value of Vercel Analytics (specifically Real Experience Score) for proactive optimization based on real user data. The post emphasizes how this setup empowered a single engineer to manage the entire frontend.
  42. Vercel Data Cache: A progressive cache, integrated with Next.jsIntroduced the Next.js Cache (beta) and Vercel Data Cache (beta) to enable progressive caching at the data fetching level within the Next.js App Router. This allows for caching parts of a page as static data while dynamically rendering the rest, improving performance and developer flexibility beyond traditional ISR. The Vercel Data Cache provides granular cache invalidation by tag and a shared backend cache between static and dynamic rendering, with global distribution and instant updates.
  43. How Vercel and Next.js keep Rippling on their rising path to success | Customers | VercelThis post details how Rippling, an HR platform, successfully scaled its frontend by adopting Next.js and Vercel. Key technical contributions include the use of Incremental Static Regeneration (ISR) for near-instantaneous content updates from a WordPress headless CMS, significantly reducing deployment and build times. The post emphasizes how ISR enabled stakeholders to deploy over 90% of site changes immediately, freeing up engineering resources to focus on site performance and user experience improvements. It highlights the benefits of Next.js's ability to defer page generation on request or via API, maintaining fast build times even as the application grows.
  44. Less code, better UX: Fetching data faster with the Next.js 13 App RouterThis post details the data fetching improvements in the Next.js 13 App Router, specifically how Server Components allow data fetching directly within components. It contrasts this with the previous `pages` directory's data fetching methods (`getServerSideProps`, `getStaticProps`, ISR, client-side fetching). It highlights that all fetched data is static by default in the App Router, leveraging the `fetch()` Web API with options for caching and revalidation (`{next: revalidate}`) and dynamic data fetching (`{cache: no-store}`). It also mentions the integration with Vercel's platform for deployment and performance.
  45. Runway enables next-generation content creation with AI and Vercel | Customers | VercelThis post details Runway's successful migration to Vercel, highlighting the significant reduction in build times (from 5-8 minutes to 40 seconds) and the benefits of Vercel Preview Deployments with inline comments for faster feedback loops. It also mentions the use of Vercel Analytics for performance monitoring, leading to high Lighthouse scores. The post implicitly showcases Vercel's capabilities in handling customer migrations and improving developer productivity.
  46. Moving from Gatsby to Next.jsThis post details a migration from Gatsby to Next.js for a large-scale React website. It highlights the benefits of Next.js's full-stack framework capabilities, including multiple rendering strategies (SSG, SSR, ISR), simplified image optimization (importing `next/image` vs. multiple Gatsby plugins), and more colocated data fetching (`fetch` vs. various Gatsby source plugins and GraphQL). The post also emphasizes the significant improvement in build times from 35 minutes to 5 minutes using ISR and the overall positive impact on developer experience (DX) and user experience (UX) with zero downtime.
  47. How Plex 6x their impressions deploying Next.js on Vercel | Customers | VercelThis post details how Plex migrated their web experience from Kubernetes to Next.js on Vercel. Key technical contributions include: leveraging Next.js SSR and ISR for improved SEO and faster data propagation, using Edge Middleware for personalized content delivery and A/B testing, integrating with Checkly for end-to-end testing and Axiom for immediate crawl request monitoring, and reducing codebase size by approximately 40%. The post highlights the improved developer experience and performance gains achieved.
  48. Improving readability with React Wrap BalancerIntroduced React Wrap Balancer, a component that optimizes text wrapping for improved readability and accessibility in titles and headings. It employs a binary search algorithm for efficient text balancing and addresses layout shift concerns with client-side and server-side rendering solutions. The component is lightweight and optimized for React Server Components and the Next.js 13 app directory.
  49. Vercel + Sitecore: Partnering on a composable futureThis post announces a strategic partnership between Vercel and Sitecore to deliver an end-to-end composable solution for building and deploying dynamic web experiences. It highlights how Vercel's frontend platform, specifically Next.js, Turborepo, and its edge network, addresses Sitecore's needs for a more developer-centric stack, improved performance, omnichannel capabilities, and support for digital portfolios. The partnership aims to create an optimized developer and content creator workflow for iteration, with benefits including optimized performance at the edge, collaborative content editing, lower infrastructure costs, omnichannel compatibility, and improved developer talent and productivity. It also mentions successful customer implementations with Avid Technology and Focus Brands.
  50. Sell globally with a Next.js + Shopify siteThis post details how the KidSuper brand leveraged Next.js and Vercel to create a headless Shopify storefront. It highlights the benefits of Next.js for flexibility and scalability, enabling a small team to build production-ready code comparable to large brands. The emphasis is on rapid iteration through zero-configuration deployments and preview deployments, allowing for quick pitching and development of interactive sites. The post showcases how Vercel's platform supports creative freedom by removing technical blockers.
  51. Using SvelteKit 1.0 on VercelThis post announces the launch of SvelteKit 1.0 and details its new features and improvements, including directory-based routing, a new layouts system, updated data loading mechanisms (`load` function), and a revised approach to server routes (endpoints). It also highlights the benefits of deploying SvelteKit on Vercel, such as zero-configuration deployment and support for Edge Functions.
  52. Building a viral application for your personal music festivalThis post details how the Instafest application, built with Next.js, achieved massive scale (500,000 users/hour) by leveraging Vercel's automatic scaling capabilities, global Edge Network for caching static assets and function responses, and Vercel Functions. It highlights the use of Next.js's built-in font and image optimization for performance and the ease of deployment and rollback provided by Vercel.
  53. Migrate a large, open-source React application to Next.js and VercelThis post details the incremental migration of the BBC's large, open-source React application to Next.js and Vercel. Key contributions include: setting up Next.js with Emotion, configuring `next.config.js` for import aliases and Webpack plugins (timezone data), migrating dynamic routes and data fetching logic, and demonstrating the reduction of custom code and dependencies. The post highlights the process of incrementally adopting Next.js, focusing on reusing existing components and styling, deleting unnecessary code, and improving developer experience and performance.
  54. DatoCMS builds 60% faster with a streamlined workflow | Customers | VercelThis post details how DatoCMS reduced their build times by 60% (from 10 minutes to 4 minutes) by migrating to Next.js on Vercel. They adopted a mixed approach of Static Generation and Server-Side Rendering, which was previously a manual effort. The platform also enabled a streamlined workflow where building, previewing, and deploying occur on a single platform, leading to the creation of their Realtime Updates API.
  55. With Next.js, Vercel, and Sanity, Loom empowers every team to iterate | Customers | VercelThis post details how Loom leverages Next.js on Vercel with Sanity CMS to achieve fast iteration and a strong developer/user experience. It highlights the benefits of a headless tech stack for rapid iteration, the use of Preview Deployments for collaborative content editing and engineering work, and the optimization of images using the Next.js Image Component and Vercel's Image Optimization for improved user experience and performance.
  56. Next.js Layouts RFC in 5 minutesThis post introduces the new `app` directory in Next.js, detailing how folders define routes and `page.js` files create unique route segments. It explains the creation of nestable layouts using `layout.js` files, which can be shared across pages or be specific to route segments. The post also covers the integration of `loading.js` for React Suspense Boundaries and `error.js` for React Error Boundaries, as well as the use of route groups for organizing routes without affecting URLs and for opting segments out of layouts. This RFC outlines a significant shift in Next.js routing and architecture.
  57. Using the latest Next.js 12.3 features on VercelThis post details how Vercel natively supports and extends Next.js 12.3 features, specifically focusing on environment variables and image optimization. For environment variables, it highlights Next.js's Fast Refresh for `.env` files and Vercel's encrypted storage and privilege-based access. For image optimization, it explains how Next.js's Image Component handles device sizing, lazy loading, and CLS prevention, while Vercel automatically optimizes, transforms, caches, and serves images from its Edge Network. It also mentions the upcoming integration of Vercel's infrastructure primitives with future Next.js layout features.
  58. How to run A/B tests with Next.js and VercelThis post details the implementation of an A/B testing strategy for the Vercel Templates page using Next.js and Vercel's Edge Middleware. It explains how Edge Middleware can be used to serve different variants of a page to users based on cookies or random thresholds, and how to rewrite requests to a separate route (e.g., `/templates-old` or `/templates/skeleton`) to manage different user experiences. The post also addresses the challenge of avoiding layout shifts during client-side data fetching by conditionally rendering skeleton loaders, leveraging Next.js's optional catch-all routes and on-demand revalidation.
  59. Build your own web frameworkThis post details how to build a simple, custom React-based web framework using the Vercel Build Output API. It explains the implementation of static file generation with hydration scripts, Incremental Static Regeneration (ISR) using Prerender Functions, dynamic rendering and data fetching with Vercel Functions, automatic image optimization, and Edge Caching. The post provides code examples for creating static pages and discusses the framework's requirements and optimizations for performance.
  60. Announcing the Build Output APIIntroduced the Build Output API, a file-system-based specification that allows any framework to build for Vercel and leverage Vercel's infrastructure primitives (Edge Functions, ISR, Image Optimization, etc.). Added `vercel build` to the CLI for local build debugging and inspection, and `vercel deploy --prebuilt` to decouple build from deploy. This enables frameworks to integrate Vercel's capabilities with minimal configuration and allows for deploying pre-built outputs without sharing source code.
  61. How to improve performance with Next.jsThis post details the performance improvements achieved by upgrading a demo application from Next.js 8 to Next.js 12. Key contributions include: 1. Replacing `getInitialProps` with `getStaticProps` and `getStaticPaths` for build-time data fetching and static generation, leading to faster initial page loads and prefetching capabilities with `<Link />`. 2. Utilizing the `next/image` component to serve optimized images in WebP format and implement lazy loading, drastically reducing image loading times and file sizes. 3. Demonstrating the use of dynamic routes with `getStaticPaths` and `getStaticProps` for efficient rendering of individual model pages. 4. Showcasing the use of API Routes to replace custom backend endpoints for server-side functionalities like payment processing.
  62. Next.js 11, Next.js Live and more: A recap of Next.js Conf Special EditionThis post announces Next.js 11, introducing a new Script component for third-party script management and an updated Image component with automatic size detection and blur-up placeholders to improve loading performance and reduce Cumulative Layout Shift. It also highlights the announcement of Conformance for Next.js, a framework-level system for guardrails and defaults to ensure application quality and performance. Finally, it previews Next.js Live, a browser-based collaborative development environment.
  63. 10 Next.js tips you might not knowThis post introduces 10 lesser-known Next.js tips: 1. Next.js Redirects for rerouting requests with status codes. 2. Next.js Rewrites for proxying requests without changing the URL. 3. Next.js Preview Mode for viewing draft content. 4. Hooking into the build process via `next.config.js` for tasks like sitemap generation. 5. Using Preact with Next.js for client-side production builds. 6. Absolute Imports and Module Path Aliases for cleaner import statements. 7. CRUD API Routes using the built-in Next.js router. 8. Setting Response HTTP Caching Headers for API Routes and SSR pages. 9. Shared Component Attributes using `_app.js` for page-specific metadata. 10. Building mobile applications with Next.js using Ionic and CapacitorJS.
  64. React Server Components with Next.jsThis post introduces React Server Components and their integration with Next.js, specifically within the upcoming `app` directory. It explains how Server Components improve performance by allowing large dependencies to remain on the server, reducing client-side JavaScript bundle size and improving time to interactive. It contrasts Server Components with traditional Server-Side Rendering (SSR), highlighting how Server Components eliminate the all-or-nothing data fetching tradeoff. The post details that Pages and Layouts in the `app` directory will render as React Server Components by default, and that both client and server components can be used within the same route.
  65. Our new Edge and Dev infrastructureIntroduced Fast Refresh for Next.js, enabling real-time UI updates during local development. Enhanced Vercel CLI with features like faster startup, improved stack traces, better memory usage, automatic dev environment sync, and speedier Node.js function invocations. Launched Vercel's own Anycast IP ranges for improved global routing and performance, and enhanced the network's capacity to handle large attacks and traffic spikes.
  66. Next.js: Server-side Rendering vs. Static GenerationThis post introduces the core concepts of Server-side Rendering (SSR) and Static Generation (SSG) in Next.js, explaining their trade-offs in terms of TTFB, data freshness, and performance. It details how to implement SSG with `getStaticProps` and `getStaticPaths` for pages with dynamic routes. Crucially, it introduces Incremental Static Generation (ISG) with `fallback: true` for lazily rendering new pages and `revalidate` for updating existing pages after a specified interval. It also covers client-side fetching as a complementary strategy for dynamic content like shopping carts, recommending SWR for this purpose. The post uses an e-commerce app example to illustrate these concepts.
  67. Next.js 6.1This post details the release of Next.js 6.1, focusing on improved hot reloading reliability by removing react-hot-loader and handling hot reloading internally. It introduces the `pageExtensions` configuration for custom page file types (like TypeScript and MDX) and automatically applies `hot-self-accept-loader`. Codebase improvements include moving the `server/build` directory to the top level `build` and renaming `.next/dist` to `.next/server`. It also introduces `next-codemod` to automate the migration from the deprecated `url` property to `withRouter`. Future plans include Webpack 4 for faster builds and optimizations for serverless Next.js to reduce cold start times.
  68. Next.js 6 and Nextjs.orgThis post introduces Next.js 6, focusing on several key advancements: zero-configuration static exports, the introduction of `_app.js` for enhanced page transitions and error handling, Babel 7 support with JSX fragment syntax and nested `.babelrc` files, and first-class TypeScript support. It also announces the launch of nextjs.org to consolidate documentation, learning resources, and a showcase. The post details the pre-rendering concepts of server rendering and static rendering, and explains how `_app.js` enables new use cases like page transitions and better integration with Apollo and Redux, as well as improved error handling with `componentDidCatch`.
  69. Next.js 5.1: Faster Page ResolutionNext.js 5.1 introduces major performance improvements by simplifying page resolution logic, achieving a 102x speedup (from 2.347ms to 0.023ms). It adds `publicRuntimeConfig` and `serverRuntimeConfig` for environment configuration, making variables accessible on both server and client, or server-only respectively. Error handling is refactored to automatically reload pages on 404s from page bundles, improving compatibility with CDNs. `next.config.js` now supports exporting a function to conditionally load configurations based on build phases. Production source map generation is improved, and a new plugin `@zeit/next-bundle-analyzer` is introduced, alongside enhancements to existing CSS/Less/Sass plugins.
  70. Next.js 5: Universal Webpack, CSS Imports, Plugins and ZonesThis post introduces Next.js 5.0, highlighting several key technical advancements: Universal Webpack for both server and client code, enabling the use of Webpack loaders for CSS, LESS, SASS, SCSS, and CSS Modules. It also introduces TypeScript support through `ts-loader` and a `next-typescript` plugin. Better support for React alternative libraries like Preact is also detailed. The concept of 'Zones' is introduced, allowing the composition of multiple independent Next.js applications into a unified experience via path aliases and backend routing configuration. This enables independent deployment and scaling of different application parts.
  71. Towards Next.js 5: Introducing Canary UpdatesThis post introduces the concept of canary releases for Next.js, allowing for more frequent updates and testing of experimental features. It outlines the roadmap for Next.js 5, with a focus on scalability improvements for large codebases and teams. Key areas include enhanced compilation speed (startup and lazy page building), improved sourcemaps, support for multiple Next.js apps on the same domain with prefix mounting and cross-app linking, and simplified sharing of components via npm without pre-transpilation. It also mentions the availability of new examples and improved documentation.
  72. Next.js 4: React 16 and styled-jsx 2This post introduces Next.js 4, highlighting support for React 16 and styled-jsx 2. It details significant performance improvements, including a 2.6x faster SSR with React 16 and a 20% faster style initialization with styled-jsx 2. The post also showcases the ability to embed dynamic styles (variables and expressions from scope) in styled-jsx, enhancing its utility for theming and animations.
  73. Next.js 3.0Introduced static export support via `next export` command, enabling deployment of plain HTML/CSS files. Added full support for TC39 dynamic import, allowing code splitting into dynamically loaded chunks. Introduced `next/dynamic` for dynamically loaded React components that still support server-rendering. Enhanced error display with a new color theme and improved Hot Module Replacement (HMR) to handle various error scenarios, including navigation to error pages, bad return types, and runtime errors. Achieved a 5x faster bootup time for baseline Next.js apps (down to ~200ms) and made core Next.js bundles 10% leaner.
  74. Next 3.0 Preview: Static Exports and Dynamic ImportsIntroduced `next export` subcommand for building standalone static websites, enabling deployment without a server. This feature supports dynamic URLs, prefetching, preloading, and dynamic imports. Also introduced dynamic component support using `next/dynamic` and TC39 dynamic import syntax (`import()`) for lazy loading modules and improved code splitting, with server-side rendering capabilities for dynamic imports to avoid blank pages.
  75. Next.js 2.0This post announces Next.js 2.0, detailing several key improvements and new features. It introduces a programmatic API for custom server code and dynamic routing, allows developers to bring their own React versions (including Inferno and Preact), and integrates `styled-jsx` for scoped CSS. Pre-fetching is now supported via the `prefetch` attribute on `<Link>` components. The post also discusses performance optimizations for Hot Module Replacement (HMR) with a new lazy compilation mechanism, and improvements to build size through Webpack common chunks and hashed bundle files. It also mentions upcoming features like improved HMR, faster dev compilation, seamless support for lazy `import()`, React Fiber integration, and static exports.
  76. Next.jsThis post introduces Next.js, a framework for server-rendered universal JavaScript web apps built on React, Webpack, and Babel. It outlines core principles: zero setup with filesystem-based routing, JavaScript-centric components, automatic server rendering and code splitting, developer-controlled data fetching via `getInitialProps`, performance through prefetching, and simple deployment. It also introduces CSS-in-JS with glamor and the concept of `getInitialProps` for dynamic data loading.