#next.js

Next.js is a React-based web application framework that allows for server-side rendering, static site generation, and client-side rendering. It offers features such as automatic code splitting, serverless functions, and dynamic imports to improve website performance and scalability. Additionally, it provides an easy-to-use file-based routing system and supports a wide range of technologies and libraries.
From Segments to Suspense: The Future of Next.js Caching
React Advanced 2025React Advanced 2025
27 min
From Segments to Suspense: The Future of Next.js Caching
Introduction to Cache Components in Next.js 16, transforming the app router with new features like partial pre-rendering, Dynamic I.O., and caching directives. Deep dive into static params generation in Next.js focusing on changes in generating static params for improved performance. Exploring challenges of generating static params and balancing static vs. dynamic rendering for better performance. Addressing challenges with cache components, optimizing static and dynamic rendering for improved performance. Understanding impact of parameters on rendering with cache components, managing dynamic components, and introducing suspense boundaries for faster page loads. Enhancing cache life APIs, introducing a new caching model for static outputs in Next.js. Revolutionizing cache management with granular control over cache lifetimes and dynamic segment configuration. Navigating data and caching in Next.js, exploring cache components guidance and caching differences between server and client components.
From Frontend to Fullstack Development With Next.js
React Summit 2025React Summit 2025
91 min
From Frontend to Fullstack Development With Next.js
Top Content
Featured Workshop
Eric Burel
Eric Burel
Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Top Content
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session.
You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing
This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.
AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
Top Content
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
The New Next.js App Router
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Top Content
Watch video: The New Next.js App Router
Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Top 15 Next.js Development Agencies in Europe for SaaS and Enterprise (2026)
Top 15 Next.js Development Agencies in Europe for SaaS and Enterprise (2026)
Article
Katarina
Katarina
Choosing the right Next.js agency is one of the highest-leverage decisions a SaaS founder or enterprise engineering lead can make. Regardless of the type of project you plan to undertake an agency—be it a small startup, mid-market SaaS, or a large enterprise—Next.js is your sensible choice for the frontend in 2026.This guide evaluates 15 Next.js development agencies across Europe — covering technical depth, verified CMS partnerships, Vercel platform experience, and documented client outcomes — so you can identify the right Next.js developers for your specific project without relying on rankings that prioritise brand size over delivery evidence.According to the State of JavaScript 2025 survey (13,000+ respondents, sponsored by Google Chrome and JetBrains), Next.js is used by 59% of JavaScript developers, making it the most adopted React meta-framework by a significant margin. Not every agency that lists Next.js development services on their website has built production-grade SaaS platforms with it. This guide focuses on European Next.js agencies with documented delivery at scale.Many well-known companies use Next.js for various purposes, e.g., Nike, Stripe, TikTok, Uber, Wayfair, Notion, and Apple. Thanks to its performance, scalability, and developer experience Next.js works well for enterprise websites, SaaS dashboards, and high-traffic landing pages. It’s also popular for e-commerce platforms, marketing sites, and customer-facing web apps.TL;DR — Top Next.js Agencies in Europe at a GlanceBest Next.js agency for headless CMS migrations: FocusReactive (London/Warsaw) — Sanity certified, 35-domain multilingual delivery for EasyPark, clients all over the worldBest for performance engineering and App Router migrations: Blazity (Warsaw) —  70% LCP improvement for CookUnityBest for headless commerce and Shopify Plus: Naturaily (Wrocław); Shopify Plus certifiedBest for large enterprise digital transformation: Dept Agency; Contentful partnerBest for net-new SaaS product builds: Netguru or Boldare; full design-to-engineering lifecycle, strong Clutch track recordBest for custom B2B/B2C commerce platforms: Rigby; Medusa.js specialists for marketplace and multi-tenant buildsBest for design-led SMB and startup builds: Halo Lab; competitive rates, high design qualityKey buying signals to verify before committing to any Next.js development agency: App Router in production (not Pages Router), named Vercel partner status, at least one case study with a measured outcome, and a defined post-launch SLA.Who This Guide Is ForThis guide is written for a single reader: a technical decision-maker — CTO, VP of Engineering, or hands-on founder — at a mid-market SaaS company or enterprise digital team who is evaluating a Next.js development agency for one of the following Next.js projects:Migrating a legacy platform (WordPress, Drupal, AEM) to a headless Next.js architectureBuilding a new SaaS frontend or Next.js website from scratch on the App RouterScaling an existing Next.js codebase that has outgrown the original team's capacityIf you are a marketing director selecting a Webflow agency, or an enterprise procurement team seeking a 500-person outsourcing firm, this selection guide is not the right resource. The Next.js agencies listed here are specialist software engineering teams, not general digital agencies, and the evaluation criteria reflect that difference.How to Evaluate a Next.js Development Agency: 8 CriteriaThese criteria should be applied before reviewing any Next.js agency's portfolio. Outline your project needs for each criterion, then score the agencies based on your requirements — not against each other in the abstract.1. Next.js App Router and React Server Component FluencyAny Next.js agency doing serious work in 2026 should be building on the App Router by default — it is the current production standard and the only model Vercel is actively developing new features for. An agency still defaulting to the Pages Router for new projects, or that cannot clearly explain the Client/Server Component boundary, is working on a deprecated paradigm.Ask: Are your current production projects on the App Router or Pages Router? How do you decide which components are Server Components versus Client Components?Red flag: Defaults to "use client" on most components, or describes App Router as "still evaluating."2. Next.js Rendering Strategy DepthA capable Next.js agency should be able to tell you exactly which rendering strategy — SSG, ISR, SSR, or RSC — applies to each layer of your application and why, including the caching and cost implications of each choice. If the answer is "we use SSR for everything," that is not a strategy, it is a default.Ask: How do you decide between SSG, ISR, and dynamic rendering in an App Router project? How do you handle cache invalidation when CMS content updates?Red flag: Cannot explain the difference between route-level and component-level caching in the App Router.3. Vercel Platform DepthProduction Next.js deployment on Vercel goes well beyond connecting a GitHub repo — it requires managing edge middleware, environment variable scoping, preview deployments, build cost optimisation, and observability tooling. An agency that has only used Vercel's free tier has not encountered the challenges enterprise deployments surface.Ask: Have you managed Vercel enterprise accounts with multiple deployment targets? Have you configured Edge Middleware for geo-routing or A/B testing?Red flag: Cannot describe how they manage Vercel build costs or have never used Speed Insights for production diagnostics.4. Headless CMS Integration as Part of Next.js Development ServicesDeep CMS integration means designing the content model, configuring draft mode for live preview with React Server Components, and ensuring editors can operate independently after handover — not just connecting the API and fetching data. Ask for a certified partnership and a concrete content modelling example, not a list of supported platforms.Ask: Are you a certified partner of the CMS we are considering? How do you implement draft mode with Server Components for live preview?Red flag: Treats CMS setup as a configuration task with no content modelling methodology to show.5. SEO Continuity and Core Web Vitals MethodologyFor platform migrations, organic search equity is a business asset that can be destroyed by poor redirect handling or metadata loss. A qualified Next.js agency treats Core Web Vitals and URL continuity as engineering deliverables from sprint one, not as post-launch cleanup.Ask: How do you handle URL mapping and redirect implementation during a migration? Can you show pre/post Core Web Vitals benchmarks from a previous project?Red flag: Redirects are handled at the end of the project, or the agency cannot produce crawl comparisons from past migrations.6. TypeScript and Code Quality: What to Expect from Senior Next.js DevelopersThe codebase a Next.js agency delivers will be maintained by your internal team or a future agency — TypeScript by default, automated tests, and clear documentation are baseline requirements, not premium extras.Ask: Is TypeScript the default on all projects? What testing framework and coverage standards do your Next.js developers apply?Red flag: Delivers JavaScript-only codebases or has no automated testing in the handover.
ask the programmer meme7. Post-Launch Support and SLA StructureThe first 90 days after launch consistently surface redirect gaps, content model edge cases, and performance regressions. A Next.js agency without a formal post-launch support period and documented SLAs will deprioritise incidents because those hours are unscoped and unbillable.Ask: What are your SLAs for critical production bugs in the first 90 days? Is a retainer model available for ongoing work?Red flag: No formal post-launch support structure beyond "reach out if something breaks."8. Enterprise Delivery EvidencePortfolio logos are not delivery evidence — ask for case studies that name a client, describe the integration complexity, and cite a measurable outcome (Core Web Vitals score, traffic change, time-to-market). An agency that cannot provide this has not delivered at enterprise scale.Ask: Can you share a Next.js App Router case study with similar content volume or language count to our project, including the measured outcome?Red flag: Case studies show design screenshots and describe outcomes as "improved performance" without figures.How Next.js Agencies Were Ranked: MethodologyEvery agency in this list was evaluated against five factors. No agency paid for inclusion. Agencies ranked higher when they demonstrated App Router adoption in production (verified via case studies, public repositories, or technical blog content) and could show documented delivery at enterprise content or traffic scale. Agencies whose public case studies predate the App Router era, or whose documentation suggests primary reliance on the Pages Router, rank lower regardless of brand recognition or team size.FactorWeightSignal UsedApp Router and RSC adoption in productionHighVerified via case studies, public repos, or technical blog postsVercel platform depthHighOfficial partner status, enterprise account evidence, edge middleware usageSEO and Core Web Vitals track recordHighNamed platform certifications; documented content modelling approachHeadless CMS certification and methodologyHighPre/post launch metrics; migration case studies; Metadata API usageEnterprise delivery evidenceMediumNamed clients, measurable outcomes, team scale documentationAgency Comparison MatrixThe matrix below uses factual indicators rather than qualitative labels. Every client's needs differ, but here are the basic agency metrics for you to check.
AgencyVercel PartnerCMS Certifications (verified)Named Client with MetricPrimary FitEst. HourlyFocusReactiveYesSanity, Storyblok, Contentful, PayloadEasyPark (35 domains, top 1–5 rankings in 14 countries)Headless CMS sites, SEO migrations$75–125The Software HouseUnverifiedUnverifiedUnverifiedEnterprise web apps, team augmentation$60–100Dept AgencyUnverifiedContentful (self-reported)Unverified specific metricsGlobal enterprise digital products$100–150NaturailyUnverifiedShopify Plus (certified), Storyblok, Sanity (self-reported)Best IT (Jamstack migration, documented)Headless commerce, performance replatforms$50–99NeoskopUnverifiedAdobe Experience Cloud (self-reported)UnverifiedDACH SaaS and enterprise$80–120NearFormUnverifiedNone verifiedCondé Nast International, Everstream Analytics (self-reported)Enterprise full-stack, Node.js + React$80–120NetguruUnverifiedUnverifiedING, Volkswagen Financial (self-reported)SaaS product development$75–125BoldareUnverifiedUnverifiedUnverifiedSaaS product squads, agile builds$60–100BlazityYes (Silver)Sanity, Hygraph, Contentful (self-reported)CookUnity (70% LCP), Planday (4x dev velocity)Performance engineering, App Router migrations$70–110Makers' DenUnverifiedStoryblok (self-reported)UnverifiedReact e-commerce, composable commerce$65–105BrainhubUnverifiedUnverifiedUnverifiedStaff augmentation, SaaS frontends$70–120LemonhiveUnverifiedSanity, Storyblok, Payload (self-reported)UnverifiedHeadless for agencies and brands$80–13010CloudsUnverifiedUnverifiedPinterest (self-reported)AI-powered apps, fintech platforms$55–95RigbyUnverifiedUnverifiedUnverifiedB2B/B2C e-commerce platforms$60–100Halo LabUnverifiedUnverifiedCorel, Oppo (self-reported)UI/UX, SMB web apps$40–80
The 15 Next.js Development Agencies in EuropeEach Next.js agency entry follows a consistent schema: location and headcount, verified partnerships, documented client outcomes, primary project fit, tech stack, hourly rate estimate, and time zone. Where information is drawn from self-reported sources, this is stated.1. FocusReactive — Next.js Agency — London / Amsterdam / WarsawHourly rate: $75–125
Time zone: GMT/BST (London), CET/CEST (Amsterdam, Warsaw) — UTC to UTC+2FocusReactive operates within the modern React and headless CMS stack — Next.js App Router, Vercel, Sanity, Storyblok, Payload, and Contentful — with no generalist digital agency work alongside it. Their Next.js development services focus on two primary engagement types: headless CMS migrations from legacy platforms (WordPress, Drupal) and new multilingual Next.js website builds for SaaS companies that require editorial independence after launch.Documented delivery: The EasyPark project consolidated 20+ domains into a single Next.js and Storyblok platform supporting 35 languages across 14 countries, with a content system of 6,998 stories, 1,131 assets, and 125 component blocks managed post-launch by a three-person marketing team. The platform achieved top 1–5 search rankings in all active regions (source: FocusReactive case study, verified against EasyPark's public presence). Additional documented clients include TrafficGuard (Sanity-based composable marketing site, SEC-compliant) and EmailOctopus (WordPress to Payload CMS migration with Next.js App Router).Additional context: The team co-organises React Summit, JSNation, and related JavaScript conferences, which reflects a consistent investment in the React ecosystem beyond client delivery. FocusReactive also publishes technical comparisons of headless CMS platforms (Sanity vs Storyblok, Contentful vs Payload) as official partners of both platforms — an indicator of genuine multi-platform depth rather than single-vendor alignment.Best fit: SaaS companies requiring multi-market, multilingual headless CMS migrations; marketing teams that need editor independence after handover; enterprises migrating from WordPress or AEM to headless architecture.Stack: Next.js (App Router), Vercel, Sanity, Storyblok, Contentful, Payload CMS, TypeScript, Tailwind CSS, Shopify Hydrogen2. The Software House — Next.js Development Agency — Gliwice / WarsawHourly rate: $60–100
Time zone: CET/CEST (UTC+1/+2)Software House is a Poland-based custom software house with 12+ years of delivery history across web applications, cloud migrations, and modern frontend development. Their scale (80+ React and Next.js engineers by self-report) makes them a viable option for enterprises that need team extension alongside backend modernisation, rather than a pure frontend specialist. Clutch rating 4.9/5 across 60+ reviews (self-reported, unverified at time of writing).Documented delivery: No independently verified case studies with named clients and specific performance metrics were found at time of writing. Clutch reviews cite enterprise clients in manufacturing, fintech, and SaaS, but specific outcomes (Core Web Vitals scores, traffic changes, migration timelines) are not published.Best fit: Enterprise teams needing Next.js development alongside concurrent backend or cloud modernisation work; companies that require a larger augmentation team than boutique agencies can provide.Stack: Next.js, React, Node.js, TypeScript, AWS, .NET, microservices3. Dept — Next.js Website Agency — Amsterdam / Berlin / CopenhagenHourly rate: $100–150Time zone: CET/CEST (UTC+1/+2) for EU offices; global coverage across 30+ officesDept agency is one of the largest independent digital agencies in Europe, regularly cited in Gartner rankings for digital experience services. Their Next.js delivery happens within larger brand-driven digital transformation engagements rather than as a standalone React practice. The agency suits enterprise organisations that need design, strategy, and engineering in a single contract, and where Next.js is the chosen frontend framework within a broader platform rebuild.Documented delivery: Dept has documented work with global brands including Google, Audi, and Patagonia (self-reported). Specific Next.js App Router case studies with performance metrics were not found at time of writing.Best fit: Global enterprise brands running multi-region digital transformation programmes where Next.js is one component of a broader platform strategy.Stack: Next.js, React, Contentful, commercetools, Vercel4. Naturaily — Next.js Agency — Wrocław, PolandHourly rate: $50–99
Time zone: CET/CEST (UTC+1/+2)Naturaily is a Wrocław-based web development agency founded in 2012, specialising in headless commerce and content sites using Next.js, Jamstack architecture, and composable CMS platforms. Their documented project types include Shopify Plus headless storefronts, Next.js marketing site migrations from monolithic CMS platforms, and e-commerce builds requiring SEO and performance optimisation. Their published blog content on Next.js, headless CMS selection, and ISR strategy reflects active technical investment in the stack.Documented delivery: The Best IT case study documents a migration from a monolithic site to a Jamstack architecture using Next.js and Storyblok, including the scope of content consolidation and performance improvements (case study published on naturaily.com, specific metrics cited within). The n8n project involved building a scalable web solution for automated, API-rich content creation at high page volumes, with documented improvement to product visibility. Additional named clients include FGS Global and Urban (self-reported, partial detail).Best fit: Mid-market e-commerce brands and SaaS companies needing headless Shopify Plus builds or Next.js CMS-driven marketing sites with a performance and SEO focus.Stack: Next.js, React, Shopify Hydrogen, Storyblok, Sanity, Strapi, Node.js, Vercel5. Neoskop — Next.js Development Agency — Mannheim, GermanyHourly rate: $80–120
Time zone: CET/CEST (UTC+1/+2)Neoskop is a German-based web development company focused on SaaS and enterprise clients in the DACH region. Neoskop combines product strategy with software engineering delivery, making them a fit for DACH-market companies that value local market proximity and German data compliance standards alongside Next.js delivery. Their positioning emphasises mid-market SaaS rather than large enterprise transformation.Documented delivery: No independently verified case studies with named clients and performance metrics were found at time of writing. Self-reported client roster includes technology and B2B SaaS companies in Germany and Austria.Best fit: DACH-region SaaS companies that prioritise local agency relationship, German compliance standards, and product-level thinking alongside frontend delivery.Stack: Next.js, React, TypeScript, headless CMS platforms6. NearForm — Next.js Development Agency — Waterford, IrelandHourly rate: $80–120
Time zone: GMT/IST (UTC+0/+1) — strong overlap with UK and Western EuropeNearForm is an Irish enterprise software engineering company founded in 2011, with a primary specialisation in Node.js, React, and open-source JavaScript infrastructure. They are one of the most active contributors to the Node.js runtime globally and created Fastify — the high-performance Node.js web framework now widely used in enterprise backends. Their React and Next.js capability is deployed within large-scale enterprise digital transformation engagements, typically alongside backend modernisation, AI engineering, or data platform work rather than as standalone frontend delivery. Documented delivery: Condé Nast International (Node.js enterprise engagement, documented client quote on nearform.com). Everstream Analytics — NearForm built a data platform on AWS improving incident monitoring engagement by approximately 250% (stated in LinkedIn and conference materials). No specific Next.js App Router case studies with Core Web Vitals outcomes were found at time of writing.Best fit: Enterprises running complex Node.js backends who need a React/Next.js frontend layer delivered by the same team; organisations requiring open-source-first architecture and deep JavaScript runtime expertise alongside frontend delivery.Stack: React, Next.js, Node.js, TypeScript, Fastify, GraphQL, AWS, Google Cloud7. Netguru — Poznań / Warsaw, PolandHourly rate: $75–125
Time zone: CET/CEST (UTC+1/+2)Netguru is one of the most visible software engineering companies in international rankings, with a strong design-engineering integration model suited to early-stage and growth-stage SaaS products. Their Next.js work is delivered within a full product development lifecycle that includes UX design, product strategy, — making them a fit for companies building net-new SaaS platforms than for enterprises migrating existing infrastructure. Documented delivery: Self-reported clients include ING Bank, Volkswagen Financial Services, and Keller Williams. Specific Next.js App Router case studies with performance metrics were not found at time of writing.Best fit: Growth-stage SaaS companies that need a combined design and engineering partner to build a new product from scratch.Stack: Next.js, React, Ruby on Rails, TypeScript8. Boldare — Next.js Development Agency — Wrocław / Gdańsk, Poland
Hourly rate: $60–100
Time zone: CET/CEST (UTC+1/+2)Boldare operates as a product development partner, embedding within client teams to build SaaS products using agile delivery models. They are primarily suited to companies building net-new SaaS platforms rather than migrating existing ones. Their Next.js and React delivery is embedded within a full product lifecycle — design, engineering, testing, and iteration — rather than offered as a standalone frontend service. Clutch rating 4.9/5 (self-reported).Documented delivery: No independently verified case studies with named clients and specific Next.js performance metrics were found at time of writing. Clutch reviews reference SaaS clients across fintech, health, and enterprise software.Best fit: SaaS founders and enterprise innovation teams building net-new digital products under an agile retainer model.Stack: Next.js, React, TypeScript, headless CMS9. Blazity — Warsaw, Poland


Hourly rate: $70–110
Time zone: CET/CEST (UTC+1/+2)Blazity is a Warsaw-based software house operating exclusively within the Next.js and React ecosystem. They are one of the few European agencies where Next.js is not a service line alongside other technologies but the entire practice. Their work divides into four documented areas: performance engineering (diagnosing and resolving Core Web Vitals failures), platform migrations (from Angular, Vue, legacy React/Redux, WordPress, Drupal), full application builds, and production AI agent development on the Vercel AI SDK. Blazity ranked #33 on the Deloitte Technology Fast 50 Central Europe 2024 list, with reported revenue growth of 784% in the prior ranking cycle.Open source: Blazity maintains next-enterprise, an enterprise-grade Next.js boilerplate on GitHub built on the App Router with TypeScript, Tailwind CSS, Storybook, and unit, smoke, and e2e testing included. They also maintain a Next.js commerce starter kit and a Next.js Maintenance Mode middleware library.Best fit: Engineering teams with failing Core Web Vitals or stalled migrations; product organisations that need a senior Next.js architecture partner who transfers knowledge rather than creating dependency.Stack: Next.js (App Router), React, TypeScript, Vercel, Sanity, Contentful, Hygraph, Vercel AI SDK, Terraform (for infrastructure as code deployments)10. Makers' Den — Berlin, Germany -- ReactJS Web Agency
Hourly rate: $65–105
Time zone: CET/CEST (UTC+1/+2)Makers' Den is a Berlin-based product agency specialising in React and React Native development with headless CMS and composable commerce integrations. Their focus on custom, high-performance storefronts and full-stack applications positions them for startups and mid-sized businesses that need bespoke UI work alongside Shopify Hydrogen or Storyblok-driven content.Documented delivery: No independently verified case studies with named clients and specific performance metrics were found at time of writing.Best fit: Startups and mid-sized businesses building composable e-commerce storefronts or React-native cross-platform products.Stack: React, TypeScript, React Native, Storyblok, Node.js, Shopify Hydrogen11. Brainhub Software Development — Gliwice / Warsaw, Poland

Hourly rate: $70–120
Time zone: CET/CEST (UTC+1/+2)Brainhub is a software engineering agency whose primary engagement model is team extension — embedding senior engineers into client development teams rather than delivering end-to-end project builds. Their React and Next.js capability is oriented toward SaaS frontend development within existing engineering organisations. Clutch rating 4.9/5 (self-reported).Documented delivery: No independently verified case studies with named clients and specific Next.js outcomes were found at time of writing. Clutch reviews reference fintech and SaaS companies as clients.Best fit: Engineering teams that have an existing Next.js codebase and need senior frontend engineers embedded for 6–18 months rather than a full agency build.Stack: React, Node.js, .NET, TypeScript, AWS, React Native12. Lemonhive — London / Global

Hourly rate: $80–130
Time zone: GMT/BST (London, UTC+0/+1); global remote teamsLemonhive is a headless engineering consultancy focused on complex MACH (Microservices, API-first, Cloud-native, Headless) architecture builds. Their primary clients are digital agencies that need white-label Next.js and headless CMS delivery depth, and brands with complex integration requirements across commerce, CMS, and authentication layers.Documented delivery: No independently verified case studies with named clients and specific performance metrics were found at time of writing.Best fit: Agencies seeking a white-label Next.js engineering partner; brands with complex multi-system integrations requiring MACH architecture expertise.Stack: Next.js, Shopify Hydrogen, Sanity, Storyblok, Payload, React Native, SvelteKit13. 10Clouds — Warsaw, Poland
Hourly rate: $55–95
Time zone: CET/CEST (UTC+1/+2)10Clouds is a software company with a documented specialisation in AI-powered digital products, fintech platforms, and machine learning integrations. Their Next.js capability supports frontend delivery within backend-heavy product builds. They are better suited to projects where the primary engineering challenge is backend complexity or AI integration rather than frontend architecture or CMS-driven content operations. Self-reported clients include Pinterest and Displate.Documented delivery: Pinterest is cited as a client in self-reported materials. Specific Next.js App Router case studies with Core Web Vitals or performance outcomes were not found at time of writing.Best fit: Fintech or AI-product companies that need Next.js frontend work as part of a larger full-stack or AI-engineering engagement.Stack: React, Flutter, Python, Django, machine learning tooling, AI/LLM integrations, DevOps14. Rigby — Wrocław / Warsaw, Poland

Hourly rate: $60–100
Time zone: CET/CEST (UTC+1/+2)Rigby is a Polish e-commerce development agency focused on custom B2B, B2C, and multi-vendor commerce platforms. Their technical differentiation is depth in Medusa.js — an open-source headless commerce engine — alongside Next.js for the frontend layer. They are a narrow specialist: the right choice if you are building a custom marketplace, subscription platform, or multi-tenant commerce system, and a poor fit for CMS-driven marketing sites or SaaS dashboards.Documented delivery: No independently verified case studies with named clients and specific performance metrics were found at time of writing. Self-reported clients span North America, Europe, the Middle East, Africa, and Asia-Pacific.Best fit: Companies building custom B2B or B2C commerce platforms with complex models — marketplaces, subscriptions, multi-vendor, multi-tenant — on a modern headless stack.Stack: Next.js, React, Medusa.js, TypeScript, Node.js, composable commerce tooling15. Halo Lab — Odesa / Kyiv / Kharkiv, Ukraine

Hourly rate: $40–80
Time zone: EET/EEST (UTC+2/+3)Halo Lab is a full-service digital agency with a design-led delivery model, covering branding, UX design, web development, and QA in end-to-end project engagements. Their Next.js delivery sits within design-driven web app and marketing site builds rather than enterprise platform architecture. Self-reported clients include Corel and Oppo.Documented delivery: Corel and Oppo are cited in self-reported materials. Specific Next.js App Router case studies with Core Web Vitals or performance outcomes were not found at time of writing.Best fit: SMBs and startups that need end-to-end design and development in a single engagement, with competitive rates and high design quality as the primary requirement.Stack: React, Next.js, Webflow, CMS development, Node.js, UI/UX tooling, QA frameworksWhy Next.js Is the Default React Framework for SaaS and Enterprise Projects in 2026The React framework landscape has consolidated significantly over the past three years. According to the State of JavaScript 2025 survey — 13,000+ respondents, sponsored by Google Chrome and JetBrains — Next.js is used by 59% of JavaScript developers, making it the most adopted meta-framework by a significant margin.Three structural factors explain why Next.js framework has become the default choice for SaaS and enterprise frontend development in Europe specifically.Rendering flexibility within a single framework. Next.js supports SSG, SSR, ISR, React Server Components, and Partial Prerendering within a single project. This means the same engineering team handles performance-critical marketing pages, dynamic SaaS dashboards, and API routes without switching frameworks or splitting the codebase. The App Router, now the default since Next.js 13 and stabilised through versions 14 and 15, has matured into a production-ready foundation that engineering teams are actively building on rather than evaluating.Vercel's edge network for multi-market performance. European SaaS companies typically serve audiences across multiple countries and languages. Vercel's global CDN and edge middleware configuration deliver measurable Core Web Vitals improvements over traditional hosting setups, with direct impact on organic search performance in competitive European markets.Ecosystem maturity. The Next.js integration ecosystem — headless CMS platforms such as React CMS solutions (Storyblok, Sanity, Contentful, Payload), authentication providers (Clerk, Auth.js), commerce platforms (Shopify Hydrogen, Medusa), and observability tooling — has reached a level of maturity that substantially reduces integration risk. Native App Router support for draft mode, the Metadata API, route-level caching configuration, and the Vercel AI SDK for AI-powered features means most production requirements are covered without custom workarounds.Frequently Asked Questions about Next.JS1. What is a Next.js development agency?A Next.js agency is a software engineering company that specialises in building, migrating, and scaling web applications using Next.js — the React meta-framework maintained by Vercel. Unlike a general web development agency, a dedicated Next.js agency employs developers who work exclusively or primarily with Next.js, meaning they have hands-on experience with the App Router, React Server Components, Vercel deployments, and headless CMS integrations. When your Next.js project involves performance-critical rendering, multi-language content architecture, or a migration from a legacy platform, a specialist Next.js agency will make different, and usually better architectural decisions than a generalist team that treats Next.js as one tool among many.2. What does a Next.js agency typically charge in Europe?We can't garantee the 100% accuracy, because everything depends, but. Hourly rates for specialist Next.js agencies in Western Europe (UK, Netherlands, Germany) range from $80 to $150. Central European agencies (Poland, Ukraine) typically range from $40 to $100. Total Next.js project costs for a headless CMS migration or a new SaaS marketing site range from $30,000 to $200,000+ depending on content volume, language count, integration complexity, and post-launch support requirements. A Next.js project that involves multiple languages, CMS editorial workflows, and Vercel enterprise deployment will sit toward the upper end of that range regardless of the agency's day rate.
3. What is the difference between the App Router and Pages Router, and why does it matter when hiring a Next.js agency?The Pages Router is Next.js's original routing model, where each file in /pages becomes a route and data fetching happens via getServerSideProps or getStaticProps. The App Router, introduced in Next.js 13, uses a /app directory, supports React Server Components natively, and fundamentally changes how layouts, data fetching, and caching are structured. Vercel is actively developing new features (Partial Prerendering, improved caching primitives) exclusively for the App Router. A Next.js agency still defaulting to the Pages Router for new Next.js projects in 2026 is building on a model that will require migration in the near term — and signals they are not actively working at the current production standard.4. What built-in features does Next.js provide to improve SEO?Next.js aligns its rendering and optimisation defaults with what search engines and Core Web Vitals reward, making good SEO the path of least resistance rather than a bolt-on. The key mechanisms are:SSR and SSG deliver fully rendered HTML to crawlers, unlike client-side React apps that ship an empty <div>. Search engines index pre-rendered content far more reliably.The Metadata API (app/layout.tsx or generateMetadata()) lets you define <title>, <meta description>, Open Graph tags, and canonical URLs declaratively — per page or dynamically based on route params:export async function generateMetadata({ params }) {    return {      title: `Product: ${params.slug}`,      description: "...",      alternates: { canonical: `https://example.com/products/${params.slug}` },    };  }Automatic sitemap.xml and robots.txt are generated via convention-based files (app/sitemap.ts, app/robots.ts), keeping them dynamic and always in sync with your routes.Image optimisation via <Image> enforces correct sizing, serves modern formats (WebP/AVIF), and adds width/height attributes automatically — directly improving LCP and CLS scores.Font optimisation via next/font eliminates layout shift from web fonts by inlining font-face declarations and preloading — directly improving CLS.Streaming and React Server Components reduce TTFB and improve LCP by sending HTML progressively, benefiting both users and crawlers.Structured data (JSON-LD) is injected as a <script> tag in any Server Component, enabling rich results in search.A qualified Next.js agency treats all of these as standard delivery requirements, not optional enhancements.5. What headless CMS platforms work best with Next.js in 2026?
Sanity, Storyblok, Contentful, and Payload CMS are the four platforms with the deepest documented Next.js App Router integrations. Sanity and Storyblok have native visual editing and draft mode support for React Server Components. Payload is a TypeScript-first, self-hostable CMS that can be run within the same Next.js application. The right CMS choice depends on editorial workflow requirements, content model complexity, localisation needs, and whether the team wants a hosted or self-hosted solution.6. What should a Next.js agency deliver at project close?
A production-quality handover from a Next.js agency includes: a TypeScript codebase with automated tests (unit, integration, and ideally end-to-end); documentation covering content model schema, component architecture, and deployment processes; redirect mapping validated against the pre-launch crawl; a configured Vercel project with environment variables scoped correctly to staging and production; editor training and documentation for the CMS; and a defined post-launch support period with documented SLAs for critical and non-critical issues.7. When should I hire a Next.js agency instead of a freelancer? 
A freelancer is the right choice when scope is tight, the project is well-defined, and you need one or two specific skills — a performance audit, a CMS integration, a specific component build. A Next.js agency makes more sense when the project has moving parts that require multiple disciplines at once (architecture, frontend, CMS configuration, DevOps, QA), when the stakes of getting the architecture wrong are high, or when you need continuity after launch.
When Raspberry Pi Said No to Node: How We Rewired Our Next.js App
React Summit US 2025React Summit US 2025
20 min
When Raspberry Pi Said No to Node: How We Rewired Our Next.js App
Welcome to a storytelling session intertwined with technology aspects, showcasing how a Nexus application was rewired due to unexpected constraints after deployment for an EV client on Raspberry Pi without Node.js. Discussing the initial architecture of a battery management application for electric vehicles using NixJS, D3JS, and edge caching. Challenges faced when Node.js was removed and the impact on server-side rendering and application performance. Facing constraints without Node.js in NixJS app, investigation on adapting to hardware realities, and finding a solution by dissecting NixJS to remove dependencies. Replacing ISR without Node.js, adapting to static export in Next.js, optimizing API calls for client-side performance, rewiring to local setup for enhanced performance, and accidental discovery of static advantage over dynamic. Design for hardware constraints, understand tools and frameworks deeply, stay adaptable, and keep solutions portable.
Building a Hybrid AI Chatbot with Next.js 16
React Summit US 2025React Summit US 2025
32 min
Building a Hybrid AI Chatbot with Next.js 16
Sam discussing Next.js features including cache components for dynamic apps with a blend of static pre-rendering for speed. Discussing a dynamic app with personal data, utilizing cookies and a database for chatting, showcasing Next 16's cache components for hybrid static and dynamic pages. Making necessary changes for cache components in Next to improve page loading speed and user experience, utilizing Suspense DevTools for enhanced rendering control. Utilizing state for real-time updates from OpenAI's async iterable stream in the front end. Using generators to streamline text data transmission from OpenAI streams for efficient UI updates. Discussing the benefits of managing less client-side state and implementing optimistic rendering for instant UI feedback. Discussing the use of temporary client state, error handling, and the concept of optimistic rendering for responsive and instant applications in Next.js. Exploring features of Next 16, cache components, and the use cache directive for dynamic rendering and runtime prefetching in Next.js.
T3Boy: Making Accurate Game Boy Emulation Accessible with Next.js and WASM
React Summit 2025React Summit 2025
21 min
T3Boy: Making Accurate Game Boy Emulation Accessible with Next.js and WASM
Travis TI Kevin83 McGeehan, senior software engineer, ambassador for Task Videos, React Native specialist, task record holder in Pokemon Yellow Glitchless, TAS verification process for console input validation. Mickey Mouse $61 billion in merchandise sales, Pokemon RPGs, speedrunning concept, different categories, TASing in emulators, TAS records on TASvideos.org, TASbot mascot. TAS verification, controller interfaces, TASbot mascot, T3 Boy accessibility challenges, TAS videos preservation, Kolmogorov complexity in emulation accuracy. Qt for emulator front ends, WebAssembly benefits, T3 Boy website integration with emulation cores, T3 stack integration for game saves, custom pointer events API, T3 Boy interface overview. Integrating WASM module into Next.js boilerplate, Global function declaration in TypeScript, Important functions like cwrap for WebAssembly interaction. Cwrap function for JavaScript module interaction, Pointer concept in lower-level languages, Memory management with malloc, heapuate, and free. Loading BIOS and Memory Management, Handling Individual Values, Using Add Function for Callbacks, Quirks with Web Audio API and Resampling Limitations. Utilizing Pointer Events API, Cloud Saving Feature with Discord Auth, T3Boy Emulator, and WebAssembly Integration in React.
Next.js Adapters: Build Once, Deploy Everywhere
React Summit 2025React Summit 2025
7 min
Next.js Adapters: Build Once, Deploy Everywhere
Hello, React Summit. Excited to talk about Next.js adapters. Evolution towards adapter solutions to simplify deployment complexities. Minimalist adapter interface for customization and structured output handling. Key hooks and configurations for platform-specific optimizations. Partners collaboration for enhanced experiences in Next.js deployments. Simplified, platform-agnostic deployments for better developer experience.
Production-ready Next.js App with Cursor AI
React Day Berlin 2024React Day Berlin 2024
182 min
Production-ready Next.js App with Cursor AI
Workshop
Maurice de Beijer
Maurice de Beijer
Code Less, Create More: AI-Driven App Development for React Devs.Join us for a workshop designed for React developers eager to harness the power of AI to streamline their app development process. In "Code Less, Create More," you'll learn how to build applications using the Cursor IDE with the power of AI and minimal manual coding.Explore how Cursor, an AI-enhanced code editor, revolutionizes your coding experience by seamlessly integrating with your existing workflow. Uncover its advanced capabilities: predicting your next edits, offering real-time code suggestions, and comprehending your project's architecture. This allows you to channel your energy into creativity and innovation rather than grappling with syntax and repetitive tasks.We'll guide you through initializing a Next.js project, demonstrating how to utilize AI tools to efficiently craft dynamic, responsive applications. By the workshop's conclusion, you'll possess the skills to construct sophisticated software with reduced coding effort, empowering you to become a more productive and innovative developer.Whether you're a seasoned React developer or new to AI-assisted coding, this workshop will equip you with the knowledge and tools to elevate your development projects to the next level.
React Server Components: Elevating Speed, Interactivity, and User Experience
React Summit US 2024React Summit US 2024
20 min
React Server Components: Elevating Speed, Interactivity, and User Experience
Watch video: React Server Components: Elevating Speed, Interactivity, and User Experience
My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
React Summit US 2024React Summit US 2024
12 min
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.
The Journey From React Frontend Development to Fullstack Development With Next.js
React Advanced 2024React Advanced 2024
143 min
The Journey From React Frontend Development to Fullstack Development With Next.js
Workshop
Eric Burel
Eric Burel
Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.
- Introduction: discovering Next.js and its server-centric philosophy- Crafting a perfectly optimized multi-page website- Making sense of Next.js server-side rendering capabilities- Conclusion: how Next.js empowers you as a React developer
Securing Server-Rendered Applications – Next.js Case
React Advanced 2024React Advanced 2024
20 min
Securing Server-Rendered Applications – Next.js Case
Welcome to Securing Server on the Red Applications in the Context of Next.js talk. Next.js brings new challenges for front-end developers with its server-side rendering technologies. We need to consider security in Next.js applications and address the common vulnerabilities listed in the OWASP top 10. Server-side request forgery (SSRF) is a common vulnerability that allows attackers to exploit the server's privileges. Security logging and monitoring failures are critical, as proper setup is necessary to detect attacks. Being cautious with npm packages, addressing identification and authentication failures, and updating vulnerable components are crucial for application security. Database seeding, security headers, and permissions policies are important for application security. It's important to reduce the criticality of an attack, check strict transport security header, and prevent security issues by following best practices. Understanding CSRF vulnerability, image injection vulnerability, and cryptographic failures is important. Broken access control can result in unauthorized access and should be mitigated. Thank you for watching this talk and stay safe!
Unveiling Next.js Secret Sauce on the Edge
React Summit 2024React Summit 2024
48 min
Unveiling Next.js Secret Sauce on the Edge
Workshop
Mustafa Azim
Mustafa Azim
Next.js on the Edge with its new secrets sauce for better user experience and high performance. We will unveil Next.js secret sauce and the way of working to deliver the best user experience in Edge network and the new features including partial pre-rendering. How to make use of the Server component and its high performance on Edge network.
Table of the contents:- Intro to the Edge network- Edge runtime in V8- Use cases of the edge functions- Deploy a service on the edge network
Next.js: Reshaping Web App Architecture for Performance Excellence
React Summit 2024React Summit 2024
9 min
Next.js: Reshaping Web App Architecture for Performance Excellence
This Talk discusses how Next.js was used to reshape web app architecture for performance excellence. Next.js allows for server-side rendering (SSR) and client-side rendering (CSR), improving performance and user experience. The implementation of Next.js on the application resulted in faster initial page loads, reduced white screen time, and improved loading states. It is important to use the different rendering options correctly to maximize performance.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024React Summit 2024
22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.
WordPress-like Plugins, but for Next.js
React Day Berlin 2023React Day Berlin 2023
9 min
WordPress-like Plugins, but for Next.js
Watch video: WordPress-like Plugins, but for Next.js
This Talk discusses the implementation of a plugin system for Next.js, similar to Wordpress. The plugin system allows for the co-location of different functionalities within their own modules. Plugins can be easily added or removed without affecting other parts of the website. The Talk also showcases a demo of the plugin system in action. The key takeaways include the benefits of co-locating features, the importance of code abstraction beyond packages, and the future of copy-pasting as a means of code reuse.
Building Reusable Server Components in NextJS
React Summit US 2023React Summit US 2023
88 min
Building Reusable Server Components in NextJS
Top Content
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continues to evolve their beta capability, React Server Components, and they're continuing to further develop them in partnership with frameworks like NextJS.In this workshop, attendees will learn what React Server Components are, how to effectively build and use them in NextJS, and focus on one of the major advantages of React/NextJS: reusability through components.We will also cover related beta technologies enabled by the `app` directory, such as nested layouts and server actions (alpha/experimental capability).Join us for this hands-on, 120 minute workshop!Technologies:
React, JavaScript/Typescript, NextJS, Miro
Content Security Policy with Next.js: Leveling Up your Website's Security
React Summit US 2023React Summit US 2023
9 min
Content Security Policy with Next.js: Leveling Up your Website's Security
Top Content
Watch video: Content Security Policy with Next.js: Leveling Up your Website's Security
Lucas Estevão, a Principal UI Engineer and Technical Manager at Avenue Code, discusses how to implement Content Security Policy (CSP) with Next.js to enhance website security. He explains that CSP is a security layer that protects against cross-site scripting and data injection attacks by restricting browser functionality. The talk covers adding CSP to an XJS application using meta tags or headers, and demonstrates the use of the 'nonce' attribute for allowing inline scripts securely. Estevão also highlights the importance of using content security reports to identify and improve application security.
From Todo App to B2B SaaS with Next.js and Clerk
React Summit US 2023React Summit US 2023
153 min
From Todo App to B2B SaaS with Next.js and Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.
Shield Your Next.js App With a Content Security Policy
React Advanced 2023React Advanced 2023
6 min
Shield Your Next.js App With a Content Security Policy
Top Content
Watch video: Shield Your Next.js App With a Content Security Policy
Lucas Esteveau discusses the importance of Content Security Policy (CSP) as an additional layer of security for browsers. He explains how to validate and implement CSP using tools like csp-evaluator.withgoogle.com and observatory.mozilla.org. He also highlights the use of server components and middleware in the Hudafor project to set and enforce CSP directives. Lucas advises starting with a report-only CSP, reviewing the results, and gradually enforcing the policy. He emphasizes the importance of reviewing policy violation reports and iterating the process when making changes.
The State of The State In The App Router
React Advanced 2023React Advanced 2023
32 min
The State of The State In The App Router
Watch video: The State of The State In The App Router
React has improved state management with built-in hooks like useState, useReducer, and useRef. Redux can still be used but it's recommended to avoid global state. Zustand is an alternative state manager that allows for easy creation of hooks. Proper architecture is important for accessing the global store. State managers can add extra bytes to the client's JavaScript bundle, so it's important to be selective in choosing libraries. Next.js and React routers are recommended for server-side rendering and personalized experiences can be achieved with spas.
Building Blazing-Fast Websites with Next.js and Sanity.io
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Crash Course into the Jamstack with Next.js & Storyblok
React Day Berlin 2022React Day Berlin 2022
161 min
Crash Course into the Jamstack with Next.js & Storyblok
Workshop
Arisa Fukuzaki
Chakit Arora
2 authors
You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself!
- In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.- How Next.js serves content, and how content is served with Static Site Generation (SSG).- Atomic design methodology, and how this is applied to the content management system.- Hands-on project experience by building a Jamstack project with Next.js and Storyblok.
Prerequisites- Any Text . Visual Studio Code recommended- Node.js LTS- NPM or Yarn- GitHub account- Vercel account- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus
What's included1. Introduction and overview of the workshop2. Introduction to Jamstack3. Introduction to Atomic Design4. Overview of Headless CMS5. Introduction to Storyblok6. Next.js app creation7. Storyblok space creation8. Next.js and Storyblok connection9. Custom components creation10.First-page creation11. Introduction to Visual 12. Dynamic pages addition13. Blog section creation14. Deployment on Vercel
Making a Splash: The Story of a Toilet Map Migration
React Advanced 2022React Advanced 2022
24 min
Making a Splash: The Story of a Toilet Map Migration
The Talk discusses the migration of the Toilet Map Project from Create React app to Next.js, with plans to take it international. The project aims to address the inadequate public toilet provision in the UK. It includes publicly accessible toilets, community access schemes, and user contributions. The migration to Next.js offers benefits like server-side rendering and root prefetching. The Talk also covers the migration to TypeScript, improvements in loading speed and caching, dynamic pages, API migration, geohashing, marker clustering, chunk loading, accessibility overlay, and future plans for expansion and user contributions.
Building a Lightning-Fast Site with Next.js, Tailwind and GraphQL
React Advanced 2022React Advanced 2022
9 min
Building a Lightning-Fast Site with Next.js, Tailwind and GraphQL
Ankita explains how to build a lightning-fast site using Next.js, GraphQL, and Tailwind. Next.js offers rendering techniques for improved performance and SEO, as well as support for dynamic imports and deferring non-essential scripts. Next.js also provides performance benefits like layout stability and improved lighthouse score, along with server-side rendering and caching. GraphQL allows for efficient data retrieval, Apollo Client handles caching, and Tailwind simplifies CSS. The future goal is to make UI development easier and faster with React server components and Tailwind CSS.
Crash Course Into Multilingual Websites With next.JS and Headless Content
React Advanced 2022React Advanced 2022
126 min
Crash Course Into Multilingual Websites With next.JS and Headless Content
Workshop
Ondrej Polesny
Ondrej Polesny
On this crash course, we'll create a new project in the headless CMS, fill it with data, and use the content to build a multilingual Next.js app. We'll spend a lot of time in code to:- Generate strongly typed models and structure for the content- Set up the site for multiple languages- Use respective language codes in content fetching and incorporate language fallbacks- Resolve multilingual content from rich text fields
You will learn:- How to work with content from headless CMS (Kontent.ai)- How content model can be leveraged to generate TS types and what benefits it brings to your project- How to add multilingual capabilities to Next.js website- How to use language fallbacks- What are the typical gotchas when working with multilingual content
Using Feature Flags in Development
React Advanced 2022React Advanced 2022
72 min
Using Feature Flags in Development
Workshop
Jessica Cregg
Jessica Cregg
Ensuring your code is ready for production without enabling your features to your entire user base used to involve a lot of guesswork. By using feature flags, we can allow our development teams to preview work-in-progress features and unreleased functionality in production without redeploying our code.
In this workshop, we’ll run through the fundamentals of feature flagging on both the client and server sides. We’ll cover working with LaunchDarkly’s SDKs within the context of a React application with a node backend, flagging at different places in the stack and give an introduction to rule targeting in the platform.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
Workshop
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Don't take it Personally, it is Personalization
React Summit 2022React Summit 2022
22 min
Don't take it Personally, it is Personalization
Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There are four types of personalization: explicit, implicit, interrupted, and seamless. Implementing personalized experiences involves using tools like Next.js and NetJS. Best practices include avoiding annoying users, testing strategies, and monitoring analytics.
You don't want to Server-side Render your Next.js App
React Summit 2022React Summit 2022
28 min
You don't want to Server-side Render your Next.js App
Top Content
Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better search engine optimization but requires a server. Static site generation provides outstanding performance and scalability but has limitations. Incremental static regeneration solves the problem of rebuilding the entire website. Choosing the right rendering strategy depends on the specific scenario, and for e-commerce websites, static site generation with incremental static regeneration is recommended.
Large scale projects challenges (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
React Summit 2022React Summit 2022
8 min
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.
How to properly handle URL slug changes in Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
Top Content
This Talk explains how to handle URL slug changes in Next.js by using the getStaticPaths and getStaticProps methods. It covers implementing redirects and provides a solution to eliminate the need for editors to perform additional steps. The approach involves tracking URL slug changes and issuing proper redirects. The speaker encourages the audience to reach out with any questions or experiences with handling URL slugs.
How to Secure Your Node.js Containers on Kubernetes With Best Practices
DevOps.js Conf 2022DevOps.js Conf 2022
34 min
How to Secure Your Node.js Containers on Kubernetes With Best Practices
Today's talk is about securing Kubernetes containers, especially for Node.js. The best practices for securing Kubernetes include using RBAC, OIDC, and secrets, as well as isolating workloads and securing container images. OADC is recommended for authentication in Kubernetes, and securing the Kubernetes cluster is crucial. Cloud-based Kubernetes clusters can utilize OADC or the default authentication mechanism provided by the cloud provider. Managing team size and dealing with different security philosophies are important considerations. Overall, securing Kubernetes is essential for protecting the infrastructure and data.
Managing Authentication in Next.js
Node Congress 2022Node Congress 2022
155 min
Managing Authentication in Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless providing many out-of-the-box solutions. But when it comes to authentication and user security, it's our mission to make it reliable, secure, and efficient. In this workshop, we'll focus on different user authentication and session management approaches, starting from a custom authentication strategy (that we will build together), and ending learning how to identify and integrate the right auth provider (Auth0, Firebase, etc.) for any app.
Table of contents:- A brief introduction to Next.js- Building an authentication mechanism from scratch- Why we should avoid custom authentication- How to identify the proper authentication mechanism and provider- Integrating NextAuth.js, Auth0, Firebase, or any other provider
GraphQL + Apollo + Next.js: A Lovely Trio
GraphQL Galaxy 2021GraphQL Galaxy 2021
21 min
GraphQL + Apollo + Next.js: A Lovely Trio
This talk provides an overview of using GraphQL, Apollo, and Next.js together. It covers Next.js' data loading and routing capabilities, code generation with GraphQL, and generating TypeScript types. The talk also explores Apollo Client and its integration with GraphQL code generation. The speaker recommends checking out companion repositories and resources for more information.
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
Workshop
William Lyon
William Lyon
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
E2E Tests for API – Saving Nerves and Hours
TestJS Summit 2021TestJS Summit 2021
8 min
E2E Tests for API – Saving Nerves and Hours
This Talk discusses the use of end-to-end tests for API development, specifically using the Nest.js framework. The process of initializing the Nest API for testing is explained, along with customization options such as overriding authentication guards. The benefits of end-to-end tests are highlighted, including ease of modification and serving as additional documentation for the API. The challenges of writing the initial version of the test and a trick for mocking the date in tests are also mentioned.
Build Fullstack Apps in Record Time with Blitz.js
React Advanced 2021React Advanced 2021
67 min
Build Fullstack Apps in Record Time with Blitz.js
Workshop
Simon Knott
Simon Knott
Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs!

Simon will introduce all the important parts & guide you through getting started with Blitz, so you'll know if you might want to use it or not.
Killing BFFs with GraphQL and Next.js
React Advanced 2021React Advanced 2021
21 min
Killing BFFs with GraphQL and Next.js
Top Content
This talk discusses the challenges and benefits of using Backend for Frontends (BFFs) and microservices in software development. It highlights how Next.js can simplify the creation of BFFs and unify the gateway for microservices. The talk also emphasizes the advantages of Next.js API routes in simplifying the development, deployment, and maintenance of APIs. It showcases the implementation of a BFF using Next.js and API routes, and the extension of API routes in an executable way. The speaker also mentions launching a course on using Next.js API routes for building a serverless GraphQL API.
Incremental Static Regeneration: Static Sites on Steroids
React Advanced 2021React Advanced 2021
22 min
Incremental Static Regeneration: Static Sites on Steroids
Incremental static regeneration is a feature in Next.js that allows for static generation on a per-page basis without rebuilding the entire site. It helps with headless content management systems and persists between deployments. The example demonstrates how server-side rendering, static site generation, and incremental static regeneration work together. The real-time visual editor allows for immediate changes to be seen. Visit the NetJS website for an e-commerce demo and learning platform.
How do Localise and Personalize Content with Sanity.io and Next.js
React Advanced 2021React Advanced 2021
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Top Content
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
SSR & SSG in NextJS
React Finland 2021React Finland 2021
27 min
SSR & SSG in NextJS
In this talk we are going to have a look on how to use Server-Side-Rendering and Static-Site-Generation in NextJS to serve pages.
Blitz.js - The Fullstack React Framework
React Summit 2020React Summit 2020
32 min
Blitz.js - The Fullstack React Framework
Blitz is a framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.
Nx + Next.js = ❤
React Summit 2020React Summit 2020
9 min
Nx + Next.js = ❤
Hey everybody, my name is Adam Ellibert, aka Big AB, and I am a core contributor on a project called NX. Today, I'm going to go through a whirlwind tour of a really cool way to do web development using NX. NX is a suite of dev tools to improve developer experience, and it's extensible, plugin-based, and open-source. I'll show you some of the commands that NX provides, such as creating an NX workspace, generating schematics, serving as a dev server, building applications, and running tests. NX also has a variety of plugins, including the Next.js plugin. And if you're not comfortable with command-line interfaces, there's a GUI available for you. I'm going to create an NX workspace and choose Next.js as my first application. Then I'll create another app called Uber for Star and add a dashboard page. I'll also create a shared components library and configure storybook for it. Finally, I'll use NxServe to serve my Uber 4 app. This setup includes a splash page, a dashboard page, and a design system using storybook. We've got shared components for our marketing website and Uber 4 app. We also have end-to-end directories for Cypress tests and jest for unit tests. Our Uber 4 app is similar to any other Next.js app with pages and a nested dashboard page. We import shared components by prefixing them with the org name and library name. NX handles dependencies, ensuring everyone is on the same version and allows scoping imports to the org. Computation caching optimizes test and build runs by caching results that are unaffected by code changes. NX brings easy application creation with consistent commands and shared library extraction. Generators save time and enforce best practices. NX provides modern tools like Cypress, Storybook, Prettier, ESLint, and Next.js. The Next.js plugin creates and configures Next.js applications, serving them in dev mode and building production-ready and static apps. Visit nx.dev for more information.
E-commerce on the Jamstack with NextJS and Netlify
React Summit Remote Edition 2021React Summit Remote Edition 2021
120 min
E-commerce on the Jamstack with NextJS and Netlify
Workshop
Nick DeJesus
Nick DeJesus
Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities.
Scaling WordPress with Next.js
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Scaling WordPress with Next.js
Watch video: Scaling WordPress with Next.js
WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.
Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React
React Summit Remote Edition 2021React Summit Remote Edition 2021
31 min
Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React
Top Content
Today's Talk discussed the impact of Core Web Vitals on SEO and website performance. Strategies for improving Core Web Vitals include using Next.js, optimizing images and fonts, and measuring performance with tools like Google Lighthouse. The hybrid approach of Next.js allows for flexibility in rendering applications. Recent releases of Next.js have focused on performance improvements. Next.js Commerce offers an all-in-one starter kit for e-commerce. Vercel provides a tool for measuring real user experiences and identifying potential causes of performance issues.
Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀
Lyft has developed a next-generation microservice platform called Lyft Service, built on Next.js. They use a plugin system to reuse code and keep their stack modern. The plugin system allows for easy packaging and delivery of application functionality. Lyft has a structured approach to migrations and versioning, ensuring seamless upgrades. The success of the platform is attributed to organizational and cultural processes, as well as buy-in from senior leadership.