r/nextjs • • Nov 05 '25

Discussion My Last Two Years with Clerk and NextAuth Feels Like a Waste (Here’s How I Built My Own Auth)

3 Upvotes

For something as simple as increasing the session cookie expiry beyond 5 minutes, Clerk requires a $25/month subscription.
NextAuth, on the other hand, has been sold to better-auth. And it recommends me to go through better-auth's documentation and read again.

So I decided to just implement Sign in with Google myself — and it turned out to be surprisingly simple.
This also works perfectly with Chrome Extensions (because we rely on an HTTP-only session cookie with a custom expiry—say 30 minutes—and any API call from the extension simply fails if the session is invalid).

The amount of code needed to roll your own = about the same amount of code as Clerk’s “Getting Started” tutorial.

Tech Stack

  • google-auth-library (server-side token verification)

  • react-oauth/google (Google login button – I could even write this, but decided to go with this simple solution)

  • nextjs

  • drizzleorm + neondatabase

  • shadcn components

I also tried it with express api. the code is given below. I tested it. It works.

1/

Authentication Flow (High-Level)

  1. User is redirected to Google OAuth.

  2. After approving, Google returns an ID Token (JWT) containing user details (email, name, etc.).

  3. On the server, verify the ID Token using google-auth-library.

  4. Store (or update) the user record in the database.

  5. Create a HTTP-only session cookie with a chosen expiry (e.g., 30 days).

  6. On every request, the browser automatically includes this cookie.

  7. The server:

    • Verifies the session cookie

    • If valid → proceed with the request

    • If not → return 401 Unauthorized

I am callingupdateSession() on each request to extend the session expiry, meaning:

  • If the user is inactive for 30 days → logged out.

  • If they continue using the site → session stays alive.

2/

Here is the main file:

  • login() verifies Google token + stores user.

  • logout() clears the session cookie.

  • getSession() validates the cookie for protected APIs.

  • updateSession() refreshes the expiry (put this in middleware.ts).

  • UserProvider exposes a useUser() hook to get user data in client components.

  • AuthButton shows the user profile + Sign In / Sign Out buttons.

  • I put the function updateSession() in middleware. This function extend the session cookie expirary time by the next 30 days. Basically, when the user doesnt access my app for more than 30 days, he is logged out. And if he access it within the 30 days, his login status will remain intact.

auth.ts:

3/

Here is how I use updateSession() in the middleware.

middleware.ts

3/

user provider which allows me to use the useUser() hook in any client component to get the user data.

providers/user-User.tsx

5/ The Auth Button uses useUser() to display the user's profile image and username.

  • Provides Sign In and Sign Out buttons

  • Displays a clean, compact user profile button.

  • It draws Sign In button, when the user is not found in useUser(), user Profile button, when the user is logged in.

components/AuthButton.tsx

6/

Now, whenever the user makes a request (whether from the Next.js frontend or the Chrome extension), the browser automatically includes the session cookie. Your server verifies this cookie and extracts the user information.

/api/user/route.ts

7/

Quick request — check out the new Chrome extension I’m building. highlightmind.com It lets you highlight important content anywhere (Reddit, ChatGPT, Gemini, etc.) and access all your highlights later from a unified dashboard across your devices. Later, I am planning to add AI Chat and Content Creation in the dashboard

Here is the Express API I mentioned earlier.

In I AuthButton.tsx, instead of calling the login() function I referred to before, you’ll call the endpoint at APIDOMAIN/auth/login and send the Google OAuth response to it.

server.ts:

routes/auth.ts


r/nextjs • • Jun 24 '24

Discussion Amazing UI blocks and modern designs

0 Upvotes

Reddit fam , you should have to check out farmui.com it is build on top of shadcn and tailwind. it had a lot of styled and animated as well modern components and also a template for you to get started along with CLI to install the component with out any hassle of copy and paste.

Declaimer the project is just bootstrapped a more than a couple of weeks ago and there will be a lot rewrite or refactor to kind of move on the direction from opensource community discussions. Even we have not decided how to display some ui on different screen sizes. It is just beta release.


r/nextjs • • Jan 16 '24

Wondering whether companies are transitioning to next.js?

0 Upvotes

If you're wondering whether companies are transitioning to next.js and whether you should start learning It? The answer to both of these questions is a Strong YES! Node.js recently tweeted that they have migrated the node.js website to Next.js for the long-term indicating that there is a shift towards using Next.js among companies.

That's not all many huge companies such as Netflix, Tiktok, Twitch Hulu notion Target and even Nike have adopted Next.js to develop their websites. The momentum of Next.js is remarkable. In upcoming months you can expect to witness an increase in Next.js job opportunities like never before.


r/nextjs • • Sep 03 '24

Discussion NextJs course by Jack Herrington 🎉

0 Upvotes

Hi guys 👋

I got the mail today that Jack Herrington's https://www.pronextjs.dev/ course is now live. I was waiting for this for the past 6-8 months. 😅

I am genuinely excited about it, since I love the way Jack teaches React concepts in his YouTube. He explains it in so much detail and explains what happens behind the scenes and I love that a lot.

I know one can learn Next from going through the docs, but I like going through online videos to learn something, especially when they're taught by such good teachers. Also, I believe there would be projects in the course.

Just wanted to know what are your opinion on the course? Are you thinking of buying it?

Or if you already bought it, did you start going through the videos? How is it?

Do you have any other NextJs course which you think might be much better than this one?

PS: I am not Jack and this is not a sponsored post. 😅 Although it's weird that he didn't post on YouTube that his course is live 🤷

Edit: I found this in the comment - https://nextradar.dev/ is a pretty good resource for finding NextJs courses (under the learn section), getting a list of OSS projects using Next, and a dedicated Jobs section as well.


r/nextjs • • Jul 07 '26

Discussion Half my traffic was bots executing JS. Here's the 4-day defense stack I built

0 Upvotes

I run a side project that scores and roasts GitHub profiles (Next.js on Vercel, Turso + Upstash Redis as the data layer). In early July, things started looking *too* good: traffic charts climbing, a sudden "SEO explosion" in the referrer dashboard, big spikes in function invocations.

Digging in, the real picture was this:

- **~50% of all traffic came from large-scale scrapers** on rotating datacenter proxies (Oxylabs, Datacamp, M247, and friends). These aren't dumb curl loops — they run headless browsers, **execute JavaScript**, and fire my analytics events. Vercel Analytics, Speed Insights, and GA4 were all polluted.

- A burst of requests from Alibaba Cloud IPs **exhausted my database connection pool** and took the API down with 500s.

- The scrapers started **faking `referrer=www.google.com`** — from 57/day to 15,000/day overnight — making the SEO dashboard read like a rocket launch. Actual Google clicks from residential ISPs: about **280/day**.

- My heaviest pages (crawlable leaderboards) were `force-dynamic`, so every one of ~16k daily crawler hits was a full function invocation and a cache MISS. I was paying compute for every bot.

The naive response is "block all bots." But for this product that's wrong: AI assistants and crawlers that *identify themselves* (ChatGPT, Claude, Perplexity, search engines) are a distribution channel — I *want* to be citable in AI answers, and agents are literally a customer segment for the API. The goal isn't zero bots. It's:

  1. Stop paying (in compute, database connections, and money) for anonymous scraper traffic.

  2. Stop letting it pollute the numbers I make decisions with.

  3. Keep — and even monetize — the bots that identify themselves.

Everything below follows one principle:

> **Classify traffic by the cost the sender pays, not by what it claims to be.**

>

> User-Agents are free to fake. Referrers are free to fake. Executing JS is cheap. But residential IP space, verified bot signatures, and cryptographic attestation are not. Trust signals that cost something; ignore signals that don't.

## Layer 1: robots.txt — block training, keep retrieval (Day 1)


First, policy. Not all AI crawlers are equal, and lumping them together throws away real value:


- 
**Allowed:**
 search/answer/user-triggered crawlers — `OAI-SearchBot`, `ChatGPT-User`, `Claude-User`, `Claude-SearchBot`, `PerplexityBot`, `Applebot`. These send users to me. When someone asks an AI "is this GitHub account legit?", I want to be the citation.
- 
**Blocked:**
 training crawlers — `GPTBot`, `ClaudeBot`, `CCBot`, `Google-Extended`, `Applebot-Extended`, `meta-externalagent`, `Amazonbot`, `Bytespider`. They consume the corpus and send nothing back.
- Plus `Content-Signal: ai-train=no` for crawlers that honor it.


Is robots.txt enforceable? No. But well-funded crawlers 
*do*
 respect it, and it establishes a clean policy baseline: 
*retrieval yes, training no*
. The ones that ignore robots.txt entirely get handled by the layers below.


## Layer 2: API hardening — the parts that fell over under load (Day 2)


The Alibaba Cloud burst exposed three real bugs in my main scan endpoint. All three are generic enough that you probably have at least one of them:


**1. Rate-limit 
*before*
 the cache lookup, not after.**
My per-IP rate limiter ran after the cache check, on the theory that cached responses are cheap. But "cheap" wasn't free — cached hits still wrote analytics rows to the database. Bots hammering the same popular usernames bypassed the limiter entirely while holding database connections. The limiter now runs first, and even cached responses carry standard `RateLimit-*` headers.


**2. Put a Redis `SET NX` shield in front of hot database writes.**
Recording "who looked up which account" used a database transaction as its dedup gate. Under a burst, thousands of identical (username, IP) pairs each opened a connection just to discover they were duplicates. Now a Redis `SET NX` with a 24h TTL sits in front: repeats cost one Redis round-trip instead of a database connection. The database constraint stays as the source of truth; Redis is just the cheap bouncer at the door.


**3. Validate body types like an adversary wrote them.**
`{"username": 12345}` — a number, not a string — hit `.trim()` and crashed with an uncaught TypeError → 500. Bots fuzz your API whether you invited them or not. Unknown input shapes now return a clean 400.


## Layer 3: ISR — make the hits you can't block cost nothing (Day 3)


My leaderboard/facet pages were the single heaviest crawler target: 
**~16k function invocations per day, every one a cache MISS**
, because the route was `force-dynamic`.


The fix was converting them to ISR (`revalidate: 600`) — but two details were non-obvious and worth sharing:


- The pages had a `?u=<username>` query param that pinned a user's card to the top. Query-string reads make a route dynamic, so I moved that logic 
**client-side**
 (a small component under `Suspense` reading `useSearchParams`). The canonical URLs crawlers hit are now fully static; the personalized pin renders in the browser. Same UX, zero server cost per crawl.
- 
**Upstash's Redis client defaults to `cache: no-store` on its fetch calls**
, and in Next 15 an uncached fetch inside an ISR page silently flips the whole route from static back to dynamic at runtime (it 500s under `next start`). Passing `cache: "default"` to the client fixes it — Upstash REST calls are POSTs which Next never data-caches anyway, so there's no staleness risk. This one took a while to find; if you use Upstash inside ISR pages, check it.


Result: crawler hits on those boards now cost roughly nothing — they hit the static cache instead of invoking a function that queried Redis 50 times.


And since agents keep crawling these boards anyway, the pages now end with a pitch: 
*"vetting accounts in bulk? There's an API — here are the docs."*
 If a bot is going to read my HTML 16,000 times a day, it might as well read the sales copy.


## Layer 4: the invisible gate — humans and honest bots pass, impersonators get a 403 with directions (Day 3)


This is the interesting one. These scrapers execute JS, so classic client-side detection was already beaten, and I refused to put a CAPTCHA in front of the core product experience.


The expensive endpoint (LLM-backed, costs me actual API credits per call) now gates its free path with 
**Vercel BotID**
 — an invisible, no-interaction check that classifies clients at the edge. The decision table:


| Client | Result |
|---|---|
| Human in a real browser | ✅ pass, no friction |
| API caller with a Bearer key | ✅ pass (they're paying) |
| Caller with their own LLM key (BYO) | ✅ pass (costs me nothing) |
| Verified bots — googlebot, ChatGPT-User, Claude, etc. | ✅ pass |
| Unverified headless browser impersonating a human | ❌ 403 |


And the 403 body isn't a wall — it's a 
**signpost**
: "this endpoint requires verification; documented API and MCP endpoints are here." If someone built an agent that's scraping me anonymously, the failure message itself tells them the legitimate (and rate-limited, and monetizable) way in. Some fraction of hostile traffic converts to API users.


The auth logic got extracted into a shared module, so the scan endpoint (which uses a Turnstile flow for browsers) and the roast endpoint enforce identical machine-auth rules.


**Cleaning the analytics, same day:**
 Vercel Analytics and Speed Insights get a `beforeSend` that drops events when `navigator.webdriver` is set; GA4 config is skipped under the same condition. Is `navigator.webdriver` spoofable? Absolutely. But these scrapers apparently don't bother, and my dashboards went from "fiction" to "usable."


## Layer 5: trust no referrer — verify traffic sources against ASN (Day 4)


Once the bot check went up, the fake-Google-referrer trick became the remaining data problem: 15k/day of `referrer=www.google.com` from datacenter IP ranges would convince anyone their SEO had exploded.


Since the dashboards can't be trusted, I wrote a small ops script over Vercel's observability metrics API that splits traffic into three layers:


- 
**Scraper layer**
 — anonymous requests from a curated blocklist of proxy-provider ASNs (Oxylabs, Datacamp, M247, …). Background noise; ignore in all decisions.
- 
**Agent layer**
 — self-declared crawlers/AI assistants by bot signature. Good traffic; this is the monetization funnel.
- 
**Human layer**
 — what remains, anchored by 
*action*
 endpoints (scan/roast/search API calls) rather than pageviews, because actions are much harder to fake at scale than pageviews.


The script also cross-checks every google-referred request against the proxy ASN list: `proxy ASN + google referrer = fake`. Ironically, 
**the spoofing backfired**
 — faking Google referrers from datacenter IPs is a self-signed confession, and the fake traffic exposed 8 new proxy providers I hadn't blocklisted yet.


One nuance for anyone building an ASN blocklist: 
**VPN egress ranges have real users behind them.**
 I deliberately excluded the VPN/proxy providers my actual users route through (in my case, providers popular with Chinese users behind the GFW). Blanket-blocking "datacenter ASN = bot" would have cut off a chunk of my real audience. Curate the list; don't import someone else's.

r/nextjs • • Mar 06 '24

Question Server actions is this actually a useful implementation?

Post image
6 Upvotes

r/nextjs • • Sep 30 '25

Discussion Zionist mod deleting all our posts

Post image
293 Upvotes

r/nextjs • • Aug 26 '25

Discussion Refactoring a Next.js & Tailwind app with Cursor

Thumbnail
youtube.com
15 Upvotes

r/nextjs • • Sep 15 '24

Discussion I tried shadcn/ui and I did not lik it

4 Upvotes

I honestly don’t fully understand the hype around this. Do most people who use it have 10+ years of experience designing UI libraries? It’s surprising to me that this is such a popular non-component library.

Let’s say I decide to use it. I start off fine, adding more Tailwind and customizing things as I go, but then the day comes when I need to build a component that Mr. Shadcn hasn’t already built, like autocomplete. (Yes, I know there’s an example on the website, but to be honest, it’s not exactly what I’m looking for.) So, instead of building it from scratch, I’ll search online, hoping someone has already built it so I can just copy-paste.

Alright, now I’ve got an autocomplete. But then I realize I need to add something like a clear button at the end of the input. Once again, I either have to build it myself or modify someone else’s code. And, if I’m being honest, I’ll probably mess it up. I’m 100% sure I can’t build a component that would meet the standards of Mr. Shadcn or a UI designer with 10+ years of experience. It ends up being really time-consuming.

I get that this might be a skill issue on my end, but when I’m building something, I don’t want to spend 90% of my time creating a UI component that might not even be that great. I can see how this setup would be fantastic for a company with a dedicated team focused on UI libraries. But for a solo dev like me, you’re either a super-talented frontend person or maybe spending more time than you realize on building your own library.

But prove me wrong. Share your story, I’d love to hear your perspective!


r/nextjs • • Feb 09 '25

Discussion Next.js Creator on AI and the Future of Coding, and Why He Doesn't Consider Himself a Coder Anymore

Thumbnail
youtu.be
0 Upvotes

r/nextjs • • Feb 27 '25

Discussion Love Axios, but it doesn't work well with Next, so I made nexios

0 Upvotes

Maybe I've got too much time on my hands, but I just don't care for the native fetch API, especially when compared to libraries like Axios. So, I created nexios, a fetch wrapper that behaves like Axios, designed to integrate with Nextjs--particularly server-side operations.

So far it's been great! I'm still working on some low-level features and a few bugfixes here and there, but the big stuff is implemented and largely operational.

Would anyone else find nexios useful, or are my efforts in vain?


r/nextjs • • Jul 14 '24

Help Frontend HELP!

Post image
1 Upvotes

Any frontend expert know how I can get these divider lines in Tailwind or CSS. I have the entire container as a grid right now.


r/nextjs • • Jan 08 '24

Moving away from server components

0 Upvotes

We’ve been using prisma and server components in prod for a while and the cold boots and queries were brutal

Some requests took 3-4s (vs 6-25ms locally on similar data sizes)

Switched to cloud run and we’re seeing nearly 5-8x speed reduction on more data heavy requests

Still great for small amounts of data

Edit:

To clarify

  • we still use server component everywhere

  • literally the only thing we did is move the prisma query from next server component to a gcp cloud run instance. Same query same data, and it was 3x faster

  • data is still fetched on the server component

Prisma has huge cold boot issues even with decent traffic.

The issue isn’t RSC but rather Prisma cold boots. This was solved by moving to a cloud run instance for heavier queries


r/nextjs • • Feb 27 '25

Discussion Why is running v0.dev projects locally so hard?

1 Upvotes

"I'm 3 hours in, trying to get the dev server running with npm run dev, and every time I struggle to run it locally. It almost feels like they do this on purpose. I downloaded the zip file of my project, ran npm install, and then npm run dev, and that's when the hell begins. Is anyone else experiencing this? I also tried this:


r/nextjs • • Oct 16 '24

Discussion Does vercel not plan to lower costs?

0 Upvotes

I like the platform, I like the product, I want to support it.

However it's sometimes too expensive. And since I bootstrap quite often, it piles up sometimes.

Does vercel not plan on lowering costs to keep the user base?


r/nextjs • • Feb 04 '25

Help Noob Should I learn Golang or stick with nodejs ? End goal is to become a great irreplaceable developer.

0 Upvotes

I have spent 2 months learning and building nodejs backend and around an year in frontend. Now I want to dive deeper into backend. So should I migrate to Golang or stick with nodejs. The end goal is to become a great irreplaceable developer.


r/nextjs • • Jun 06 '24

Discussion Nextjs is very slow in dev mode !!!!

0 Upvotes

I am working with nextjs 13.5 and it's so fucking slow , pages takes many seconds to load which drive me crazy , I have worked with Angular before and I didn't see this shit before .

Is this normal or I have done something wrong in my code ?

Any solution to this, I don't want to use Turbo because it give me imports errors of my sass ?


r/nextjs • • May 17 '23

Appeal to our advanced Next JS 13.4... developers

3 Upvotes

Appeal to our advanced Next JS 13.4... developers

Creating full-stack web applications using NextJS 13 would be a good tutorial. Not all of us want to create blogs.

Can we comprehensively address this new layout file? How should "children" be wrapped in a dashboard with a responsive side bar as well as a top or header bar? It seems this has been assumed to be known. Well, it's not. The next JS team should provide adequate information on how to create responsive admin layouts within the app directory and layout file.

Why not teach developers how to create production-ready applications? How can we create closed multi-tenant (with data segregation, routing, authentication, and authorization) or SAAS applications? These applications should not be public and therefore not have public registration.

Every application needs an admin panel, a control panel, or some sort of administration portal. Because of the lack of comprehensive tutorials, are we expected to jump into our IDE or DB to create new posts or perform CRUD operations? Why are we creating tutorials for applications but not creating the tutorial to create the admin portal?

Most tutorials are blogs. While blogs are a good place to begin, please note that intermediate developers feel left out. We want to create relations in our database tables (most tutorials just have an application with one table). We want secure production authorization (maybe military-grade authorization). Most tutorials teach beginner authentication. They assume we are not building anything serious (easily hackable), yet we want to build and host serious applications that we can earn from. How do we deal with DB migrations without existing data loss? We want to build production-optimized applications. i.e., fast applications, log files (to troubleshoot), testing, and hosting securely and economically.

How can a developer truly leverage the power of NextJS if all we want is to fetch, update, create, edit, or delete content in the database through the application? Should we open our IDE to make changes and then re-deploy the application? Why not teach us how to create our own admin panel for this purpose?


r/nextjs • • Oct 21 '25

Help Best ways to convert Figma files or designs into NextJS code?

3 Upvotes

Hey, I'm developing a lot of different projects in NextJS and I'm absolutely hooked with the whole ecosystem but I'm kind of missing a way to translate Figma files into nextjs code.

Mainly looking to automate some parts of the process and save some time, most stuff I've used really misses the mark when it comes to more complicated figma designs or non standard components and while I've found some decent solutions on React I haven't really found anything great for nextjs.

Any recommendations would be highly appreciated! Would save me a lot of time to automate this a bit.


r/nextjs • • Jun 28 '24

Discussion Next.js SSR + Vercel = SLOW!

24 Upvotes

Hey all, just wanted to show you guys what happens if you "improperly" implement SSR.

Check out how much delay the first click has in the video, which is powered by SSR. Click, ... wait ..., swap tabs + load. The second click is instant, as it should be.

Let's dive into why:

Recently, a VC backed rocket ship company came to us with an urgent issue: their Next.js was not performant. Even just navigating to a new tab, the app felt unresponsive.

We quickly dove in: their api calls seemed fast enough (<300ms), their code had no obvious inefficiencies, and they were running things on Vercel so the architecture in theory should be optimized.

The only difference in their app compared to our typical architecture is they used Server Actions as well as Server Side Rendering (SSR) with Next.js' new App Router.

Their app was completely an internal app, so they didn't need SSR for SEO purposes. The only reason they used SSR + Server Actions is because that's what Next.js' docs recommended they do.

In just a few days, we migrated their entire app from server side calls to everything client side. Immediately, the app "felt" way more performant. Tabs switched immediately on click, instead of: click ... wait for data ... switch tab... render. Now that the load was client side, there was no data on render, but all we needed to do was build a placeholder / loader so the user knew we were fetching data.

From feeling sluggish to buttery smooth.

By swapping over to client side rendering, we got a couple big speed and DX (developer experience) benefits:

  1. As the user clicked a tab, or a new page, that page loaded immediately instead of waiting for data fetch

  2. We no longer had to wait for Vercel cold starts on Server Actions / SSR

  3. The network calls are done from the client, so as a developer, you can see any slow calls in the network tab of the browser

As always, never build from just hype. Client rendering is still the right choice in a lot of situations. Apps that don't need SEO, typically don't need SSR. Even if an app has SSR, it needs to render from client unless it's a hard reload.

Keep building builders 💪

‍


r/nextjs • • Dec 08 '24

Discussion Why use Client Components at this point?

0 Upvotes

I was actually wondering quite a bit. I did a lot of projects (Real World) in NextJS and I have been using only Server Components mostly, instead for example buttons, or interactive parts where I create only separate mini-component for that and mark it "use client" and import it into a bigger (parent) RSC.

But thing is I got used to RSC so much to the point that, for my next big project I am going to do, which is a social media project (Next.js frontend and Rust on backend) I plan to literally only use RSC.

I haven't had any problems with it. I just don't see myself doing a react-query fetch from client component again and I feel that it is totally unnecessary, + performance is better using RSC.

And I know everyone says "For highly interactive apps, use client components and fetch data with client components" but I actually think that's stupid. Am I wrong? Can someone prove me wrong? Also yes you have to question yourself if you want to add dependency on Server because if you use RSC that means dependencies as well, but I have done some pretty big, like really big project which are very complex, and still managed to score always 100 on performance, and they are lightning fast, all using RSC, and interactivity has never been a problem for me.

So can someone tell me where am I wrong, and if I should actually fetch data in client components using react-query in certain cases or not. I just don't find it necessary really...

EDIT: Quick edit, if someone says, but updated data from database will be updated in client components instantaneous without page refresh, yes that's true, but also you can set that up with RSC with a little more work. You have plenty of functions.


r/nextjs • • Jul 06 '25

Discussion What's using ORM of Nextjs?

2 Upvotes

I using postgres :)


r/nextjs • • Dec 17 '24

Help Noob Our frontend dev disappeared 3 day before our demo

7 Upvotes

We're a small company developing AI backends for newspapers. We wanted to demonstrate our ideas to the board of our client to get a contract for 2025.

We had a trusted frontend dev which worked remotely from Thailand, very good and trusted, but he completely disappeared a couple of hours before he was supposed to show us.

Besides being very worried for him (we really cannot believe he just ghosted us and is giving no sign of life whatsoever) we're stuck with the demo which will be tomorrow.

With some LLM help I managed to cobble up from where he left, something that mostly works when run locally, but am totally stuck with making it work with an hybrid SSR and client approach.

The demo could be run from my local machine but if I managed to deploy it in a docker container on our dev server I could give access to our prospect to play with it.

Simplifying, I need to show a page with a list of articles. The list needs to be built server side when in the container, but then the client page should have the responsibility of choosing the sort order of the three displayed columns and remember the desired order.

# FINAL edit:

I feel I owe an heartfelt thanks to some of you and an updated on the outcome.

a) Our developer has disappeared in Bangkok Thailand and via Linkedin I could find a contact that alerted his family and he's been searched for by the police.

b) Thanks to the typescript/eslint suppression during build I have been able to run the demo and it went really well so I hope this prospect will sign a contract to really build this for 2025 and yes there will be a real frontend/next.js developer hired to do it

c) After the demo when the pressure was off, with some of the hints some good people offered I managed to clean up the code with Claude 3.5 and I think it's now decently well structured and cleanish (last tuch was using loading states). Without any TS/Next.js knowledge the blind attempts made by the LLM were stuck in a loop of failed attempts, but reading through some of the advice below I did manage to fix the build cleanly with Next.js 15.

Happy holidays to all.


r/nextjs • • Oct 13 '24

Discussion Struggling with Next.js 14’s Server and Client Components: Anyone Else Sticking with Next.js 12?

1 Upvotes

I recently started learning Next.js with version 14, and I’ve been finding the shift to using server and client components a bit challenging. Specifically, the need to explicitly declare "use client" for client components has been somewhat confusing for me. Managing which part of the code runs on the server versus the client feels like a big cognitive load, especially when trying to keep track of hooks and component logic.

What made it more difficult is that React hooks can't be used in server components. This limitation has been frustrating since I often rely on hooks like useState and useEffect for managing component state and side effects. Not being able to use them everywhere feels a bit restrictive, and it slowed me down when building new features.

Because of this, I’m considering using Next.js 12 for my personal project instead. Next.js 12 doesn't have the same server-client split complexity, and it feels more straightforward to me—just a single page with full client-side React where I can use hooks freely.

Has anyone else experienced something similar? Have you chosen to stick with an earlier version of Next.js for similar reasons? I’d love to hear your thoughts or if you’ve found any effective ways to handle the new server-client component system in Next.js 13 and 14.