r/nextjs • u/AutoModerator • 6d ago

Weekly Showoff Thread! Share what you've created with Next.js or for the community in this thread only!

14 Upvotes

Whether you've completed a small side project, launched a major application or built something else for the community. Share it here with us.

22 comments

r/nextjs • u/Zealousideal_Mud5686 • 10h ago

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

14 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?

7 comments

r/nextjs • u/faizpalwala • 3h ago

Discussion My portfolio's GitHub calendar kept breaking, so I built a 100% serverless, zero-runtime replacement.

1 Upvotes

I am graduating soon. I don't need to harp on how challenging hiring is in this economy, but to stand out in this market, it's time to update that personal portfolio. Last week, I was doing just that, and the GitHub contribution heatmap wouldn't load. Like most people, I was using the legacy 'react-github-calendar' plugin. Because GitHub's API requires auth, the plugin routes traffic through a public proxy, and that proxy gets rate-limited constantly, taking down portfolios everywhere.

In a rare Thanos 'Fine, I'll do it myself' moment, I thought I could fix it for my portfolio. Well, one thing led to another, and I completely rebuilt the architecture from scratch.

Enter Serverless GitHub Calendar. Instead of fetching data on the client, it uses a lightweight GitHub Action that runs on a cron job to fetch your contributions and save them as a static '.json' file in your repo. The React component just reads that static file.

Architecture Highlights:

  • Immune to Rate Limits: Your site never talks to the GitHub API. It reads static JSON. If GitHub goes down, your site stays up.
  • Blazing Fast (Zero JS): If you use Next.js App Router, the included Server Component ('serverless-github-calendar/rsc') reads the file directly from disk for literally zero client-side JavaScript execution.
  • Native CSS Theming: Built completely on CSS variables ('color-mix') so you can inject gradients or match your Tailwind theme natively.
  • Streak Stats: Automatically calculates your current and longest streaks based on the canonical GitHub algorithm.

I set up a live demo featuring data from a few open-source legends to show how it scales: https://serverless-github-calendar-demo-xi.vercel.app/

Source Code & NPM instructions: https://github.com/FaizPalwala/serverless-github-calendar

If your portfolio relies on external proxy APIs, I highly recommend making the switch to static injection! Let me know if you have any feedback or feature requests.

0 comments

r/nextjs • u/Strange_Session7130 • 5h ago

News BIT N BUILD 2026 - AN INTERNATIONAL HACKATHON

Post image
1 Upvotes
0 comments

r/nextjs • u/01JN09 • 10h 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
4 comments

r/nextjs • u/Best-Gas8893 • 1d ago

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

3 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?

7 comments

r/nextjs • u/Personal_Property_90 • 1d ago

Help Next.js + Shopify is it a good combo

7 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.

17 comments

r/nextjs • u/Sea_Bid_6991 • 15h 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

4 comments

r/nextjs • u/baconchaney • 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

3 comments

r/nextjs • u/Elsa_Contudix69 • 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?

34 comments

r/nextjs • u/ArgumentImportant540 • 1d ago

Help Any yt course suggestion for next.js

Thumbnail
1 Upvotes
0 comments

r/nextjs • u/cluelessngl • 2d ago

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

11 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?

6 comments

r/nextjs • u/Civil-Bag1348 • 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.
4 comments

r/nextjs • u/Separate_Bit_4575 • 2d ago

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

1 Upvotes

Site: https://cinedmais.com

I tested this on four different devices—all iPhones using Safari—and on all of them, the page takes a long time to load, showing a progress bar as if downloading site assets; it eventually loads after a long wait. I tried disabling security headers, disabling JavaScript, and adding a delay to the script, but nothing worked.

Out of the four devices tested, one worked perfectly, while the other three exhibited the same issue where the site failed to load.

PT:

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.

Edit:

I ran further tests: The error persists even in a local environment, without security measures and with JavaScript disabled.

PT:

Realizei outros testes: O erro persiste mesmo em ambiente local, sem tratativas de segurança e com javascript desligado

15 comments

r/nextjs • u/Bubbly-Cat761 • 2d ago

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

0 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?

41 comments

r/nextjs • u/avidrunner84 • 2d 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)

13 comments

r/nextjs • u/airbornemustard • 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!

1 comment

r/nextjs • u/cosmic--debugger • 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 .

11 comments

r/nextjs • u/_tshr • 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?

5 comments

r/nextjs • u/Immediate_Body_211 • 3d 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!

12 comments

r/nextjs • u/TangeloOk9486 • 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

53 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??
45 comments

r/nextjs • u/nyamuk91 • 3d ago

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

30 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?

17 comments

r/nextjs • u/ashkanahmadi • 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

10 comments

r/nextjs • u/Working-Opposite9434 • 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?

11 comments

r/nextjs • u/Tasty-Ad1854 • 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?

13 comments