Hydrogen Framework Rebuild

6/30/2026

This post announces the joint effort with Shopify to rebuild the Hydrogen framework. It details the new three-layer architecture (core, client, server) and provides code examples for the core layer (e.g., `formatMoney` using `Intl.NumberFormat`) and the client layer (e.g., `CartProvider` and `useCartForm` for state management). It also outlines server-side integration strategies with frameworks like Next.js, emphasizing runtime agnosticism and leveraging framework caching mechanisms. The post includes detailed guidance on enabling i18n with `next-intl` in a `cacheComponents: true` Next.js environment, covering routing, middleware, and `instant` sample configurations.

6/9/2026

This post details how Fern, a company that builds developer documentation and SDKs, migrated 65% of its platform from Next.js Pages Router to App Router in 7 days on Vercel. It highlights performance improvements such as 3x faster time to first byte, 80% reduction in page load times, and faster deployment times (down to 5 minutes). The post also mentions Fern running customer docs for Webflow and ElevenLabs from a single Next.js app on Vercel, handling over 6 million page views per month.

4/14/2025

This post details the migration of Grep from Create React App to Next.js, leveraging React Server Components and advanced data fetching strategies to improve performance and maintainability. Key improvements include optimizing the search input experience across different routes, implementing server-side initial data fetching with hydration, and using client-side incremental fetching with debouncing and optimistic UI updates to prevent stale results. The migration also addresses mobile-specific challenges with scroll stabilization.

4/3/2025

PAIGE re-architected their e-commerce platform using Shopify as the commerce foundation, Next.js for Server-side Rendering (SSR) and SEO improvements, and Vercel for reliable user experiences, automated deployments, global CDN, preview deployments, and instant rollbacks. This resulted in a 22% increase in traffic with no downtime, a 76% increase in conversion rates, and a 22% increase in revenue during Black Friday Cyber Monday.

1/8/2024

This post details common mistakes when building with the Next.js App Router, including incorrect usage of Route Handlers with Server Components, static vs. dynamic Route Handlers, using Server Actions with Client Components, proper placement of Suspense boundaries, accessing the incoming request object in Server Components, and correctly integrating Context Providers with Client Components. It emphasizes direct logic calls over network hops for Server Components, explains Route Handler caching behavior, promotes Server Actions for client-side data mutations, clarifies Suspense boundary placement, highlights specific functions for accessing request details in Server Components, and guides on creating Client Component providers for context consumption.

9/21/2023

This post details Whop's migration from Ruby on Rails to Next.js, specifically adopting the App Router for enhanced page speed and developer experience. They utilized Edge Middleware for incremental migration, enabling traffic routing between App Router and Pages Router projects. The adoption of React Server Components facilitated a more cohesive developer experience by bridging frontend and backend within a single framework, leading to significant improvements in Real Experience Score (RES) and the percentage of Good URLs.

1/10/2023

This post details how KidSuper, a streetwear label, migrated from a Shopify-managed storefront to a headless architecture using Next.js and Vercel. It highlights the benefits of Next.js for flexibility and scalability, enabling the team to build sites that reflect the brand's creativity. The post emphasizes Vercel's zero-configuration deployments and preview deployments as key enablers for rapid iteration and collaboration, allowing the KidSuper team to quickly spin up interactive sites and share them with stakeholders.