r/nextjs

▲ 5 r/nextjs

What's the best way to make projects? Should I make the backend and everything in Next.js, or create another repo for the backend and write it there?

I don’t have any plans to write a backend in another language. I’m still using js/ts, but I’ve seen a lot of people make separate repos for the backend and frontend with Next.js, so I’m confused. Should I make separate repos or do everything in one Next.js folder

reddit.com
u/infrunamilacy — 5 hours ago
▲ 40 r/nextjs+4 crossposts

pnpm 11 Might Finally Be a Better Default Than npm

pnpm 11 feels like the first Node.js package manager update in a while that actually improves supply chain security by default.

Features like:

  • minimumReleaseAge
  • blockExoticSubdeps
  • allowBuilds

directly reduce the risk of malicious package installs in CI/CD pipelines.

I wrote a short deep dive on why I think pnpm is now a better default than npm for production workloads.

Curious what others here are using in production today.

blog.prateekjain.dev
u/root0ps — 13 hours ago
▲ 0 r/nextjs

Next js . Seo friendly

Hi guys I am creating one e commerce website how can I make properly seo friendly using next js features. And I don't have any idea about how to make seo of the websites I know basics like use meta tag keywords like this. Please help with this

reddit.com
u/Ok_Score7635 — 15 hours ago
▲ 0 r/nextjs

PSA: your Next.js SPA might be invisible to ChatGPT even with perfect robots.txt

EDIT:  correctly points out that 'use client' doesn't disable SSR. The failure mode I described is actually about *client-side data fetching* (useEffect/useQuery/useSWR producing an SSR'd shell with no content), not the directive itself. The fix direction is the same, the explanation was sloppy. Original post below for context.

Quick PSA after debugging this for a project last week.


Your Next.js site can have a perfect robots.txt and still be invisible to ChatGPT, because AI crawlers don't run JavaScript.


If your top-level page component starts with `'use client'`, the crawler sees `<div id="__next"></div>` and stops. The bundle that contains your actual content is never executed.


The `'use client'` directive ends up at page level by accident, a dev adds it on a child component, promotes it to the page wrapper out of habit, then the whole tree is client-only. Templates and copy-pastes from tutorials propagate it. The Next.js docs say to put it at the deepest component that needs interactivity, but in practice most repos end up with it higher than needed.


Fix: keep `'use client'` at the leaf component that actually uses `useState` / `useEffect` / event handlers. Everything above stays as a server component.


How to test your own site in 5 seconds:


```bash
curl -A "Mozilla/5.0 (compatible; ChatGPT-User/1.0; +https://openai.com/bot)" \
  https://yoursite.com \
  | python3 -c "import sys,re;h=sys.stdin.read();h=re.sub(r'<script.*?</script>',' ',h,flags=re.DOTALL);print(len(re.sub(r'<[^>]+>','
  ',h).split()))"
```


If the word count is under 50, your page is invisible to AI bots.


Wrote up the full failure tree (this is one of three layers where blocks actually happen, the other two are at the edge and surprised me more): https://lintpage.com/blog/ai-crawler-accessibility-guide


Curious if anyone has noticed the symptom, low referral traffic from ChatGPT despite ranking on Google. Happy to debug specific cases in this thread.
reddit.com
u/Objective-Goal5551 — 16 hours ago
▲ 0 r/nextjs

How could self hosting your nextjs stack be a real alternative to BigTech? Is there a way forward?

Hey 👋
I asked this question 2.5 years ago, and have been discussing this offline and over other channels and SoMe for a while now. there have been mixed feelings.

The ones who are automatically sceptical: Some pushed back with arguments such as “BigTech has the power the technology the capacity the know how the best practices etc. BigTech is the most efficient way. AI hype forces their hand into big compute clusters”

The ones in favour: mixed stacks , hacks , early products and layers start to pop, a lot of open source and cool stacks are starting to populate git and other channels, a lot of startups are looking into this space . People are more concerned about surveillance and repression at global scale powered by BigTech and direct access to our data. Providers like Infomaniak which are the Swiss ethical cloud went into stewardship governance model to avoid ever private interests changing the policies around hosting and data privacy.

My 2 cents I’ve been since the start of this quest (about 3 years now) able to serve multiple domains with little machines like Raspberry Pis and MacMinis, while also have moved enterprise products hosted with Azure into tiny dedicated VPS in regional providers (Infomaniak, Hetzner) disconnecting them almost entirely from Big Tech at the code base, runtime and DB level. I have also been able to run LLMs locally and directly in the browser

And have been working on a distributed compute and sovereign open source layer of something like that which Vercel should be in terms of computing costs and transparency. Not going to throw the commercial here but worth noting that Vercel is tied to bigtech due to their business model and the huge debt many Silicon Valley startups carry towards their investors.

Where I haven’t been able to bypass BigTech entirely

> partially emailing (send grid and Gmail ) although i implemented recently a solution powered entirely with Infomaniak
> DNS (from Azure to Cloudflare)
> code base maintenance (GitHub)

What is your perspective today? Have you found a way out into self hosting which is powering your personal workflows or organisational workflows or even yours or third internet wide products?

🙌🏼 looking forward to reading the discussion

reddit.com
u/ndr3svt — 19 hours ago
▲ 4 r/nextjs

CMS Headless ?

Hello, pour ceux qui utilisent des CMS headless, vous utilisez quoi ?
Des solutions en cloud avec version gratuite ou alors vous hébergez sur votre VPS ?
C’est quoi le plus optimal pour que l’utilisateur lambda puisse écrire un article ?
Merci

reddit.com
u/RakoonDev — 1 day ago
▲ 10 r/nextjs

How do I learn NextJs, it all seems so damn overwhelming.

So I'm working as intern currently, the company mainly uses NextJS as it's dev stack. The company hired me because I knew basics of React (not an expert in anyway but I know core stuff like Components, props, hooks etc.) I also know HTML/CSS/JS and tailwind. But this is just stuff you learn while learning React itself.

Now I'm trying to learn NextJS but it's all so overwhelming. I tried watching YouTube tutorials, but they're either outdated or just filled with shamless random promotional stuff our company doesn't even use. And oh, I cannot afford to buy paid courses (yet) so that's out of the equation. It feels like everything is all over the place and I for the life of me cannot figure out where to start.

How exactly do I become good at this? Time is not really an issue as I already have the internship secured and this is gonna go for some months but I can't just sit there and do nothing I have to become good at this so I don't embarrass myself if I actually get the job. Can anyone please suggest some *free* resources to learn NextJS properly?

reddit.com
u/phpHater0 — 1 day ago
▲ 32 r/nextjs

Hardening Next.js Middleware: Implementing an early-abort edge filter to drop bot traffic with zero compute overhead

Hey everyone,

Wanted to share an architectural lesson learned from running an active launch phase on Vercel this week.

Our app is a modern full-stack Next.js/Supabase application. Over the last 24 hours, our logs caught a sustained automated botnet probe cycling through residential ISP blocks and cloud VPS infrastructure. The traffic footprint was predictable: spamming /wp-login.php, /wp-admin/index.php, and attempting to exfiltrate root .env files.

If you let this traffic route normally through your standard Next.js page routers, you end up wasting lambda execution cycles, muddying your analytics logs, and unnecessarily waking up your database connection pools.

  1. Moving Security to Proxy Entry To completely isolate our backend from this background noise, we implemented an early-return security filter right after pathname string extraction inside apps/web/proxy.ts, before any authentication logic or ledger routines evaluate:
const url = new URL(request.url);
const path = url.pathname.toLowerCase();

if (path.startsWith('/wp-') || path.includes('.env') || path.startsWith('/.env')) {
  return new Response('Forbidden', { status: 403 });
}

Because this executes at the earliest proxy entry threshold, the automated scripts eat an immediate 403 Forbidden response from the edge global network. Lambda invocation stays at zero.

  1. Satori / Edge OG Image Font Crashes While monitoring this, we also hit a production runtime error in our Open Graph dynamic generation endpoint (/api/og/verify/[id]): Error: Unsupported OpenType signature wOF2.

If you are using Satori for dynamic canvas generation, keep this in mind: Satori does not support Brotli-compressed WOFF2 font files. If you point your font loaders to modern .woff2 assets, the layout processor reads the compressed signature header and throws a hard exception.

We resolved this by swapping our asset destinations to standard uncompressed WOFF1 (.woff) binaries and hardening the asset loader with four defensive validation rules:

Memory Capping: Implemented a strict 32-entry cache limit (FONT_CACHE_MAX) with a 1-hour TTL window to prevent container heap exhaustion.

Timeouts: Wrapped our fetch requests in an AbortController capped at 5 seconds with exponential backoff retries to prevent hung CDN calls from freezing the lambda.

Mime Validation: Explicitly validating the content-type header to prevent edge cases where a CDN 404 HTML page gets parsed as a font stream.

Graceful Degradation: Moved from Promise.all to Promise.allSettled. If a specific style variant experiences network latency, the asset engine drops to system fallbacks and finishes rendering the canvas instead of breaking the page.

Our stack is now running in a stable, permanent green posture. If anyone is running into similar Satori layout limits or edge proxy bottlenecks on Vercel, ask away below—happy to drop our exact middleware configurations.

You can view our live rendering engine and verification setups here: vauntico.com

u/Tygertbone — 1 day ago
▲ 2 r/nextjs+1 crossposts

Cautionary Tale: I got a $1,477 Vercel bill from bots scraping an unreleased project. Always set Spend Limits. Actually I did :-((((

Just sharing a warning for anyone deploying to Vercel: make sure you set up Spend Management caps, even on projects that aren't public yet.

I've been a Vercel customer for years with about 20 production apps. Last week, I got a $1,477 invoice for a pre-launch, unreleased app. An automated crawler fleet sat there downloading heavy media files for days.

Vercel's policy says that bot/abuse traffic mitigated by their firewall is free. However, because these bots identified as "legitimate" search/AI crawlers, they didn't trigger the DDoS protection.

The wildest part: Vercel's own automated support bot reviewed my account, confirmed that 96.4% of the traffic came from a single edge region (cle1), and told me: "this is exactly the type of situation that warrants review by our support team." But the bot is hardcoded to not issue bandwidth refunds.

I've submitted a ticket and tweeted at the CEO, but I'm currently waiting in limbo.

TL;DR:

  1. Set Vercel Spend Management caps to $100 immediately.
  2. Put Cloudflare in front of Vercel to block bots before they hit Vercel's CDN.
  3. Don't assume Vercel's firewall will auto-mitigate polite but aggressive scrapers.
reddit.com
u/webhaus_io — 2 days ago
▲ 6 r/nextjs

Reading about SSG , SSR and ISR and getting confused which one to use and how to use in my project...

I am making a website and from wordpress I fetch data using Wordpress RestAPI , rendering it in UI so I come across with SSG and ISR but unable to understand how I can implement it...

Any developer who has work feel free to share his/her idea...😁😁💚

reddit.com
u/Altruistic-Pin-7986 — 2 days ago
▲ 3 r/nextjs

updateTag before revalidateTag. That was it. 3 hours debugging a Next.js 16 bug with no error and no warning

One of the most confusing bugs I hit in Next.js 16 had nothing to do with fetching or caching logic. It was just the order of two functions.

I had a Server Action updating a product price. The mutation worked, revalidation was happening, everything looked correct.

But the user who clicked save kept seeing the old price.

Everyone else saw the update. Just not them.

The fix ended up being:

updateTag before revalidateTag.

That was it.

Nothing in the errors, nothing in the docs, nothing in the runtime makes this obvious. It just quietly behaves wrong.

I’ve run into a few of these now where everything compiles, deploys fine, and then breaks in subtle ways in production.

I wrote down 7 of the most common ones I’ve hit along with fixes:
(link in comments)

Curious what’s been the most confusing or unexpected part of the new caching model for others?

reddit.com
u/shubhradev — 1 day ago
▲ 1 r/nextjs

I built a Claude Code plugin so I could SEE the options when it asks me to pick between three designs

I do a lot of design work with Claude Code landing pages, dashboards, the usual. Every few prompts it asks me to choose between three or four directions, and the choices come through as terminal text:

Which hero layout should I build?

  1. Hero variant A
  2. Hero variant B
  3. Hero variant C
  4. Type something.

"Hero variant B" tells me nothing. Claude knows what it means; I'm guessing. After enough wrong guesses I got annoyed enough to fix it.

What it does

You type `/visual` into the "Type something." box. A page opens in your browser with each option rendered as a real card — built using **your project's** colors, typography, and corner radii (it scans your Tailwind config). You click one. The terminal continues as if you'd picked it the boring way.

reddit.com
u/Ok-Run-659 — 1 day ago
▲ 5 r/nextjs+1 crossposts

Build Full Stack AI Agents

​

Hello,

A few months ago I posted here about a lightweight durable full stack ai orchestration framework I was working on. It resonated well and I got some excellent(brutal) feedback from early testers. After many iterations, today I am coming back with the first public release.

For those who don't remember that post. A little bit of background.

I've been building agentic applications for around 2 years now. Started with loops, then moved onto langgraph + Assistant UI. I've been using the lang ecosystem since their launch and have seen their evolution.

It's great and easy to build agents, but things got really frustrating once I needed more fine grained control, especially has a hard time building interesting user experiences. I loved the idea of building agents as graphss, but I really wanted to model UIs in my flow as nodes too. It felt like I was fighting abstractions all the time, too much to learn.

Deployment was another nightmare. I am kinda cheap and the per node executed tax seemed ... Well, not great. But hey, the devs gotta eat.

Around 10 months back, I snapped and started working on an idea I had. It's called cascaide.

Cascaide is a fullstack agent runtime and AI orchestration framework in typescript designed to run anywhere JS/TS can. It was originally built for web applications but works equally well for headless/CLI AI agents and workflows in javascript runtimes.

What it really is is a distributed, observable, durable graph executor. The first split just happens to be client/server, hence full stack.

Here are the reasons to try it.

🧩 UI as nodes in your agent graph — Not glue code, not a separate library. UI and human-in-the-loop are core primitives.

💾 Resume workflows after crashes, weeks later, or never — Every step checkpointed to your own Postgres. No new infra, no third-party service holding your state.

🔍 Observability — Rewind any agent run, fork state, inspect every transition. No more printf console.log hell. Everything you need to see with redux Devtools.

💸 Zero orchestration cost — You pay for compute only. No per-node tax, no hosted runtime fee.

🪶 23kb gzipped core — Small enough to actually read the source. Not another black box. 46kb including all helpers, durable database, frontend and agent builder helpers. Like you can seriously read and reason through the code.

🌍 Deploy like any other app — Next.js, Express, Hono, Fastify currently supported adapters (Let me know where else to expand native adapters to!) No special agent hosting or vendor lock-in.

🏗️ Your data, your compliance — All traces on your own DB. HIPAA/SOC2 foundation without sending data to a third party.

🛠️ **Developer Experience**

It's hard to trust such claims right now, and I might be biased as the creator. But the API surface is genuinely small:

* 🪝 Two hooks on the client to control and observe graph execution

* ⚙️ `prep/exec/post` lifecycle for nodes — two main types for state updates and spawning new nodes

* 🎮 Controller primitive for concurrency — control and observe graph execution from within a server-side node

* 📐 Graph definitions

All typed. And this is mostly it. You can do a lot with plain programmatic control.

All typed. And this is mostly it. You can do a lot with plain programmatic control.

🗺️ **What's Next**

🔌 **Expanding native adapters** — currently native adapters exist for:

* ⚛️ React

* 🐘 Postgres-js (durable database)

* 🖥️ Servers: Next.js, Fastify, Hono, Express

Let me know what adapters to build out next! It's designed to be modular — quickly expandable to more targets, and you can swap packages out to migrate.

🌐 **Expanding graph distribution** — right now only client/server split is supported. But the abstractions allow for more environments. Currently working on:

* 🔲 Edge

* 🖧 Multiple servers

* 👷 Web workers

Do let me know what adapters to build out next. It's designed to be modular. Can quickly expand to more targets, and you can just swap packages out to migrate.

The web worker angle is pretty interesting. We are building something so that you can give your agent a filesystem and bash by running nodes inside the browser sandbox. Would be a huge value add with zero cost. This allows for even fully local BYOK like AI apps running on the browser.

Try it out now:

npx create-cascaide-app@latest

Ships out of the box with **3 agents** 🤖:

* 🔎 **ReAct Agent** with search capabilities

* 🏨 **Hotel Booking Agent** (Supervisor) with two sub-agents and two HITL steps

* 🔁 **Recursive ReAct Agent** with search capabilities that can recursively invoke itself to handle complex tasks — each recursion depth trackable via mini chat windows

CLI currently scaffolds apps in:

* ▲ Next.js

* ⚡ React + Hono

* 🚀 React + Fastify

* 🟢 React + Express

Website and documentation:

https://www.cascaide-ts.com

GitHub repo:

https://github.com/Airavat-Research/cascaide-ts

⭐ **Please star on GitHub if you like it!**

u/Worried_Market4466 — 1 day ago
▲ 17 r/nextjs

Anyone experience hosting a next js project directly on a vps , to bypass Vercel? Which blob storage would you recommend which is not aws?

The title says it everything
I’m migrating the hosting of a project built with next js from Vercel into a vps and looking for a way to replace the blob storage

Options could be to even use the same VPS as the storage as the project is regional enough cloud blob storage is an overkill imo

Any serious engineering recommendations?

reddit.com
u/ndr3svt — 2 days ago
▲ 5 r/nextjs+1 crossposts

Switching github repos (from individual to org account)

I had a live application attached to a personal GitHub account. That repo has now moved into an organisation GitHub account.

I need to swap the repo connection but getting conflicting advice about the env variables... Help docs say:

  • "Environment variables will stay intact on your Vercel project"

However when I go to reconnect the repo the warning says:

  • "Any data tied to your Git project (like branch-specific Environment Variables) may become misconfigured."

The repo is the same, just moved with the same branches etc not a whole new repo.

Am I about to nuke my site variables? If so, how can I save/export them?

Any advice appreciated...

reddit.com
u/sweetjesus66 — 1 day ago
▲ 1 r/nextjs

Help with images

I’m building a portfolio website with NextJS + Payload CMS for a client who works heavily with photography/visual projects.
The issue is that all uploaded images are huge:
4096x4096

JPEG

~8–9MB each

Each project has around 10 images, and there are already 44 projects, so we’re talking about ~440 very large images.
From a web performance perspective, serving originals obviously makes no sense, so I started optimizing them (WebP/AVIF, responsive sizes, compression, etc.).
The problem:
The client keeps saying the optimized versions “lose quality” and wants the site to preserve the “original quality”.
Technically I understand that:
browsers rarely need full 4096px images

modern formats can massively reduce size with almost no visible loss

Next/Image + responsive sizes is the right approach

But I’m trying to find the best balance between:
visual fidelity

performance

client expectations

For people building photography-heavy sites:
what workflow do you use?

do you always keep originals and serve transformed versions?

what quality settings are your sweet spot?

are you using Cloudinary / Imgix / Cloudflare Images?

how do you explain this to clients that pixel-peep everything?

Would love to hear real-world setups and how you handle this conversation professionally.

reddit.com
u/RicardoFreitas1965 — 1 day ago
▲ 0 r/nextjs

How do you handle bot traffic and click fraud?

Hey,
I'm currently researching how others handle click-fraud and traffic spikes caused by bots.
It feels like malicious, bot, and AI-driven requests are exploding right now.

Solutions I'm exploring:

  • Google reCAPTCHA v3
  • Cloudflare Turnstile
  • WAF rules

But there doesn't seem to be an easy answer. We're hosting our Next.js project on Vercel and are thinking about moving to Cloudflare or a VPS.

How are you handling this? Curious what's actually working in production.

reddit.com
u/_Mexh — 3 days ago
▲ 14 r/nextjs+1 crossposts

Payload as a full backoffice / API framework replacement? Is it even possible?

Sorry for the low-key clickbait title. But genuinely curious what others have done.

I'm wondering if there is anyone who is using Payload as a full replacement of something like Laravel or NestJS.

I'm going to start on a new project which will entail a marketplace with users logging in and I'm wondering if I can just fully build it with Payload and Next (or Nuxt) only.

Big fan of minimalism so would be awesome to be able to cut one whole framework from my stack 😃

reddit.com
u/MrDigitalDirtbag — 2 days ago