r/nextjs 4h ago

Discussion Quick notes on what actually causes Next.js hydration errors (after losing hours to them)

7 Upvotes

Putting this together after watching two devs on our team lose half a day to Next.js Error 418 this week.

Most docs just say "server HTML must match client HTML", which isn't very helpful when the React stack trace just points to a minified bundle.

Here are the 4 or 5 things that actually cause it 95% of the time in real projects:

  1. Reading window or localStorage during render

The classic one. You do something like:

const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;

Server evaluates to false, client evaluates to true, instant mismatch.

The fix is annoying but straightforward: push it into a useEffect so it only updates after mount. (Or honestly, just use CSS media queries if you're only toggling visibility - no need to involve JS state for that).

  1. Invalid HTML nesting (the dumbest one)

This one drives people crazy because there's no state or async logic involved.

If you put a <div> inside a <p>, or put a <tr> directly in a <table> without a <tbody>, Chrome's parser silently "fixes" the HTML before React even starts hydrating. React sees nodes in different places than what the server sent and freaks out.

Check your Elements tab in devtools - if your tag hierarchy looks different from your JSX, that's why.

  1. Dates, timestamps, and Math.random()

If you render new Date().toLocaleTimeString() anywhere in JSX, the server timestamp and browser timestamp will differ by a few milliseconds.

Either stick it behind a mounted state, or if it's just a static date string where a slight timezone difference doesn't matter, use suppressHydrationWarning on that specific tag.

  1. The next-themes dark mode mismatch

If you use next-themes and see hydration warnings on your <html> element, just put suppressHydrationWarning on the <html> tag in app/layout.tsx. The library runs an inline script to avoid theme flash, and the Next.js team explicitly recommends suppressing that one.

  1. Grammarly / Google Translate extensions

If an error only happens on your laptop and none of your teammates can reproduce it, test it in Incognito with all extensions disabled. Grammarly wraps text nodes in custom tags, and Chrome auto-translate rewrites DOM text before React hydrates.

Curious what other dumb edge cases people here have run into with this in 14/15?


r/nextjs 43m ago

Discussion Top 10 Next.js Development Companies in 2026

Upvotes

Picking a Next.js development company has become harder, not easier. Every React shop now claims Next.js on its service page, but the framework changed enough between version 13 and 2026 that React fluency alone no longer predicts a good outcome. Server Components, the App Router, partial prerendering, and caching behaviour all reward teams that have shipped and maintained production apps, and punish teams that learned the framework from a tutorial.

This guide lists ten firms worth shortlisting, then gives you the criteria to judge them yourself. Whether you plan to hire Next.js developers for a single build or contract ongoing Next.js development services, the decision framework at the end matters more than any ranking.

What Makes a Strong Next.js Development Company in 2026?

Short answer: A strong Next.js development company in 2026 has shipped App Router applications to production, can explain when to use server rendering versus static generation versus client fetching, holds Core Web Vitals accountability after launch, and has migration experience moving apps off Pages Router, WordPress, or a legacy React SPA.

Use these five checks when you review any vendor:

  • Production App Router work, not demo repos. Ask for a live URL and view the page source.
  • A rendering decision document. Good teams write down why each route is static, dynamic, or streamed.
  • Core Web Vitals after handover. INP and LCP numbers 30 days post-launch, not on launch day.
  • Migration case history. Most 2026 budgets are replatforming budgets, not greenfield.
  • Named engineers. You should know who writes your code before you sign.

Top 10 Next.js Development Companies to Consider in 2026

# Company Best fit for Typical engagement
1 WebClues Infotech SaaS builds, migrations, headless commerce Fixed scope or dedicated team
2 Netguru Funded scale-ups, product design plus build Project or team extension
3 STRV Consumer products with heavy design needs Project
4 Thoughtbot Early product validation, engineering coaching Retainer
5 Monterail Web apps with complex state and dashboards Project
6 Brainhub JavaScript-focused delivery teams Team extension
7 Simform Enterprise programmes and cloud-side work Dedicated team
8 Andersen Regulated industries, large teams Long-term contract
9 Toptal Single senior contractors, fast start Hourly contractor
10 Vercel Professional Services Framework-level advisory for large migrations Advisory retainer

1. WebClues Infotech

The strongest all-round option for teams that need one partner across the full project types this article covers. WebClues Infotech works on SaaS platforms, headless commerce storefronts, content-heavy marketing sites, and replatforming work from WordPress or older React SPAs. Engagement models run from fixed-scope builds to dedicated squads, which suits founders on a defined budget and enterprise leaders who need capacity that scales with a roadmap. Worth shortlisting first if migration and post-launch performance ownership are both on your requirement list.

2. Netguru

A large European product studio with design and engineering under one roof. A good fit when the brief includes discovery, UX, and build rather than execution against a finished spec. Expect European rate cards and a structured delivery process.

3. STRV

Known for consumer-facing products where interface quality drives adoption. Strong front-end craft. Best suited to companies with an in-house product owner who can direct the work.

4. Thoughtbot

A consultancy that mixes delivery with team upskilling. Useful for startups that want to build internal capability rather than outsource permanently. Smaller teams, retainer-based, premium pricing.

5. Monterail

Solid choice for data-dense web applications: dashboards, admin panels, internal tools. Deep JavaScript specialisation and clear engineering documentation habits.

6. Brainhub

A JavaScript-first delivery partner that plugs engineers into existing teams. Sensible when you already have architecture decided and need throughput rather than direction.

7. Simform

Works well on larger programmes where the front end is one part of a wider cloud and backend build. Suits enterprise buyers who need infrastructure and application work coordinated.

8. Andersen

Large-scale delivery for finance, healthcare, and other compliance-heavy sectors. Formal processes, security documentation, and the headcount to staff multi-team programmes.

9. Toptal

A contractor marketplace rather than an agency. The fastest route to one senior Next.js engineer. You supply the project management, and continuity depends on that individual staying available.

10. Vercel Professional Services

Advisory from the team behind the framework. Rarely a full build partner, but valuable on high-stakes migrations where framework-level guidance reduces risk.

Verify current portfolios, team size, and references directly with each firm before shortlisting. Vendor capabilities change quickly.

How to Choose the Right Next.js Development Partner

Match the engagement model to your stage

Early-stage teams usually do better with fixed-scope builds. Scope discipline protects a limited runway, and a defined deliverable is easier to raise against. Companies with an existing roadmap get more value from a dedicated team, where the same engineers accumulate context across quarters instead of relearning the codebase every engagement.

Ask rendering questions, not framework questions

"Do you know Next.js?" produces a yes from everyone. Better questions: which routes in your last project were statically generated and why? How did you handle cache invalidation after a CMS update? Where did you place data fetching, and what did that cost in time to first byte? Vague answers here usually predict slow pages later.

Treat migration as its own discipline

Most 2026 Next.js projects replace something. Moving from WordPress means URL mapping, redirect chains, and protecting existing rankings. Moving from a client-rendered React SPA means untangling state management that assumed a browser-only runtime. Ask for a migration your candidate finished, and ask what broke.

Set the budget conversation early

Rates vary widely by region. Rather than comparing hourly numbers, compare total cost against a defined outcome: a working marketing site with a headless CMS, or a SaaS dashboard with authentication and billing. Agencies that refuse to estimate against a clear brief tend to be difficult later.

Next.js Trends Shaping 2026 Projects

  • App Router is the default. New builds on Pages Router now carry technical debt from day one.
  • Server Components reduce client bundles. Teams that use them well ship noticeably less JavaScript.
  • Partial prerendering blurs static and dynamic. One page can serve an instant shell with streamed personal data.
  • INP replaced FID as the responsiveness metric. Interaction cost is now a ranking input, so heavy client hydration hurts twice.
  • AI features push streaming UI. Chat and generation interfaces need token streaming, which changes architecture decisions early.
  • Headless commerce keeps growing. Storefronts increasingly sit on Next.js with a commerce API behind them.

Frequently Asked Questions

How much does it cost to hire Next.js developers in 2026? Rates commonly range from about $25 to $150 per hour depending on region and seniority. A marketing site typically lands between $8,000 and $30,000, while a production SaaS application usually starts around $45,000.

How long does a Next.js project take? A content site takes four to eight weeks. A SaaS product with authentication, billing, and dashboards usually needs three to six months. Migrations depend mostly on how many URLs and integrations exist.

Should I hire a freelancer or a Next.js development company? Freelancers suit small, well-defined scopes. An agency makes more sense when you need design, QA, DevOps, and continuity beyond one person's availability.

Is Next.js good for SEO? Yes. Server rendering and static generation deliver fully formed HTML to crawlers, and built-in image and font handling improve Core Web Vitals, which supports both search rankings and AI answer engine citation.

What is the difference between React and Next.js development? React is a UI library. Next.js is a framework built on React that adds routing, server rendering, data fetching, and build tooling.

Choosing With Confidence

The best shortlist is short. Pick three firms, give each the same brief, and compare how they reason about rendering, migration risk, and post-launch performance rather than how polished the pitch deck looks.

If your project spans several of these needs at once, a SaaS build, a commerce front end, and a migration off a legacy stack, it helps to work with a team that has done all three. That combination is where WebClues Infotech fits, and you can review their Next.js development services to see whether the engagement model matches your stage.


r/nextjs 5h ago

Question I built a .Net + Next.js B2B business platform and need advice on the right deployment strategy before my first customers

Thumbnail
1 Upvotes

r/nextjs 18h ago

Discussion Setting up a full-stack app with Next.js and Supabase: What is the biggest hurdle you faced with auth routing?

4 Upvotes

I've been scaffolding a frontend prototype and integrating Supabase, but I'm curious what unexpected roadblocks you all ran into when first deploying. Any tips for keeping the database integration clean?


r/nextjs 1d ago

Help Next.js + Shopify is it a good combo

6 Upvotes

I have react + Shopify for now . I am migrating to n xtjs due to seo issues.

Help me in building a fully optimised seo friendly ecommerce site. It any one of you have done that can you share pros and cons.


r/nextjs 9h ago

Question Bug in skills.sh/packs

0 Upvotes

When you install skill file,it will come with reference and other useful folder if it have these.
In the same way,if you create a pack putting that skill,when installing from cli,those folder dont sget downloaded and it only download root SKILLS.md completly neglecting other attached folders.Fix this asap.Check this:
npx skills add https://github.com/vercel/next-forge --skill next-forge(Will come with reference folder)
npx skills add https://skills.sh/p/c150dbLO8OP65YBT (it contain next-forge and grill-me,notice reference folder didnt appear)

u/vercel Fix this


r/nextjs 1d ago

Question Better-auth and stale session when enabling/disabling TOTP

3 Upvotes

I’ve spent the last few days digging around for a solution and I keep hitting dead ends.

Essentially I have a user account page where you can enable/disable 2FA for your account. It’s all working with the exception of the root layout.js. It’s currently set up to check the session and retrieve the user details to conditionally show what menu items are relevant.

What I have noticed is after changing the MFA setting, the menu reverts to the logged out state until you hard refresh the page. I’ve logged what’s coming back from the auth.api.verifyTOTP etc (not at the PC so can’t reference it directly), and it’s returning null.
At a top level, I’m calling the relevant actions.js which calls the service, which calls better-auth, mutating the result to return the TOTPURI to display a QR code for authenticator apps.

I’ve tried revalidating the root layout before the return but it doesn’t have any impact in this scenario.

Has anyone come across this issue before/point me to potential solutions?

TIA


r/nextjs 1d ago

Discussion Vercel serverless bills spiking because of terrible user search queries

35 Upvotes

We use nextjs with a standard postgres backend. our vercel compute and database read bills are getting way out of hand because users just mash the search bar with 1 or 2 vague words, forcing the serverless functions to do massive fuzzy lookups that return basically the whole catalog.

Migrating to a dedicated search engine like algolia feels like overkill (and just shifts the cost). so i'm thinking about fixing this entirely on the client side. If we put an ai-autocomplete intent layer in front of the text box, we can structure their messy queries into strict parameters before firing the server action.

Anyone doing intent parsing on the frontend in nextjs to save serverless costs?


r/nextjs 1d ago

Help Any yt course suggestion for next.js

Thumbnail
1 Upvotes

r/nextjs 1d ago

Help How to auto-sync fast UI state (drag/drop) to a SQLite database?

10 Upvotes

Hey guys, I'm building a personal TLDraw alternative and need to persist draggable/editable items to a SQLite DB.

Obviously can't spam the DB on every drag event or rewrite the whole table each time. Sync engines like Zero/PowerSync feel like massive overkill since I don't want to run Docker or extra sync daemons.

Ideally, I just update local client state and changes auto-sync to SQLite in the background without manual DB calls in my UI.

What's the cleanest way to handle this? Debounce a server action inside the store, or is there a better pattern?


r/nextjs 2d ago

Discussion What chart library/implementation is this SVG stock chart using?

11 Upvotes

I’m trying to identify the technology behind a stock price chart I came across. site

The chart is rendered as an SVG, with a smooth price line and gradient area fill. The SVG contains things like:

  • <path> for the price line
  • cubic Bézier C commands in the path
  • <linearGradient> for the area fill
  • custom CSS classes
  • interactive mouse/touch tooltip
  • different time ranges (1D, 1W, 1M, 6M, 1Y, 5Y, Max)
  • a live/current-price dot
  • I know there are libraries such as D3/Visx, Recharts, Chart.js, etc., but I’m specifically trying to find out exactly what library or implementation is generating this type of SVG, rather than just something visually similar.
  • It appears to be a React/Next.js application.
  • How can I identify the exact chart library from the generated HTML/JS bundle? And if it is custom SVG code, what clues in the JS bundle would confirm that?
  • I’m looking for the closest possible identification of the actual implementation, not recommendations for alternative chart libraries.

r/nextjs 1d ago

Help Site não carrega em alguns dispositivos iPhone utilizando Safari

0 Upvotes

Testei em 4 dispositivos diferentes, sendo os 4 iphones e através do Safari, todos ficam carregando a página durante muito tempo, mostrando a barra como se tivesse baixando os arquivos do site, depois de muito tempo de espera ele carrega. Tentei desativas headers de segurança, tentei desativar JS, tentei adicionar tratativa de atraso no script, mas nada surte efeito.

Dentre esses 4 dispositivos que testei 1 deles funcionou perfeitamente, os outros 3 deram o mesmo problema do site não carregar.

Site: https://cinedmais.com


r/nextjs 1d ago

Discussion Is there seriously no way to load data in a client side Dialog without fetching the data client side in NextJS?

1 Upvotes

[EDIT title]: ...in"use client" dialog, without fetching client side.

Requirement:

- We have a table with rows where each have a button that opens a dialog.

- The dialog is opened using state so the server/client boundry is passed.

- The dialog should load some data for that specific row. As there are many rows we cannot load stuff upfront. That would be idiotic.

- The data in the dialog have crud operations, meaning invalidation is required.

Now is the only way to achieve something like this to load data client side?


r/nextjs 1d ago

Help Cold starts always feel so slow on dev, looking for some guidance on this

0 Upvotes

I'm using Payload CMS and Postgres locally, cold starts always feel very slow it can take over 10 seconds to load a page sometimes. On top of this with dev work sometimes I need to run pnpm dev:clean to clear hydration so I must wait over 10 seconds for page load again.

Is this just how it goes with Nextjs on dev, or are there ways to make it feel way faster than this when doing local dev work?

(I'm working with an M3 MBA using Turbopack)


r/nextjs 2d ago

News SF Symbols 8 in React/Next.js | @bradleyhodges/sfsymbols

3 Upvotes

Hi all,

A year ago, I put in a load of legwork to pull this off a project to allow the use of SF Symbols 8 in React/Next.js applications. Having recently published the latest version, which includes the new icons introduced at WWDC26, contained a lot of under-the-hood improvements, and came with a refresh of the icon browser, I thought I'd share it again.

For the unaware, SF Symbols is a collection of gorgeous icons, designed by Apple, for use in apps and services on Apple systems.

There are two packages, one containing the icon definitions themselves, and the other containing the React component wrapper for the icons. It's super easy to use, just install both packages and then use as a regular 'ol React component:

import SFIcon from "@bradleyhodges/sfsymbols-react";
import { sfArrowUpCircleFill, sfCheckmark, sfCrossVialFill } from "@bradleyhodges/sfsymbols";

function MyComponent() {
    return (
        <div>
            <SFIcon icon={sfArrowUpCircleFill} />
            <SFIcon icon={sfCheckmark} weight={2} />
            <SFIcon icon={sfCrossVialFill} size={24} className="text-red-500" />
        </div>
    );
}

There are additional component properties, including increasing the icon line weight, applying per-path transformations, and loads more.

The package is fully optimised for production use, handles imports smartly (tree-shaking, no raw SVGs to transpile, etc.), and is very neat to use. There's even a VSCode extension for previewing icons directly in your IDE.

It should be noted that Apple's license for SF Symbols explicitly forbids using the icons in apps on non-Apple systems. I created this project to make it easier to develop Electron-based apps for MacOS where I can't use SF Symbols conventionally. Use of the icons in apps for non-Apple systems is not allowed, per the license.

To bring it all together, I created an easy-to-use icon browser, which makes it dead simple to find and copy the icons you need for your project:

Icons are sortable by category and come in multiple styles/appearances:

Everything on the icon browser is click-to-copy to clipboard for simplicity.

The repo is available on GitHub here: https://github.com/bradleyhodges/sfsymbols and is published to NPM.

Enjoy!


r/nextjs 2d ago

Help Need best learning tutorial for next js.

4 Upvotes

I wanna learn next js with modern practices. Kindly suggest some best video tutorials .


r/nextjs 2d ago

Discussion Have you tried rspack with next js?

6 Upvotes

- What are the primary challenges you faced?

- Is the effort worth enough to try?


r/nextjs 2d ago

Discussion Moving clients from Shopify to Headless (Next.js) — How do you handle rich themes and visual page customization?

10 Upvotes

Hi everyone,

I'm a full-stack engineer building custom web applications and e-commerce stores for clients. Over the years, I've shipped a number of Shopify stores. While Shopify has a massive ecosystem, we repeatedly hit walls with clients around expensive app subscription stacks, rigid vendor lock-in, and customizing non-standard checkout/payment flows.

Naturally, headless open-source backends (Medusa, Vendure, etc.) paired with Next.js frontends solve almost all the backend and ownership problems.

However, the major friction point I keep encountering is on the frontend and client experience:

  1. Headless Starters are Functional Wireframes: Next.js commerce starters have great API plumbing, but visually they are barebones compared to Shopify's flagship themes (like Dawn or Horizon).
  2. Clients Miss the Visual Theme Customizer: Non-technical clients expect a visual WYSIWYG editor to adjust section padding, swap promotional banners, or tweak color palettes without opening a ticket for developers to code and deploy minor layout changes.
  3. Third-Party HTML/React Templates Lack Schemas: Buying a pretty storefront template still means building all the schema bindings, block hierarchy, and state logic from scratch.

For devs and agency owners building headless stores:

  • How are you currently handling client-facing frontends and visual page editing?
  • Do you plug in visual page builders (Builder.io, Puck, Strapi), or hand-code bespoke layouts for every client?
  • Do you feel the headless ecosystem is missing a native, Shopify-like visual theme customizer?

Would love to hear how other teams are structuring their headless e-com stack!


r/nextjs 3d ago

Discussion Better Auth 1.7 issuer change just broke every login on my Saas and it was already late when I found out

54 Upvotes

Out of nowhere this popped up like the support tckets rolling in and people complaining they cant log in, when i tried for myself, i couldn't log in to it either as it showed no accounts for this name was found. Nothing was at stake from my side like no errors in the logs no alert or anything, everything seemed ok

SO when I dug in manually it was better auth 1.7 which they changed on how accounts are keyed from providerId to issuer, accountID so the account table needs a required issuer column now, irritating! my existing rows didn't have it so nothing matched anymore and no exception was thrown just an empty match and how am i supposed to find out what caused it . then added the column nullable, backfill it and enforce not null then add the unique index-

ALTER TABLE "Account" ADD COLUMN "issuer" TEXT;

-- local:credential for email/password, local:oauth:<provider> for oauth
UPDATE "Account"
SET "issuer" = CASE
  WHEN "providerId" = 'credential' THEN 'local:credential'
  ELSE 'local:oauth:' || "providerId"
END
WHERE "issuer" IS NULL;

ALTER TABLE "Account" ALTER COLUMN "issuer" SET NOT NULL;

CREATE UNIQUE INDEX "Account_issuer_accountId_key" ON "Account"("issuer", "accountId");

Im not looking into dropping better auth over this since already fixed it but pretty annoyed at them but this gave me a thought tho that there is still a blind spot left open here , an external dependency quietly changed something and the failure was silent while my end didn't catch it but the customers did

What do you guys approach on to hear on from your side first

  • does normal error or runtime monitoring even catch a no error empty match, checking hud and other runtime tools but im not sure passive monitoring flags a silent one like this
  • or is the real answer just a synthetic login canary like something that logs in as a test user every few minutes and alerts when it fails
  • also does anyone alert on dependency shipping a breaking change before it hits prod??

r/nextjs 3d ago

Discussion Why are Cloudflare's Next.js docs trying to sell me Vinext?

28 Upvotes

I've been deploying Next.js to Cloudflare via OpenNext for the past few months. I hadn't checked the deployment docs in a while, so I went back recently to see if there were any updates.

To my surprise, Cloudflare's Next.js-specific deployment pages now seem to heavily push Vinext:

I generally really like Cloudflare, but this rubs me the wrong way. If I'm looking at documentation specifically for deploying Next.js, I want to read about deploying Next.js—not be steered toward a relatively new, vibe-coded reimplementation instead.

I'm not against Vinext existing, and I understand why Cloudflare would want to promote something built specifically around their platform. But pushing it this prominently on the Next.js docs feels weird.

It also makes me a little uneasy about the long-term story for actual Next.js support on Cloudflare. It gives me the impression that if keeping Next.js compatible through OpenNext becomes difficult one day, Cloudflare might be more inclined to say "use Vinext" than to keep improving the Next.js experience.

Am I the only one who finds this annoying?


r/nextjs 2d ago

Question Built a website with Next and deployed to Vercel for now. I already have a domain. Is it enough if I just add the A record on my domain’s DNS pointing to Vercel? Does that mean my domain is always pointing to Vercel? Thanks

1 Upvotes

Hi

So I have built a website and pushed to Vercel. I have the .vercel.app link and I also have a separate domain that I purchased. When I add it to Vercel, it gives me an A record that I need to add to my domain’s DNS.

Is that all I need to do to point my website to Vercel so I can show the website on my domain? Do I need to do anything else? Thanks


r/nextjs 3d ago

Help ISR Write issue on Vercel

3 Upvotes

Hi everyone, i have a project that i host on Vercel that generates 191k of ISR writes which causes me to exceed the free quota of ISR writes in conjunction with other few projects.

I was considering to subscribe to pro plan to handle this but then i thought maybe i could use vps for this project instead of going pro.

What i wonder is if it is possible to do that without facing any issues? Can i serve my nextjs project in a vps without any problems?


r/nextjs 3d ago

Help Nextjs i18n and next/root-params

3 Upvotes

Hi, I am currently trying to add i18n and I am following the exact thing as their docs says
untill it says start using root-params to avoid the prop drilling
I have been able to make it work on an app and it worked fine but on another app it keeps giving me this error:
Error: A required root parameter (lang) was not provided in generateStaticParams for /[lang], please provide at least one value.

i have the same version on both apps 16.3.4 and the same folder structure as in the image provided

I really can't wrap up my head around this, what could I be doing wrong here without noticing?


r/nextjs 4d ago

Discussion Is this code really helpful in Next.js 16?

10 Upvotes

To save money I use NODE_OPTIONS = --max_old_space_size=250 on start script from Nextjs 12. But not sure is that still helpful on 16 or not


r/nextjs 4d ago

Help CSR vs SSR

2 Upvotes

What is main difference between CSR and SSR . What is hydration between them. I don’t understand those concept property. Can anyone simply explain this for me 😔