Best of Next.jsJanuary 2026

  1. 1
    Video
    Avatar of t3dotggTheo - t3․gg·19w

    I moved off of Next.js

    A detailed account of migrating T3 Chat from Next.js to TanStack Start, driven by technical requirements rather than framework dissatisfaction. The original Next.js setup involved hacking React Router into Next.js for a client-first experience, which worked but wasn't sustainable. After exploring multiple alternatives (Remix, Vite+Hono, Cloudflare Workers), the team chose TanStack Start for better client-side routing, frontend-backend synchronization, and team ownership. The migration required 14,000 lines added and 10,000 removed, plus patching TanStack Start itself and moving API routes to Nitro to handle scaling issues. The move wasn't about Next.js being bad, but about finding a framework that better matched their specific needs for a fast, client-focused chat application while keeping frontend and backend deployments synchronized.

  2. 2
    Article
    Avatar of twirThis Week In React·17w

    React Hebdo #265: React Skills, json-render, ViewTransition, Base UI, shadcn, Store, MDX, GTK

    Weekly React newsletter covering AI skills systems from Vercel, Callstack, and Expo; Firefox release enabling View Transition API, CSS anchor positioning, and Navigation API across all browsers; React Store RFC and MDX v3 support in Prettier; React Native updates including Windows/macOS 0.81, Brownie for brownfield apps, and React Navigation 8.0 alpha; Node.js security mitigation for AsyncLocalStorage DoS vulnerability; Astro joining Cloudflare; TC39 meeting progress; and jQuery 4.0 release.

  3. 3
    Article
    Avatar of atomicobjectAtomic Spin·17w

    Elysia.js: Type-Safe APIs Without the Mess

    Elysia.js is a TypeScript-first API framework for Bun that addresses Next.js API route organization issues by allowing all routes to be defined in a single file using a chaining syntax. It provides end-to-end type safety through the Eden companion library, eliminating the need for code generation while maintaining standard HTTP endpoints. The framework uses TypeBox for inline schema validation that doubles as TypeScript type generation, and follows the WinterTC standard for cross-runtime deployment compatibility.

  4. 4
    Video
    Avatar of designcourseDesignCourse·18w

    The First Government Website to Not Suck?

    A review of realfood.gov examines its modern tech stack (React, Next.js, Framer Motion) and interactive scroll-based animations. The site represents a significant improvement over typical government websites, though the reviewer critiques the heavy reliance on scrub animations tied to scroll position rather than time-based animations, which creates readability issues and requires excessive scrolling. The design and UI are praised, but the user experience could be improved with better animation triggers and reduced scroll fatigue.

  5. 5
    Video
    Avatar of davegrayDave Gray·19w

    Everything Has Changed! Are You Still Writing Code in 2026?

    A developer returns to creating educational content after a year focused on enterprise projects, including building an agentic AI chat system. Plans for upcoming content include JavaScript fundamentals, advanced AI SDK tutorials with Next.js and Vercel, React Native and Expo mobile development, and addressing concerns about AI's impact on software development careers. The creator emphasizes the continued importance of human developers despite AI advancements and declining computer science enrollment.

  6. 6
    Article
    Avatar of vercelVercel·16w

    Summary of CVE-2026-23864

    Multiple high-severity denial of service vulnerabilities (CVE-2026-23864, CVSS 7.5) were discovered in React Server Components affecting versions 19.0.x through 19.2.x. The vulnerabilities can be triggered through specially crafted HTTP requests to Server Function endpoints, potentially causing server crashes, out-of-memory exceptions, or excessive CPU usage. Affected frameworks include Next.js versions 13.x through 16.x, along with other tools using React Server Components. Vercel deployed WAF mitigations automatically, but immediate upgrades to patched versions are required. Fixes are available in React 19.0.4+, 19.1.5+, 19.2.4+ and corresponding Next.js versions.

  7. 7
    Article
    Avatar of syncfusionSyncfusion·17w

    What’s new in Next.js 16: Turbo Builds, Smart Caching, AI Debugging

    Next.js 16 stabilizes Turbopack as the default bundler, delivering 2-5× faster production builds and 10× faster hot reloading. The release introduces Cache Components with explicit opt-in caching via the 'use cache' directive, replacing implicit caching for more predictable behavior. AI-assisted debugging arrives through Model Context Protocol (MCP) integration in DevTools, enabling AI agents to access unified logs and suggest fixes. The update includes React Compiler support for automatic memoization, enhanced routing with layout deduplication, and replaces middleware.ts with proxy.ts. Breaking changes include requiring Node.js 20.9+, removing AMP support, and making params/searchParams async.

  8. 8
    Article
    Avatar of nextNext.js·17w

    Inside Turbopack: Building Faster by Building Less

    Turbopack achieves fast build times through fine-grained incremental computation and automatic dependency tracking using "value cells" - a spreadsheet-like architecture that tracks function execution and dependencies. When source code changes, only affected functions are recomputed by propagating updates through a dependency graph. An aggregation graph layer enables efficient querying of large graphs with millions of nodes. The system now includes file system caching (stable in Next.js 16.1) to persist dependency graphs and intermediate results across restarts, building on research from Salsa, Parcel, and the Rust compiler.

  9. 9
    Article
    Avatar of freecodecampfreeCodeCamp·18w

    How to Use the tailwind-sidebar NPM Package in Your React and Next.js Apps

    The tailwind-sidebar NPM package provides a lightweight, utility-first sidebar component built with Tailwind CSS for React and Next.js applications. Installation involves adding the package via npm/yarn, importing components (AMSidebar, AMMenuItem, AMMenu, AMSubmenu, AMLogo), and configuring routing with react-router or next/link. Key features include responsive design through Tailwind breakpoints, full customization via utility classes, nested submenu support, icon integration, smooth animations, and minimal JavaScript overhead. The package relies entirely on Tailwind utilities rather than custom CSS, keeping bundle sizes small while maintaining flexibility for colors, spacing, hover states, and layout control.

  10. 10
    Article
    Avatar of hnHacker News·15w

    AGENTS.md outperforms skills in our agent evals

    Vercel tested two approaches for teaching AI coding agents about Next.js 16 APIs: skills (on-demand retrieval) and AGENTS.md (passive context). An 8KB compressed docs index in AGENTS.md achieved 100% pass rate on evals, while skills maxed at 79% even with explicit instructions. Skills weren't reliably triggered (56% never invoked without instructions), and instruction wording proved fragile. The passive context approach eliminates decision points, provides consistent availability, and avoids ordering issues. A codemod command automatically sets up version-matched Next.js documentation for projects.

  11. 11
    Article
    Avatar of ergq3auoeReinier·18w

    Let’s build a Scheduling SaaS with NEXT.JS 16! (Sanity, Clerk, CodeRabbit, Google Calendar & Meet)

    A comprehensive video tutorial demonstrating how to build a Calendly-like scheduling SaaS platform from scratch using Next.js 16. The tutorial integrates multiple tools including Sanity for content management, Clerk for authentication, CodeRabbit for code review, and Google Calendar and Meet for scheduling functionality.

  12. 12
    Article
    Avatar of reactstatusReact Status·18w

    React Status Issue 457: January 9, 2026

    This weekly newsletter covers React ecosystem updates including an interview with React core team members about React 19.2 and the React Compiler. Featured articles discuss modern Hook patterns for React 18+, a migration from Next.js to TanStack Start, AI coding agents causing bugs, using React to drive 3D Blender scenes, and rebuilding blogs with React Server Components. Also highlights React Aria's new documentation and component library.

  13. 13
    Video
    Avatar of wawasenseiWawa Sensei·17w

    Why I Build Messy Code on Purpose

    Horizontal development prioritizes building complete features quickly over perfecting individual components early. This approach involves drafting the entire system first with basic functionality, then refining layer by layer. While this creates messy code and architectural problems initially, it enables faster learning from real use cases and prevents wasted effort on premature optimization. The strategy accepts technical debt as a necessary trade-off for discovering actual requirements before committing to complex architecture.

  14. 14
    Article
    Avatar of freecodecampfreeCodeCamp·18w

    How to Build an In-Memory Rate Limiter in Next.js

    Rate limiters control API request frequency to prevent abuse and manage costs. This guide implements an in-memory rate limiter for Next.js using the fixed window algorithm, tracking requests by unique identifiers and blocking excess traffic with 429 responses. The implementation stores usage data in a Map, automatically clears expired entries, and can be applied to any API route. Artillery load testing confirms the limiter accurately enforces limits (12 requests per 60 seconds) even under high traffic, with 99% of requests maintaining sub-100ms latency.

  15. 15
    Article
    Avatar of logrocketLogRocket·15w

    Cache components in Next.js: Faster pages with partial pre-rendering

    Next.js 16 introduces Cache Components, enabling component-level caching that works with Partial Pre-Rendering. Instead of treating entire routes as static or dynamic, developers can mark specific components as cacheable using the 'use cache' directive while keeping request-specific sections dynamic. This allows predictable content like product catalogs to be cached and reused across requests, while personalized data streams in progressively. Combined with React Suspense, pages render immediately with a static shell, then stream dynamic sections as they complete, eliminating blank screens and reducing time-to-first-content from seconds to milliseconds.