DEV Community: Sushil

reset() Inside onSubmit Only Half-Resets a React Hook Form. Here's What Stays Behind

Sushil — Thu, 05 Nov 2026 02:45:12 +0000

You save a form, call reset() in your submit handler, and the inputs go blank. Looks done. Then the user starts typing the next entry and a red "Title needs 3+ chars" shows up while they're still typing, on a form that's supposed to be fresh.

The values were reset. The submission state wasn't.

Why it happens

The React Hook Form reset docs spell this out in their rules: "Avoid calling reset inside onSubmit. handleSubmit updates isSubmitted, isSubmitSuccessful and submitCount after your handler finishes, so a reset there clears the values but not the submission state."

So the order is: your handler runs, reset() clears everything, then handleSubmit finishes and writes "submitted, successful, count +1" back on top. And once isSubmitted is true, the default reValidateMode: 'onChange' kicks in, which is why errors start firing while the user types.

What I ran

I wanted to see the exact state, so I rendered a one-field form in jsdom with Testing Library and drove it with user-event: React 19.3.1, react-hook-form 7.91.0, zod 4.6.7, @hookform/resolvers 7.0.2, Node 20.19.2. The schema is z.object({ title: z.string().min(3) }). I ran three versions: reset() inside a sync onSubmit, inside an async one (awaits a 20 ms timer first), and the useEffect version from the docs.

Here's the state right after a successful save, and after typing "ab" into the now-empty field without submitting:

	After save	Error after typing "ab"
`reset()` in sync `onSubmit`	`isSubmitted: true`, `isSubmitSuccessful: true`, `submitCount: 1`	"Title needs 3+ chars"
`reset()` in async `onSubmit`	`isSubmitted: true`, `isSubmitSuccessful: true`, `submitCount: 1`	"Title needs 3+ chars"
`reset()` in `useEffect`	`isSubmitted: false`, `isSubmitSuccessful: false`, `submitCount: 0`	none

Async made no difference. And submitCount never really climbs with the in-handler version: after the second save it was back at 1, because reset() zeroes it and handleSubmit adds one. If you use submitCount for anything, like "show the hint after two failed tries", that's quietly wrong.

One thing I couldn't reproduce: errors getting stuck. In every version, a too-short title showed the error and fixing it cleared it. What changes is when validation starts, not whether it works.

The fix

Move the reset into an effect that watches isSubmitSuccessful. This is the docs' "Submit with Reset" pattern, with the schema from my test:

import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({ title: z.string().min(3, 'Title needs 3+ chars') });
type FormValues = z.infer<typeof schema>;

export function TaskForm({ save }: { save: (v: FormValues) => Promise<void> }) {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitSuccessful },
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { title: '' },
  });

  useEffect(() => {
    if (isSubmitSuccessful) reset({ title: '' });
  }, [isSubmitSuccessful, reset]);

  return (
    <form onSubmit={handleSubmit(save)}>
      <input aria-label="title" {...register('title')} />
      {errors.title && <p>{errors.title.message}</p>}
      <button type="submit">Save</button>
    </form>
  );
}

reset() clears isSubmitSuccessful too, so the effect fires again on every later save, not just the first one. In my run it did: after the second save the state was back to false/false/0.

If save throws, nothing resets, which is usually what you want: in my run the field kept "kept text" after a failing save. handleSubmit passes the error on, though, and here it ended up as an unhandled promise rejection, so catch it inside save and show the user something.

I type-checked that exact component with TypeScript 5.9.3 (strict) and ran it through the same jsdom setup: the field cleared after each save and typing "ab" afterwards showed no error. All of this ran in jsdom, not a real browser. The behavior comes from React Hook Form's state handling rather than the DOM, so I'd expect the same in an app, but I haven't checked that part.

If you've got reset() sitting at the bottom of a submit handler somewhere, it's a two-line move. Worth it just to get submitCount honest again.

Composio 0.28 Stops Retrying Writes. I Counted the Requests to See What Actually Changed

Sushil — Thu, 05 Nov 2026 02:40:37 +0000

The @composio/core 0.28.0 changelog has a line that sounds like it changes how every agent tool call behaves: "POST and PATCH requests, including tool execution and trigger creation, are now sent once instead of being retried on a lost response or a retryable status." The reason is fair. A write can finish on the server after its response gets lost, and a blind retry sends that email twice.

But if you use composio.tools.execute(), it's not a new behavior for you. I pointed 0.27.0 and 0.28.0 at a local server that answers every POST with a 503 and counted what came in.

What I ran

A tiny Node HTTP server logs each request. It answers the tool and trigger-type lookups (GETs) with a fake tool definition and every POST with 503. Each SDK version runs against it with baseURL: 'http://127.0.0.1:4010' and COMPOSIO_ALLOW_INSECURE_HTTP=1. I ran it on Node 22.23.4 with @composio/core 0.27.0 (which pulls @composio/client 2.0.0-rc.19) and 0.28.0 (@composio/client 2.0.1).

Call	0.27.0 POSTs	0.28.0 POSTs
`composio.tools.execute()`	1	1
`composio.triggers.create()`	3	1
`composio.getClient().tools.execute()` (raw client)	3	1
Raw client with `{ maxRetries: 2 }`	3	3

The GET lookups before each write were still retried in both versions. When I made the tool lookup return 503 too, the SDK sent it three times before giving up.

Tool execution already went out once

The high-level tools.execute() stopped retrying a long time ago. The changelog for 0.14.0 says it and tools.proxyExecute route through a client "built with maxRetries: 0", and 0.23.0 did the same for session.execute() and session proxy calls. In the 0.27.0 build you can still see the helper that does it, with a comment pointing at issue #3654 ("Retried tools.execute / tools.proxy can duplicate non-idempotent side effects").

So if your agent only runs tools through tools.execute(), sessions, or a provider wrapper, the upgrade doesn't change how often a failed tool call hits the API.

Where 0.28 does change things

Two places in my test:

triggers.create(). On 0.27.0, a 503 on the upsert meant three POSTs. Now it's one. If you had a flaky network and were quietly relying on the SDK to get a trigger created, you'll see that error now instead.

The raw client from getClient(). Any POST or PATCH you send through it was retried twice by default on 0.27.0. On 0.28.0 it goes once, unless that specific call passes maxRetries:

import { Composio } from '@composio/core';

const composio = new Composio({ apiKey: process.env.COMPOSIO_API_KEY });
const client = composio.getClient();

// 0.28: sent once. On a 503 or lost response you get the error.
await client.tools.execute('GITHUB_CREATE_AN_ISSUE', {
  user_id: 'user_1',
  arguments: { owner: 'acme', repo: 'app', title: 'Bug' },
});

// Opt back in for this call only. Only do this for writes that are safe to repeat.
await client.tools.execute(
  'GITHUB_CREATE_AN_ISSUE',
  { user_id: 'user_1', arguments: { owner: 'acme', repo: 'app', title: 'Bug' } },
  { maxRetries: 2 },
);

I confirmed the second form sends three attempts against the mock. I didn't run either call against the real Composio API; the numbers above come from the local 503 server only, and I didn't simulate a dropped connection or a timeout.

The raw client also had breaking changes

If you use getClient(), read the rest of the 0.28.0 entry before upgrading. The client no longer has request(), so you call get, post, patch, put or delete instead. Its resources are plain objects now, so the resource classes and Composio.Tools-style statics are gone, and .js/.mjs subpath imports from @composio/client no longer resolve. One more thing: @composio/core 0.28.0 declares "node": ">=22.22.3" in its engines field, so I ran these tests on Node 22.

What to do about it

Don't add a retry loop around writes to get the old behavior back. That's the exact duplicate-write bug the change is avoiding. If a write fails with an ambiguous error, check whether it happened (list the trigger, look for the created issue) before you send it again, or give the write an idempotency key your own code can check.

For reads, nothing changed. GETs still get retried for you.

Are you calling the raw client anywhere in your agent code? That's the place I'd grep first.

AI SDK 7.0.160 Started Enforcing dataPartSchemas. Your Loading States Might Now Throw

Sushil — Tue, 03 Nov 2026 02:41:31 +0000

If you pass dataPartSchemas to useChat and bump ai to 7.0.160 or later, a chat that worked yesterday can end up in status: 'error' with a TypeValidationError. You didn't change anything. Your schemas just started running.

What changed

useChat and Chat accept dataPartSchemas, keyed by the bare part name (weather for a data-weather part). The stream processor looked the schema up by the full chunk type (data-weather), so the lookup always missed and streamed data parts were never validated. That's issue #24241, fixed in PR #24298 and shipped in ai 7.0.160: "Invalid data parts now raise a TypeValidationError."

So a patch release turned on a check that was configured but never ran.

What I ran

I didn't want to guess at the edge cases, so I drove the Chat class from @ai-sdk/react with a fake transport that replays fixed UI message chunks. No model, no network. useChat runs on that same class (its chat option even takes an existing Chat instance), so the stream handling is the same code path. I ran the same script against ai 7.0.159 with @ai-sdk/react 4.0.163, ai 7.0.162 with @ai-sdk/react 4.0.166, and ai 6.0.322 with @ai-sdk/react 3.0.325, all with zod 4.6.7 on Node 20.19.2.

Stream	7.0.159	7.0.162
Valid `data-weather` part	ready	ready
`city: 42`, then some text	ready, bad data kept in `parts`, text arrives	error, no assistant message at all
Loading update without `weather`, then the final value	ready	error, earlier text kept, final value lost
Transient part that fails the schema	ready, `onData` called	error, `onData` not called
`data-notice` part with no schema	ready	ready

On 6.0.322 every row matched the 7.0.159 column: bad data went through without an error.

The one that'll bite: progressive updates

The streaming data docs use a progressive pattern: write { city, status: 'loading' } first, then write to the same id again with the real value. The docs type weather as optional (weather?: string), which fits that pattern. But if your zod schema was written for the finished shape, the loading chunk fails now. Here's the excerpt from my test script (start and end are the start/finish chunks, text() writes one text part, and run() sends a message through Chat with these chunks):

const strictSchemas = {
  weather: z.object({
    city: z.string(),
    weather: z.string(),
    status: z.enum(['loading', 'success']),
  }),
};

// Case 3: a loading update, then the final value under the same id
await run('3 loading update without weather, then final', [...start,
  ...text('t0', 'Checking...'),
  { type: 'data-weather', id: 'w1', data: { city: 'Berlin', status: 'loading' } },
  { type: 'data-weather', id: 'w1', data: { city: 'Berlin', weather: 'sunny', status: 'success' } }, ...end]);

On 7.0.162 this ended with Type validation failed for message.parts[2].data (data-weather, id: "w1"). The "Checking..." text that streamed before it stayed in the message, the final value never arrived, and chat.status was error.

Every chunk is checked, not just the last one per id. Transient parts too, even though they never land in message.parts.

The fix

Make the schema describe every state the server actually sends. A discriminated union keeps the final shape strict:

const unionSchemas = {
  weather: z.discriminatedUnion('status', [
    z.object({ status: z.literal('loading'), city: z.string() }),
    z.object({ status: z.literal('success'), city: z.string(), weather: z.string() }),
  ]),
};

With this schema the same stream finished with status: ready on both versions, and the part ended up as { city: 'Berlin', weather: 'sunny', status: 'success' }.

Before you upgrade, I'd do three things:

Search the client for dataPartSchemas.
For each data-* type in there, check every writer.write() on the server against its schema, including loading, progress and transient writes.
Make sure the UI shows error from useChat. In my runs a failed part stopped the whole response, so a silent failure here looks like a chat that just stops.

Data parts with no schema aren't checked at all, so a schema-less type won't start failing.

I'd rather have the error than let city: 42 slip into message.parts without a word, which is what 7.0.159 did. Have you hit this one after updating, or were your schemas already matching what the server sends?

References

October 2026 for React and AI Devs: Next.js 16.4, TypeScript 7.1 Beta, a Big TanStack Month, Convex 1.47 to 1.49

Sushil — Mon, 02 Nov 2026 03:45:49 +0000

October was busy. Next.js shipped a release and two critical security fixes in the same month, TypeScript 7.1 went to beta, TanStack put out five announcements in four weeks, and Convex shipped three minor versions. This is what I think is worth knowing from it, with a link to the release note or announcement behind every item. Dates are the publish dates on those pages.

There's one thing to put in your calendar first. Next.js has a scheduled security release on November 3 covering seven medium-severity vulnerabilities. The advisories aren't public yet, so plan an upgrade window for that day.

Next.js

Next.js 16.4 (Oct 6). The headline is that the Next.js team now recommends Cache Components for every Next.js app. New apps from create-next-app get it enabled by default, and the post says it will be the default in Next.js 17. There's also a lot of agent tooling: next upgrade --agent gives a coding agent version-specific upgrade steps, experimental.agentUpgrade nudges you during next dev and next build when a relevant upgrade exists (the default policy only covers security fixes), and experimental.agentFeedback (on by default in new apps, opt-in for existing ones) lets an agent draft bug reports that you review before anything gets sent. For everyone else: a 20 to 25% smaller Turbopack disk cache, lazy server HMR, shorter CSS Module class names in production, and React 19.3. The experimental Rust React Compiler got a fast path that skips files that don't need it, and the post reports 30% less memory and 15% faster compiles for it.

October 14 security update. This one is not optional. Two critical unauthenticated RCEs were fixed: one in use cache functions that return multiple typed arrays (no workaround, so upgrade even if you don't think you have that pattern), and one in the Image Optimization API with SVGs on glibc-based Linux, which comes from the upstream image library. If you can't upgrade right away, the workaround for that one is making sure Next.js resolves sharp 0.35.5 or later. There's also a high-severity DoS for App Router apps with at least one Server Action. The fixed versions are 16.4.1 and 15.5.28. The latest 16.4 patch is 16.4.3 on npm (Oct 23).

Two agent-focused posts. Improving navigation in v0 with Next.js 16.4 (Oct 16) walks through Partial Prefetching and the new next-partial-prefetching-optimizer skill on a real app. Ship less JavaScript with your AI agent (Oct 28) introduces the next-bundle-optimizer skill, which gives an agent Turbopack's module graph. Vercel says agents cut close to 2 MB of compressed JavaScript across v0 and vercel.com with it. It requires Turbopack.

React

There was no React blog post in October; React 19.3 is from September. On Oct 14, the same day as the Next.js security update, React published 19.3.1 along with backports 19.2.9, 19.1.10 and 19.0.9. The release notes say "Improve transport protocol" under React Server Components, and the Next.js post links two upstream React advisories. If you use RSC outside Next.js, upgrade React too.

React Hook Form shipped 7.90.0 and 7.91.0, mostly useFieldArray fixes, and v8.0.0-beta.5, which says it improves React Compiler compatibility and adds full test coverage with the compiler.

TypeScript

TypeScript 7.1 Beta (Oct 20). The language changes are small but useful. Ambient module declarations can now match on import attributes (declare module "*" with { type: "text" }). There's support for source phase imports (import source), and es2026 is now a stable --target and --lib (Map.prototype.getOrInsert, Uint8Array.fromBase64, Error.isError and more). The bigger story is the new programmatic API split into entry points like typescript/sync and typescript/async, plus "content mappers", a plugin point that lets tools for Vue, Svelte, Astro, MDX and similar formats feed TypeScript a virtual version of the file. Running them from tsc needs the new --runExternalCode flag. Microsoft's own numbers show 1.2x to 1.9x faster checks than 7.0 on five large codebases. One behavior change might add errors: distributive conditional types are stricter about constraints. The post says an RC is about a month out.

TanStack

TanStack Charts 1.0 (Oct 5). A new charting library, already at 1.0. The pitch is "charts you don't have to outgrow".

TanStack Start 1.0 is stable (Oct 13). This is the formal API commitment for the full-stack framework many people were already running in production during the RC. If you were holding off on Start until it hit 1.0, that wait is over.

TanStack AI 1.0 (Oct 23). Stable core APIs, rewritten docs, 23 provider adapters, and an experimental agent harness. The harness APIs are explicitly not covered by the stability promise.

Introducing TanStack Redact (Oct 26). A smaller replacement for React and React DOM in the browser that keeps your application code unchanged. It's early (0.2.x on npm), so check its compatibility docs before trying it on a real app.

TanStack DB 1.0 RC1 (Oct 29). The release candidate, plus a long post about the "oracle" tests used to harden it. Read the RC migration guide before upgrading. Query Collection handlers no longer refetch automatically after a mutation, and that one quietly changes app behavior.

Convex

Three minor versions landed in about two weeks, all in the convex-js changelog.

1.47 (Oct 15) added .staged() on defineTable, so a schema change can be validated in the background instead of blocking the deploy on a table scan. npx convex deploy now asks before building an index on a large table, ctx.meta.getSnapshotTs() is public, and the envList MCP tool returns only variable names by default.

1.48 (Oct 22) lets deployments sign their own JWTs with ctx.auth.signJwt in mutations (verifiable via the deployment's /.well-known/jwks.json) and makes ctx.storage.store() and ctx.storage.get() work in mutations, not just actions. Verbose deploy logs now redact env values, and npx convex env list shows only names when it detects an AI agent is running it.

1.49 (Oct 30) drops Node.js 20, so you need Node 22 or newer for the CLI. It also adds a v.function() validator for function handles and an npx convex plugins install command for the Claude Code and Codex plugin.

AI SDKs and agent tooling

Composio TypeScript SDK. 0.23.0 (Oct 12) lets a session tool ask for user input, such as an approval, instead of running, and surfaces that as a new ComposioToolInputRequiredError. 0.24.0 (Oct 14) adds session.executeMeta() for running COMPOSIO_* meta tools. 0.27.0 (Oct 22) adds session hooks, which can block a tool call before it runs or block its result before the agent sees it. 0.25 and 0.26 change how the SDK passes identity and credentials to its API client, so read those notes if you set custom headers.

Vercel AI SDK. Only patch releases on 7.0 in October (7.0.127 through 7.0.159). The one I'd note is 7.0.158, which added stat, listDirectory and deleteFile to the experimental sandbox session.

MCP TypeScript SDK 1.32.0 (Oct 2). HTTP client transports now only follow same-origin redirects. If your server endpoint redirects to another host or port, either configure the final URL or set redirectPolicy: 'follow'. On the v2 packages, @modelcontextprotocol/server 2.3.0 adds an expectedResource option to requireBearerAuth so a server only accepts tokens issued for it.

OpenAI Agents JS. 0.19 to 0.21 were mostly fixes. If you used the Runloop sandbox provider, 0.21.0 of agents-extensions removed it and links a migration guide.

What I'd do this week

Make sure you're on Next.js 16.4.1+ (or 15.5.28+) already, then upgrade again after the November 3 release. If you're on Convex and still on Node 20, sort that out before you bump to 1.49. Everything else can wait for a quiet afternoon. For me that's TypeScript 7.1's content mappers and TanStack Start 1.0.

What did I miss from October that you're actually using?

Next.js 16: Fixing "cookies() can't be read inside 'use cache'" (and Caching Public Data Without It)

Sushil — Sun, 01 Nov 2026 15:05:43 +0000

You turn on Cache Components, add 'use cache' to a data function, and the build fails:

Error: Route "/broken": `cookies()` can't be read inside `"use cache"`. Read it outside the cached function and pass what you need as an argument.
Learn more: https://nextjs.org/docs/messages/next-request-in-use-cache
    at h (lib/server-client.ts:6:29)
    at i (app/broken/page.tsx:7:24)

The confusing part is that your cached function might never call cookies() itself. In this example, the call is inside a helper that creates a "server client", the kind of cookie-aware factory that many auth and database SDKs ship for the App Router. The rule follows the call stack, so a cookie read anywhere below a 'use cache' boundary breaks it.

This post shows why that happens and the four patterns that fix it, each built and run on Next.js 16.4.3.

What you'll learn

Why cookies(), headers() and searchParams are not allowed in 'use cache'
How to cache public data when your SDK's default client reads cookies
How to pass a cookie value into a cached function safely
Where per-user data should go instead (and the Suspense rule that comes with it)
When 'use cache: private' is the right tool, and what it does not do

Prerequisites and versions

Next.js 16.4.3 with the App Router
React 19.3.1
TypeScript
Cache Components enabled (below)

Since Next.js 16.0, cacheComponents is a top-level config option. The current docs recommend setting partialPrefetching explicitly alongside it. Leaving it unset logs a warning:

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
}

export default nextConfig

Background: why the rule exists

A 'use cache' function's output is stored and reused across requests and users. Its cache key is built from the build ID, a hash of the function's identity, and its serializable arguments (see the use cache reference).

Cookies and headers aren't arguments. If a cached function could read them, the cache key wouldn't reflect them, and one user's cookie-dependent result could be served to someone else. So Next.js forbids request-time APIs inside the cached scope:

Cached functions and components cannot access runtime APIs like cookies(), headers(), or searchParams, and the restriction follows the call stack: a helper the cached function calls that reads one of these fails the same way.

The docs also warn that on a dynamically rendered route this "can pass next build and fail under next start". Don't treat a green build as proof.

Reproducing the error

Here's a stand-in for a cookie-aware SDK factory. Real ones (for example, an auth or database "server client" for the App Router) usually take the cookie store so they can attach the user's session:

// lib/server-client.ts
import { cookies } from 'next/headers'

// Stand-in for a cookie-aware SDK factory such as an auth or database
// "server client". The important part: it calls cookies() internally.
export async function createServerClient() {
  const cookieStore = await cookies()
  const token = cookieStore.get('session')?.value ?? null
  return {
    async getPublicPosts() {
      return [{ id: 1, title: 'Hello' }, { id: 2, title: 'World' }]
    },
    async getMyDrafts() {
      if (!token) return []
      return [{ id: 99, title: `Draft for ${token}` }]
    },
  }
}

And a page that caches "public" posts with it:

// app/broken/page.tsx
import { cacheLife } from 'next/cache'
import { createServerClient } from '@/lib/server-client'

async function getPublicPosts() {
  'use cache'
  cacheLife('hours')
  const client = await createServerClient() // calls cookies() inside the cache scope
  return client.getPublicPosts()
}

export default async function Page() {
  const posts = await getPublicPosts()
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>
}

next build fails with the error at the top of this post. The stack trace points to the cookies() call in the helper and to the cached function that called it. That's the fastest way to find the culprit in a real codebase.

The fix, in four patterns

All four patterns below live on one page. Together they built cleanly. Next.js marked the route as Partial Prerender (◐) with Revalidate 1h and Expire 1d, which come from the hours profile.

Pattern 1: Public data uses a client that never touches cookies

If the data is the same for everyone, it shouldn't go through a cookie-aware client at all. Create a separate client for public reads. With real SDKs, this usually means the plain client created with a public/anon key, not the App Router "server client" helper.

// lib/public-client.ts
// Stand-in for a cookie-free client (for example a plain SDK client created
// with a public/anon key). It never touches cookies() or headers().
export function createPublicClient() {
  return {
    async getPublicPosts() {
      return [
        { id: 1, title: 'Hello' },
        { id: 2, title: 'World' },
      ]
    },
  }
}

// 1. Public data: cookie-free client, safe to share across all users.
async function getPublicPosts() {
  'use cache'
  cacheLife('hours')
  cacheTag('posts')
  const posts = await createPublicClient().getPublicPosts()
  return { posts, generatedAt: new Date().toISOString() }
}

generatedAt is there to show the caching. With the page served by next start, two requests without cookies and one request with Cookie: locale=fr; session=alice all returned the same generatedAt value. The entry was filled during the build and reused for everyone.

Security note: Only do this for data that really is public. If your database enforces row-level security based on the user's session, a cookie-free client sees what an anonymous user sees. That's correct for public data and wrong for anything personal.

Pattern 2: Read the cookie outside and pass the value in

This is the pattern the error page recommends. The value you pass becomes part of the cache key, so each distinct value gets its own entry.

// 2. Data that depends on one small cookie value: read the cookie outside,
//    pass the value in. The value becomes part of the cache key.
async function getGreeting(locale: 'en' | 'fr') {
  'use cache'
  cacheLife('days')
  return locale === 'fr' ? 'Bonjour' : 'Hello'
}

async function Greeting() {
  const raw = (await cookies()).get('locale')?.value
  const locale = raw === 'fr' ? 'fr' : 'en'
  return <p id="greeting">{await getGreeting(locale)}</p>
}

The response without cookies showed Hello. With Cookie: locale=fr it showed Bonjour.

Two design choices here matter:

Normalize the value before passing it. raw === 'fr' ? 'fr' : 'en' limits the cache to two entries. If you pass a raw cookie straight through, any client can create a new cache entry by sending a random value.
Prefer low-cardinality values such as locale, theme, plan tier or feature-flag variant. Passing a session token or user ID technically works (one entry per user), but at that point you're building a per-user cache. That's usually better handled by Pattern 3 or 4.

Pattern 3: Per-user data stays uncached, inside Suspense

Personal data, like "my drafts", can just stay dynamic. Use the cookie-aware client outside any cache scope:

// 3. Per-user data: not in a shared cache at all. Rendered at request time
//    inside a Suspense boundary.
async function MyDrafts() {
  const client = await createServerClient()
  const drafts = await client.getMyDrafts()
  return (
    <ul id="drafts">
      {drafts.map((d) => (
        <li key={d.id}>{d.title}</li>
      ))}
    </ul>
  )
}

The full page puts it all together:

// app/fixed/page.tsx
import { Suspense } from 'react'
import { cookies } from 'next/headers'
import { cacheLife, cacheTag } from 'next/cache'
import { createPublicClient } from '@/lib/public-client'
import { createServerClient } from '@/lib/server-client'

// 1. Public data: cookie-free client, safe to share across all users.
async function getPublicPosts() {
  'use cache'
  cacheLife('hours')
  cacheTag('posts')
  const posts = await createPublicClient().getPublicPosts()
  return { posts, generatedAt: new Date().toISOString() }
}

// 2. Data that depends on one small cookie value: read the cookie outside,
//    pass the value in. The value becomes part of the cache key.
async function getGreeting(locale: 'en' | 'fr') {
  'use cache'
  cacheLife('days')
  return locale === 'fr' ? 'Bonjour' : 'Hello'
}

async function Greeting() {
  const raw = (await cookies()).get('locale')?.value
  const locale = raw === 'fr' ? 'fr' : 'en'
  return <p id="greeting">{await getGreeting(locale)}</p>
}

// 3. Per-user data: not in a shared cache at all. Rendered at request time
//    inside a Suspense boundary.
async function MyDrafts() {
  const client = await createServerClient()
  const drafts = await client.getMyDrafts()
  return (
    <ul id="drafts">
      {drafts.map((d) => (
        <li key={d.id}>{d.title}</li>
      ))}
    </ul>
  )
}

export default async function Page() {
  const { posts, generatedAt } = await getPublicPosts()
  return (
    <main>
      <p id="generated">{generatedAt}</p>
      <ul id="posts">
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
      <Suspense fallback={<p>Loading greeting…</p>}>
        <Greeting />
      </Suspense>
      <Suspense fallback={<p>Loading your drafts…</p>}>
        <MyDrafts />
      </Suspense>
    </main>
  )
}

The test results: without a session cookie the drafts list was empty. With session=alice it contained Draft for alice. The public posts and their timestamp were identical in both responses.

Why the Suspense boundaries matter. With Cache Components, reading cookies() outside <Suspense> blocks prerendering. This page fails the build:

// app/nosuspense/page.tsx — fails the build with Cache Components
import { cookies } from 'next/headers'

export default async function Page() {
  const session = (await cookies()).get('session')?.value
  return <p>{session ?? 'anonymous'}</p>
}

Error: Route "/nosuspense": Next.js encountered uncached or runtime data during prerendering.
`fetch(...)`, `cookies()`, `headers()`, `params`, `searchParams`, or `connection()` accessed outside of `<Suspense>` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.
Ways to fix this:
  - [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access
  - [cache] For uncached data (`fetch`, database calls): cache the access with `"use cache"` (does not apply to `connection()`)
  - [block] Set `export const instant = false` to allow a blocking route

Wrapping the cookie-reading component in <Suspense> (as Greeting and MyDrafts are above) is the "[stream]" option. The static shell, which includes the cached public posts, is served right away, and the personal parts stream in.

Pattern 4: `'use cache: private'` when you can't refactor

Sometimes the cookie read is buried in code you can't change easily. 'use cache: private' allows cookies(), headers() and searchParams inside the cached scope:

// app/private/page.tsx
import { Suspense } from 'react'
import { cookies } from 'next/headers'
import { cacheLife } from 'next/cache'

async function getDashboard() {
  'use cache: private'
  cacheLife({ stale: 60 })
  const session = (await cookies()).get('session')?.value ?? 'guest'
  return { session, at: new Date().toISOString() }
}

async function Dashboard() {
  const { session, at } = await getDashboard()
  return <p id="dash">{session} @ {at}</p>
}

export default function Page() {
  return (
    <Suspense fallback={<p>Loading…</p>}>
      <Dashboard />
    </Suspense>
  )
}

The important thing is what "private" means. From the docs: "In production, matching calls within one request can reuse the same result, but Next.js does not store it in a server cache across production requests." The client router can keep the output in browser memory for the stale time.

The test confirmed this. Under next start, consecutive requests with the same session=alice cookie got a different at timestamp every time. So 'use cache: private' deduplicates within a request and feeds the browser's router cache. It does not make repeated server requests cheaper. If you need that, use Patterns 1–3.

Other limits from the docs:

connection() is still not allowed inside it.
You can't configure custom cache handlers for it.
Its stale time feeds the route's client cache. It must be at least 30 seconds for per-link prefetching and at least 5 minutes to be included in the route's App Shell.

Choosing a pattern

Your data	Pattern
Same for everyone	1: cookie-free client inside `'use cache'`
Varies by a small, known set of values from a cookie/header	2: read outside, normalize, pass as argument
Specific to the signed-in user	3: uncached, in a component wrapped in `<Suspense>`
Per-user, and the cookie read can't be moved	4: `'use cache: private'`, but no cross-request server cache

Common mistakes and troubleshooting

"My function doesn't call cookies()." Something it calls does. Check the stack trace. The first frame is the actual cookies() call, and the next frames show the path back to your cached function.
The build passes, production throws. On dynamically rendered routes, the error shows up when the route runs. Exercise the route under next start before deploying.
Passing the whole cookie store or headers() object. Arguments must be serializable, and class instances aren't. Extract the plain values you need.
Passing unbounded values. Each distinct argument creates a cache entry. Validate and normalize anything that comes from the client.
Using React.cache to smuggle values in. React.cache is isolated inside 'use cache' boundaries. Values set outside aren't visible inside. Use arguments.
Module-level promise caches. The error page notes that a cached function can stall if it awaits a promise stored outside the function (for example, in a module-scoped Map). 'use cache' already deduplicates calls with the same arguments, so remove the extra layer.
Draft Mode. You can read draftMode().isEnabled inside 'use cache', but cookies() and headers() are still off-limits, even in draft mode.

Limitations and alternatives

With the default in-memory cache handler on serverless platforms, runtime cache entries "typically don't persist across requests", although build-time caching works normally. Self-hosted servers keep entries in memory. If you need a shared runtime cache, look at 'use cache: remote', which uses a platform-provided handler and has network and cost trade-offs.
Cache entries don't survive a new deploy, because the build ID (or deploymentId) is part of the key.
Cache Components needs the Node.js runtime and doesn't support the runtime route segment config. Remove export const runtime = ... from routes when you adopt it.
Don't wait for plain 'use cache' to start accepting cookies()/headers(). A reply in discussion #82873 (August 2025) says "There's no plan to allow use cache to access cookies/headers" and suggests using 'use cache' as much as possible and the private variant only rarely. The current docs take the same position.

Conclusion

The error is Next.js protecting you from serving one user's data to another. Most of the time the fix is structural. Keep public reads on a cookie-free client inside 'use cache'. Read cookies at the edge of your component tree, normalize the values, and pass them in as arguments. Keep personal data uncached behind <Suspense>. Use 'use cache: private' only when you can't move the cookie read, and remember that it doesn't give you a cross-request server cache.

Next step: search your codebase for helpers that call cookies() or headers() and check whether any of them run below a 'use cache' boundary. Then run the affected routes under next start, not just next build.

References

use cache directive: https://nextjs.org/docs/app/api-reference/directives/use-cache
Error: Cannot access request data in use cache: https://nextjs.org/docs/messages/next-request-in-use-cache
use cache: private: https://nextjs.org/docs/app/api-reference/directives/use-cache-private
use cache: remote: https://nextjs.org/docs/app/api-reference/directives/use-cache-remote
cacheComponents config: https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents
Caching guide: https://nextjs.org/docs/app/getting-started/caching
Blocking prerender error: https://nextjs.org/docs/messages/blocking-prerender-dynamic
Next.js discussion #82873, "Allow cookies() or headers() in use cache": https://github.com/vercel/next.js/discussions/82873
Next.js 16.4 release post: https://nextjs.org/blog/next-16-4

I Have Finally Launched my Template⚡⚡

Sushil — Tue, 16 Dec 2025 19:14:36 +0000

Today I’m launching Krome AI Agent — a production-ready Next.js template designed for building modern AI agent products.

This is my first full template, and honestly, I’m both excited and a little nervous to finally put it out there.

Preview

The goal was simple:

Clean architecture
Modern UI
Real SaaS pages
No unnecessary abstractions
Easy to extend and customize

What’s Included

Krome AI Agent is built with Next.js and focuses on real-world needs:

⚡ Modern, clean UI
🌗 Multiple themes (light & dark)
📄 Multiple ready-to-use pages (landing, blog, auth, contact, careers)
🧩 Reusable, well-structured components
🧠 AI-product friendly layouts
🎯 SEO-ready pages
✨ Smooth, subtle animations

Everything is intentionally kept simple and readable, so you can move fast without fighting the codebase.

If this sounds useful, I’d really appreciate your support on Product Hunt 🙌
👉 ProductHunt

Thanks for checking it out — feedback is always welcome! 🚀

✨ How to Create SVGs in Figma and Animate Them Using Motion 🚀

Sushil — Wed, 10 Dec 2025 15:22:26 +0000

SVGs are one of the most powerful tools in modern UI development. They’re scalable, lightweight, customizable, and—best of all—easy to animate when paired with Motion.

In this guide, I’ll walk you through how to:

Design SVGs in Figma
Export them cleanly
Convert them into React components
Animate them with Motion (Framer Motion)

Let’s jump right in.

Open Figma and create a new frame.

Creating SVG lines is simple — select the Pen tool, click to set your starting point, and then click again where you want the line to end. Figma will automatically create a clean vector path that you can later export as an SVG

To create curves, we’ll use the Bend tool.

Select your SVG line, click on the Bend tool, and then click on the line again. You’ll see two Dots appear, just drag those dots to shape the curve however you like. That’s it! You now have a clean, smooth, curved line.

Once your line looks good, exporting it as an SVG is easy. Just select the line, right-click, and choose Copy as SVG.

I’ve already created a demo component with some icons and a few pre-built SVG lines animating in the background. Now, let’s take a look at how we can animate the left SVG line using Motion.

"use client";

import MotionDiv from "@/components/animation/motion-div";
import { cn } from "@/lib/utils";
import React from "react";
import { motion } from "motion/react";
import { DotPattern } from "@/components/ui/dot-pattern";
import Container from "@/components/container";
import ThemeToggle from "@/components/theme-toggle";
import Scales from "@/components/scales";

const Demo = () => {
  return (
    <Container className="relative flex h-screen max-w-[524px] flex-col items-center justify-center bg-white dark:bg-black">
      <div className="mb-4">
        <ThemeToggle />
      </div>
      <Scales />
      <div className="relative overflow-hidden border-y">
        <Heading
          heading="Multi-Model Orchestration"
          subHeading="Use different AI models together in a single flow to optimize accuracy, creativity, and performance across tasks like generation, enhancement, and analysis."
        />
        <div className="flex scale-90 flex-col items-center justify-center sm:scale-105 md:scale-110 lg:scale-125">
          <MotionDiv className="relative flex h-72 w-[484px] scale-80 items-center justify-center bg-white p-2 px-4 sm:px-0 dark:bg-black">
            <DotPattern
              className={cn(
                "[mask-image:radial-gradient(150px_circle_at_center,white,transparent)]",
                "text-neutral-400 dark:text-neutral-700",
              )}
            />

            <IconCard className="left-8.5" icon={<GeminiIcon />} />
            <IconCard className="left-25.5" icon={<OpenAiIcon />} />
            <IconCard className="left-42.5" icon={<DeepSeekIcon />} />
            <IconCard className="right-42.5" icon={<ClaudeIcon />} />
            <IconCard className="right-25.5" icon={<GrokIcon />} />
            <IconCard className="right-8.5" icon={<QwenAiIcon />} />

            <Line1 />
            <Line2 />
            <Line3 />
            <Line4 />
            <Line5 />
            <Line6 />
            <MotionDiv
              initial={{}}
              className="bg-card absolute right-1/2 bottom-6 flex size-14.5 translate-x-1/2 items-center justify-center rounded-full border p-1"
            >
              <div className="flex size-full items-center justify-center rounded-full p-2.5 text-center shadow-2xl">
                SM
              </div>
            </MotionDiv>
          </MotionDiv>
        </div>
      </div>
    </Container>
  );
};

export default Demo;

type Heading = {
  heading: string;
  subHeading: string;
};

const Heading = ({ heading, subHeading }: Heading) => {
  return (
    <div className="mb-2 flex flex-col items-start justify-center gap-0.5 px-6 pt-8 sm:mb-8 lg:pt-4">
      <h2 className="text-card-title text-base font-medium tracking-tight sm:text-lg">
        {heading}
      </h2>
      <p className="text-paragraph mt-1 max-w-lg text-xs leading-snug font-light text-pretty sm:text-sm">
        {subHeading}
      </p>
    </div>
  );
};

type IconCardType = {
  className: string;
  icon: React.ReactNode;
};

const IconCard = ({ className, icon }: IconCardType) => {
  return (
    <MotionDiv
      className={cn(
        `bg-card absolute top-10 z-10 flex w-fit items-center justify-center rounded-full border shadow-2xl inset-shadow-sm`,
        className,
      )}
    >
      <div className="flex size-9.5 items-center justify-center rounded-full p-1.5">
        {icon}
      </div>
    </MotionDiv>
  );
};


const Line2 = () => {
  return (
    <svg
      width="107"
      height="166"
      viewBox="0 0 107 166"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-30"
      stroke="url(#line-2)"
    >
      <path strokeWidth={2} d="M106.5 166C106.5 91.8654 0.5 93.6701 0.5 0" />
      <defs>
        <motion.linearGradient
          id="line-2"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};
const Line3 = () => {
  return (
    <svg
      width="50"
      height="166"
      viewBox="0 0 50 166"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-47"
      stroke="url(#line-3)"
    >
      <path strokeWidth={2} d="M49.5 166C49.5 93.9514 0.5 93.9514 0.5 0" />
      <defs>
        <motion.linearGradient
          id="line-3"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};

const Line4 = () => {
  return (
    <svg
      width="50"
      height="166"
      viewBox="0 0 50 166"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 right-47 rotate-y-180"
      stroke="url(#line-4)"
    >
      <path strokeWidth={2} d="M49.5 166C49.5 93.9514 0.5 93.9514 0.5 0" />
      <defs>
        <motion.linearGradient
          id="line-4"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};
const Line5 = () => {
  return (
    <svg
      width="107"
      height="166"
      viewBox="0 0 107 166"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 right-30 rotate-y-180"
      stroke="url(#line-2)"
    >
      <path strokeWidth={2} d="M106.5 166C106.5 91.8654 0.5 93.6701 0.5 0" />
      <defs>
        <motion.linearGradient
          id="line-2"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};
const Line6 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 right-13 rotate-y-180"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-6)"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />

      <defs>
        <motion.linearGradient
          id="line-6"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "100%",
            y1: "90%",
            y2: "115%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}
        >
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#10b981" />
          <stop offset="0.66" stopColor="#0891b2" />
          <stop offset="0.1" stopColor="#eeeeee" />
        </motion.linearGradient>
      </defs>
    </svg>
  );
};

Let’s take the SVG we created in Figma and use it here.
First, we’ll turn it into a component called Line1.

Here’s what the component looks like.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="#eeeeee"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />
    </svg>
  );
};

Now, to animate the line, we’ll use Motion with a linear gradient.
To do that, we need to place our gradient inside a <defs> section, which is where SVG stores reusable definitions.

Next, we’ll turn the linear gradient into a Motion element and give it an ID so we can reference it from the SVG stroke.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-1)"  // use the id here
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />

<defs>
<motion.linearGradient
id="line-1"
>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

A <stop> defines one color point inside a gradient.
A gradient is essentially a list of stops that blend seamlessly into one another.

stopColor is the actual color for that stop.

offset defines where the color appears in the gradient.

It is like a progress percentage:

0 or 0% → start of the gradient
1 or 100% → end of the gradient
0.5 or 50% → middle

Inside the linear gradient, we have four values: x1 and x2 control how the gradient moves along the x-axis, and y1 and y2 control movement along the y-axis.

For this example, let’s start by animating x1 and x2.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-1)"  // use the id here
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />

<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

In the original gradient, x1 = 0% and x2 = 10% define where the red/blue part of the gradient starts.

Now, you can probably guess what we’re going to do
we’ll animate those same values so the gradient moves across the line.
So instead of starting at 0% → 10%, we’ll animate them to 90% → 100%.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-1)"  // use the id here
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      />

<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "110%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

we’re basically telling the gradient to slide forward along the line, creating that smooth glowing effect.

The gradient starts at its initial position and then moves from 90% to 110%, looping continuously. The linear easing keeps the motion steady, while the repeat delay adds a small pause before the next cycle, making the animation feel more natural and less aggressive.

Let's see it in action

But as you can see, the gradient doesn’t start from the top, it appears somewhere in the middle.

That’s happening because we’re only animating the x-axis values, not the y-axis. The gradient is technically moving, but only horizontally, so the effect doesn’t align with the shape of the curve.

To understand this better, we can use a simple <rect> example. A behaves similarly to a <path>, but because it’s a clean, straight shape, it makes the gradient behavior much easier to see.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      {/* <path
        strokeWidth={2}
        stroke="url(#line-1)"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      /> */}

      <rect
        width="169"
        height="167"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
        fill="url(#line-1)"
      />

<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "110%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

So now let’s also animate the y-axis values.
By adjusting y1 and y2 along with the x-axis, the gradient will follow the full direction of the line instead of cutting through the middle.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      {/* <path
        strokeWidth={2}
        stroke="url(#line-1)"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      /> */}

      <rect
        width="169"
        height="167"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
        fill="url(#line-1)"
      />

<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "110%",
            y1: "90%",
            y2: "110%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

Now just remove the and switch back to your , and you’ll have a clean, modern linear-gradient animation flowing perfectly across your SVG line.

const Line1 = () => {
  return (
    <svg
      width="169"
      height="167"
      viewBox="0 0 169 167"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="absolute top-19 left-13"
    >
      <path
        strokeWidth={2}
        stroke="url(#line-1)"
        d="M168.499 166.026C168.499 99.7414 5.52495 96.283 0.499313 0.0260773"
      /> 
<defs>
<motion.linearGradient
id="line-1"
          initial={{
            x1: "0%",
            x2: "10%",
            y1: "0%",
            y2: "10%",
          }}
          animate={{
            x1: "90%",
            x2: "110%",
            y1: "90%",
            y2: "110%",
          }}
          transition={{
            duration: 0.8,
            repeat: Infinity,
            repeatDelay: 1,
            repeatType: "loop",
            ease: "linear",
          }}

>
          <stop stopColor="#eeeeee" />
          <stop offset="0.33" stopColor="#dc2626" />
          <stop offset="0.66" stopColor="#3b82f6" />
          <stop offset="1" stopColor="#eeeeee" />
</motion.linearGradient>
</defs>
    </svg>
  );
};

End Result:

And that’s it — we’ve learned how to create an SVG in Figma, export it, and animate it using Motion.

If you found this helpful, follow me on Twitter for more tips, breakdowns, and behind-the-scenes builds.

I’m also launching my template soon, so stay tuned — you won’t want to miss it! 🚀

Building Krome — My Clean, Modern AI Agent Template for Next.js

Sushil — Wed, 26 Nov 2025 18:59:33 +0000

I’ve been spending the last few weeks heads-down on a new project, and I’m finally at a point where I can share what I’ve been building. I realized that while there are plenty of templates out there, it’s hard to find one that combines a clean, futuristic UI with solid, scalable code.

So I decided to make my own.

I’m calling it Krome (for now), and it’s a high-performance landing page + multipage template built for AI startups and modern SaaS platforms.

Link:

https://ai-agent-template-tan.vercel.app/

The Vision: Clean, Modern, and Premium

My goal with this template was simple: create a UI that immediately feels trustworthy and premium.

Think deep dark mode, soft glowing gradients, glassmorphism touches, and bento-style feature blocks.

I spent a lot of time refining the Pricing and Feature sections to make sure the visuals guide the user naturally through the product journey.

Under the Hood

This isn’t just a pretty UI—it's built to scale. Some of the core features include:

Multi-theme support: Easily switch accent colors or entire theme presets.
** Multi-page architecture:** Includes more than just a landing page—About, Contact, Sign Up, and more.
Fully working MDX blog: Write posts in Markdown and have them render beautifully.
Dynamic SEO: Every page and blog post automatically gets proper metadata.

Current Status: Refining the Details

The project is about 80% complete.

Most of the core pages, UI sections, and responsive layouts are done. The remaining work is mostly polish:

Making animations (especially scroll reveal) smoother.
Improving the mobile experience.
Cleaning up code comments and simplifying components so it’s easy for anyone to customize.

If you want to check it out or share feedback, the link is above. Still polishing things, but it's getting close!

Building a Features Bento Grid for My First UI Template

Sushil — Tue, 04 Nov 2025 15:32:39 +0000

I recently started working on my first UI template, and one of the core sections I wanted to get right early was the Features Bento Grid. The goal: create a layout that feels modern, expressive, and functional without looking cluttered.

Design Goals

Layered depth with soft shadows
Smooth micro-interactions
A structured but flowing grid
Clean contrast for both light & dark themes

The Bento layout style brings a sense of modular clarity — each feature stands out visually while still blending into a cohesive surface. I love how it keeps things playful yet professional.

This template isn’t just a UI kit — I'm aiming for something practical, elegant, and dev-friendly, especially for SaaS/AI dashboards.

🚧 Still in Progress

I'm also currently working on the hero section and refining the overall look. The goal is to keep it clean, modern, and calming — no clutter, no heavy visuals, just focus and breathing space.

If you're experimenting with UI templates, Bento layouts, or motion-enhanced design, I’d love to see what you're working on too 👇

Follow me on Twitter for more updates & progress 🚀

How Simple Animations Can Make a Big Impact on Your Website

Sushil — Mon, 30 Jun 2025 15:57:53 +0000

Animations aren’t just for fancy websites or landing pages. Even subtle, simple animations can make your site feel smoother, more polished, and more enjoyable to use.

In this post, I’ll show you how I used basic animations with Framer Motion and React to create a smooth experience on a component I call Smooth Reveal.

🎥 Live Demo

I made a small demo to show this in action.
👉 Check it out here

🔧 What’s Inside the Smooth Reveal Component?

Here’s what happens in the demo:

Navbar fades in from the top.
Main section smoothly reveals the text WI and LD, with a video expanding in the center.
Footer slides in with content and a CTA button.

🧩 Full Code Overview

Navbar.tsx A simple navbar with animated hover effect and theme switcher:

"use client";

import Link from "next/link";
import React, { useState } from "react";
import { motion } from "motion/react";
import MotionDiv from "@/components/animation/motion-div";
import { MoonIcon, SunIcon } from "lucide-react";
import { useTheme } from "next-themes";

const links = [
  { name: "Home", href: "/" },
  { name: "About", href: "/about" },
  { name: "Contact", href: "/contact" },
];

const Navbar = () => {
  const [isHovered, setIsHovered] = useState<number | null>(null);
  const { theme, setTheme } = useTheme();

  return (
    <MotionDiv
      initial={{ y: -10, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.5, delay: 0.6 }}
      className="flex w-full justify-between sm:h-10"
    >
      <div className="flex flex-col items-start sm:flex-row sm:items-center">
        {links.map((link, idx) => (
          <Link
            key={idx}
            href={link.href}
            className="relative flex gap-1 px-2.5 py-1.5 text-[14px] sm:px-4.5"
            onMouseEnter={() => setIsHovered(idx)}
            onMouseLeave={() => setIsHovered(null)}
          >
            {isHovered === idx && (
              <motion.span
                layoutId="hovered-span"
                className="absolute inset-0 h-full w-full rounded-2xl bg-neutral-900 backdrop-blur-sm dark:bg-neutral-100"
                transition={{ duration: 0.3 }}
              />
            )}
            <span className={`relative z-10 font-medium transition-colors duration-300 ${
              isHovered === idx
                ? "text-white dark:text-black"
                : "text-black dark:text-white"
            }`}>
              {link.name}
            </span>
          </Link>
        ))}
      </div>

      <div className="flex items-start justify-start gap-3 sm:items-center sm:gap-4">
        <Link
          href="/login"
          className="hidden items-center justify-center rounded-xl bg-neutral-200 px-4 py-1.5 text-sm font-medium text-neutral-900 hover:bg-neutral-300 sm:flex sm:px-6"
        >
          Login
        </Link>
        <Link
          href="/signup"
          className="hidden items-center justify-center rounded-xl bg-neutral-800 px-4 py-1.5 text-sm font-medium text-neutral-100 hover:bg-neutral-700 sm:flex sm:px-6"
        >
          Sign Up
        </Link>
        <motion.button
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
          className="ml-1 rounded-full border p-2 text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 hover:dark:bg-neutral-800"
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <motion.span
            key={theme}
            initial={{ rotate: -180, opacity: 0 }}
            animate={{ rotate: 0, opacity: 1 }}
            transition={{ duration: 0.3 }}
            className="flex size-4 items-center justify-center"
          >
            {theme === "dark" ? <MoonIcon /> : <SunIcon />}
          </motion.span>
        </motion.button>
      </div>
    </MotionDiv>
  );
};

export default Navbar;

Main.tsx The central text and animated video reveal section:

"use client";

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";

const Main = () => {
  const [isSmallScreen, setIsSmallScreen] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsSmallScreen(window.innerWidth < 640);
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className="flex h-full w-full items-center justify-center text-[24vw] font-semibold text-neutral-900 md:text-[18vw] xl:text-[14vw] dark:text-white">
      <div className="flex w-full flex-col items-center sm:flex-row sm:justify-center">
        <motion.span
          initial={{ opacity: 0, x: -50, scale: 0.9 }}
          animate={{ opacity: 1, x: 0, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.1 }}
        >
          WI
        </motion.span>

        <motion.div
          initial={{ width: "0px" }}
          animate={{ width: isSmallScreen ? "90%" : "35%" }}
          transition={{ duration: 0.7, delay: 0.3 }}
          className="mx-2 overflow-hidden rounded-full"
        >
          <motion.video
            initial={{ width: "0px" }}
            animate={{ width: "100%" }}
            transition={{ duration: 0.5, delay: 0.4 }}
            autoPlay
            muted
            loop
            playsInline
            className="h-full w-full object-cover"
          >
            <source src="/playground/car-shot.mp4" type="video/mp4" />
          </motion.video>
        </motion.div>

        <motion.span
          initial={{ opacity: 0, x: 50, scale: 0.9 }}
          animate={{ opacity: 1, x: 0, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.1 }}
        >
          LD
        </motion.span>
      </div>
    </div>
  );
};

export default Main;

Footer.tsx Simple fade-in footer with a message and CTA button:

import MotionDiv from "@/components/animation/motion-div";
import React from "react";

const Footer = () => {
  return (
    <MotionDiv
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: 0.6 }}
      className="flex w-full flex-col items-start justify-between gap-4 px-4 sm:flex-row sm:items-center sm:gap-0"
    >
      <p className="text-xs leading-relaxed text-neutral-400 sm:max-w-md sm:text-sm lg:max-w-5xl">
        Discover extraordinary experiences that push the boundaries of innovation. Our platform connects visionaries with cutting-edge solutions, turning ideas into reality through seamless collaboration.
      </p>

      <button className="mb-4 rounded-xl bg-neutral-800 px-4 text-sm font-medium text-white hover:bg-neutral-700 sm:mb-0 sm:px-6 sm:py-2 dark:bg-neutral-100 dark:text-black">
        Explore More
      </button>
    </MotionDiv>
  );
};

export default Footer;

SmoothReveal.tsx Combining everything into one complete component:

import React from "react";
import Navbar from "./navbar";
import Main from "./main";
import Footer from "./footer";

const SmoothReveal = () => {
  return (
    <div className="hide-scrollbar relative flex h-[85vh] w-full flex-col items-center justify-between rounded-2xl bg-neutral-50 p-4 dark:bg-neutral-900">
      <div className="absolute inset-0 h-full w-full bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:72px_72px]" />
      <div className="z-10 flex h-full w-full flex-col items-center justify-between">
        <Navbar />
        <Main />
        <Footer />
      </div>
    </div>
  );
};

export default SmoothReveal;

🧠 Final Thoughts

You don’t need overly complex animation libraries to make your website feel smooth and modern. Just a few well-placed transitions can make a huge difference.

Start small, stay consistent, and build from there.

👉 Live Demo – Smooth Reveal
Check out my full Portfolio
🐦 Follow me on Twitter for more frontend experiments and project updates.

Let me know what you think or share how you’re using animation in your own projects!

Building a Custom Hook for Theme-Aware Logo Mapping in Next.js

Sushil — Thu, 19 Jun 2025 07:25:01 +0000

Building a Custom Hook for Theme-Aware Logo Management in React

Recently, I've been recreating the premium portfolio template from Aceternity UI's Minimal Portfolio Template.

The template is modern, simple, and professional. I've recreated the entire website with some additional features like syntax highlighting in blogs and dedicated single pages for projects. And yes, I haven't bought the original template - this is my own implementation inspired by the design.

The Challenge: Professional UI/UX with Theme Support

While building the website, I wanted to ensure a professional UI/UX experience that looks great in both light and dark modes, especially when displaying technology logos.

Initially, I hardcoded the tech stack like this:

export const skills: Skill[] = [
  { name: "JavaScript", logo: "/lang-icons/javascript.svg" },
  { name: "TypeScript", logo: "/lang-icons/typescript.svg" },
  { name: "Node", logo: "/lang-icons/node-logo.svg" },
  { name: "React", logo: "/lang-icons/react.svg" },
  { name: "Next.js", logo: "/lang-icons/nextjs-logo.svg" },
  // etc...
];

This approach works fine for a single theme, but problems arise when you need to support both light and dark modes. Some logos that look great on light backgrounds become invisible on dark ones, and vice versa.

The Solution: Logo Mapping Object

To solve this, I created an object that maps each technology name to both light and dark logo variants:

type LogoVariant = {
  light: string;
  dark: string;
};

export const logoMapper: Record<string, LogoVariant> = {
  "Next.js": {
    light: "/lang-icons/nextjs-black.svg",
    dark: "/lang-icons/next-js-logo-white.webp",
  },
  React: {
    light: "/lang-icons/react.svg",
    dark: "/lang-icons/react.svg",
  },
  MongoDB: {
    light: "/lang-icons/mongodb.svg",
    dark: "/lang-icons/mongodb.svg",
  },
  Node: {
    light: "/lang-icons/node-logo.svg",
    dark: "/lang-icons/node-logo.svg",
  },
  "Tailwind CSS": {
    light: "/lang-icons/tailwind.svg",
    dark: "/lang-icons/tailwind.svg",
  },
  // More technologies...
};

Now I have both variants of each logo, but I still need to handle the theme switching logic.

The Problem: Repetitive Theme Logic

With this setup, I had to use the useTheme hook and write conditional logic everywhere I needed to display a logo:

"use client";

import React from "react";
import { useTheme } from "next-themes";
import { logoMapper } from "@/lib/logoMapper";
import Image from "next/image";

const SingleProjectPage = ({ params }: { params: Promise<{ slug: string }> }) => {
  const { theme } = useTheme();
  const resolvedParams = React.use(params);
  const project = singleProjects.find((p) => p.slug === resolvedParams.slug);

  if (!project) return <div>Project not found</div>;

  return (
    <div className="px-4 md:px-8">
      {/* Project header */}
      <div className="flex flex-col items-start gap-3 px-6">
        <h1>{project.title}</h1>
        <p>{project.shortDescription}</p>
      </div>

      {/* Technologies section */}
      <div className="shadow-section-inset p-4 md:p-6 md:pb-8">
        <h2>Technologies Used</h2>
        <div className="grid w-full grid-cols-2 gap-6 pt-0 md:grid-cols-4">
          {project.technologies.map((tech, idx) => (
            <div key={idx} className="group cursor-default">
              <div className="h-full p-2 transition-all duration-300">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-x-4">
                    {logoMapper[tech.name] && (
                      <div className="relative size-5 md:size-7">
                        <Image
                          src={
                            theme === "dark"
                              ? logoMapper[tech.name].dark
                              : logoMapper[tech.name].light
                          }
                          alt={`${tech.name} logo`}
                          fill
                          className="object-contain"
                        />
                      </div>
                    )}
                    <h3>{tech.name}</h3>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default SingleProjectPage;

The repetitive part was this conditional logic:

<Image
  src={
    theme === "dark"
      ? logoMapper[tech.name].dark
      : logoMapper[tech.name].light
  }
  alt={`${tech.name} logo`}
  fill
  className="object-contain"
/>

This became tedious and error-prone when used across multiple components.

The Solution: Custom useLogo Hook

To eliminate this repetition, I created a custom hook called useLogo that handles all the theme logic:

"use client";

import { useTheme } from "next-themes";

type LogoVariant = {
  light: string;
  dark: string;
};

export const logoMapper: Record<string, LogoVariant> = {
  "Next.js": {
    light: "/lang-icons/nextjs-black.svg",
    dark: "/lang-icons/next-js-logo-white.webp",
  },
  React: {
    light: "/lang-icons/react.svg",
    dark: "/lang-icons/react.svg",
  },
  MongoDB: {
    light: "/lang-icons/mongodb.svg",
    dark: "/lang-icons/mongodb.svg",
  },
  Node: {
    light: "/lang-icons/node-logo.svg",
    dark: "/lang-icons/node-logo.svg",
  },
  "Tailwind CSS": {
    light: "/lang-icons/tailwind.svg",
    dark: "/lang-icons/tailwind.svg",
  },
  Neon: {
    light: "/lang-icons/neon-dark.svg",
    dark: "/lang-icons/neon-light.svg",
  },
  Cloudinary: {
    light: "/lang-icons/cloudinary.png",
    dark: "/lang-icons/cloudinary.png",
  },
  // Add more technologies as needed
};

export const useLogo = () => {
  const { theme } = useTheme();

  const getLogo = (techName: string): string => {
    const logoVariant = logoMapper[techName];

    if (!logoVariant) {
      console.warn(`Logo not found for technology: ${techName}`);
      return "";
    }

    return theme === "dark" ? logoVariant.dark : logoVariant.light;
  };

  return { getLogo };
};

Using the Custom Hook

Now, using the hook is much cleaner and more maintainable:

"use client";

import { useLogo } from "@/lib/logoMapper";
import Image from "next/image";

const SingleProjectPage = ({ params }: { params: Promise<{ slug: string }> }) => {
  const { getLogo } = useLogo();

  return (
    <div>
      {/* Your component JSX */}
      <Image
        src={getLogo(tech.name)}
        alt={`${tech.name} logo`}
        fill
        className="object-contain"
      />
    </div>
  );
};

Benefits of This Approach

1. Clean Code: No more repetitive conditional logic scattered throughout components.

2. Centralized Management: All logo mapping logic lives in one place, making it easy to maintain and update.

3. Error Handling: The hook includes built-in warning messages for missing logos, helping with debugging.

4. Type Safety: Full TypeScript support ensures you catch errors at compile time.

5. Reusability: Use the hook in any component that needs theme-aware logos.

6. Easy Extension: Adding new technologies is as simple as updating the logoMapper object.

Key Features

Automatic Theme Detection: The hook automatically detects the current theme and returns the appropriate logo
Fallback Handling: Returns an empty string and logs a warning for missing logos
Performance: Minimal overhead with efficient theme detection
Developer Experience: Simple API with just one function to remember

Conclusion

This custom hook solution transformed my codebase from repetitive, hard-to-maintain conditional logic to a clean, reusable system. It's a perfect example of how custom hooks can solve common React patterns and improve code quality.

The useLogo hook not only makes the code more readable but also ensures consistency across the entire application. When I need to add a new technology or update logo paths, I only need to modify the logoMapper object in one place.

Animate Like a Pro: Creating a Reusable MotionDiv Using Motion

Sushil — Mon, 16 Jun 2025 16:08:09 +0000

If you're working with animations in Next.js, you've probably found yourself writing the same Motion code over and over again. Let's solve that by creating a simple, reusable MotionDiv component that will save you time and keep your animations consistent.

What We're Building

We're going to create a wrapper component around Motion's motion.div that provides better TypeScript support and integrates seamlessly with our existing utilities. Here's the complete component:

'use client';

import { motion, HTMLMotionProps } from 'framer-motion';
import { cn } from '@/lib/utils';

interface MotionDivProps extends HTMLMotionProps<'div'> {
    className?: string;
}

const MotionDiv = ({ children, className, ...motionProps }: MotionDivProps) => {
    return (
        <motion.div className={cn(className)} {...motionProps}>
            {children}
        </motion.div>
    );
};

export default MotionDiv;

Step-by-Step Setup

1. Install Dependencies

First, make sure you have Motion installed in your Next.js project:

npm install motion

2. Create the Component

Create a new file components/ui/MotionDiv.tsx (or wherever you keep your components) and add the code above.

3. The 'use client' Directive

Since we're using Next.js with the App Router, we need the' use client' directive. This tells Next.js that this component should run on the client side.

4. TypeScript Interface

The MotionDivProps interface extends HTMLMotionProps<'div'>, which means our component gets all the props that motion.div accepts — including standard div props like className, animation props, and event handlers.

How to Use It

Once you've created the component, using it is straightforward:

Basic Fade-in Animation

<MotionDiv
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 0.5 }}
    className="p-4 bg-white rounded-lg shadow-lg"
>
    <h2>This content fades in</h2>
    <p>Much cleaner than writing motion.div everywhere!</p>
</MotionDiv>

Slide Animation

<MotionDiv
    initial={{ x: -50, opacity: 0 }}
    animate={{ x: 0, opacity: 1 }}
    className="notification-banner"
>
    New notification!
</MotionDiv>

Hover Effects

<MotionDiv
    whileHover={{ scale: 1.02 }}
    whileTap={{ scale: 0.98 }}
    className="card cursor-pointer"
>
    Interactive card content
</MotionDiv>

Why Make It Reusable?

1. Less Repetitive Code

Instead of importing motion and writing motion.div throughout your app, you just import and use MotionDiv. It might seem small, but it adds up across a large project.

2. Consistent Animations

When your team uses the same component, you naturally end up with more consistent animation patterns. No more wondering why some elements animate differently than others.

3. Better TypeScript Experience

You get full TypeScript support with autocompletion for all Framer Motion props. If you make a typo in an animation property, TypeScript will catch it.

4. Easy to Extend

Need to add default animations or custom presets later? You can modify this one component instead of hunting down every motion.div in your codebase.

5. Utility Integration

The cn function (usually from libraries like clsx or custom utility functions) handles className merging and conditional classes. This works great with Tailwind CSS or any CSS framework.

Real-World Example

Here's how you might use it in a typical Next.js 15 page:

// app/page.tsx
import MotionDiv from '@/components/ui/MotionDiv';

export default function HomePage() {
    return (
        <main className="container mx-auto px-4">
            <MotionDiv
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.6 }}
                className="text-center py-16"
            >
                <h1 className="text-4xl font-bold mb-4">Welcome to Our Site</h1>
                <p className="text-lg text-gray-600">
                    This hero section animates in smoothly
                </p>
            </MotionDiv>

            <MotionDiv
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.3, duration: 0.6 }}
                className="grid grid-cols-1 md:grid-cols-3 gap-6 py-12"
            >
                {/* Your content here */}
            </MotionDiv>
        </main>
    );
}

Taking It Further

Once you're comfortable with the basic MotionDiv, you can extend it with features like:

Animation presets: Add common animation patterns as props
Default values: Set up sensible defaults for common use cases
Conditional animations: Toggle animations based on user preferences
Stagger support: Built-in support for staggered animations

Wrapping Up

Creating a reusable MotionDiv component is a simple way to make your Next.js animations more maintainable and consistent. It takes just a few minutes to set up, but you'll appreciate the cleaner code and better developer experience every time you add animations to your app.

DEV Community: Sushil

reset() Inside onSubmit Only Half-Resets a React Hook Form. Here's What Stays Behind

Why it happens

What I ran

The fix

Composio 0.28 Stops Retrying Writes. I Counted the Requests to See What Actually Changed

What I ran

Tool execution already went out once

Where 0.28 does change things

The raw client also had breaking changes

What to do about it

AI SDK 7.0.160 Started Enforcing dataPartSchemas. Your Loading States Might Now Throw

What changed

What I ran

The one that'll bite: progressive updates

The fix

References

October 2026 for React and AI Devs: Next.js 16.4, TypeScript 7.1 Beta, a Big TanStack Month, Convex 1.47 to 1.49

Next.js

React

TypeScript

TanStack

Convex

AI SDKs and agent tooling

What I'd do this week

Next.js 16: Fixing "cookies() can't be read inside 'use cache'" (and Caching Public Data Without It)

What you'll learn

Prerequisites and versions

Background: why the rule exists

Reproducing the error

The fix, in four patterns

Pattern 1: Public data uses a client that never touches cookies

Pattern 2: Read the cookie outside and pass the value in

Pattern 3: Per-user data stays uncached, inside Suspense

Pattern 4: 'use cache: private' when you can't refactor

Choosing a pattern

Common mistakes and troubleshooting

Limitations and alternatives

Conclusion

References

I Have Finally Launched my Template⚡⚡

The goal was simple:

✨ How to Create SVGs in Figma and Animate Them Using Motion 🚀

Let’s jump right in.

End Result:

Building Krome — My Clean, Modern AI Agent Template for Next.js

The Vision: Clean, Modern, and Premium

Under the Hood

Current Status: Refining the Details

Building a Features Bento Grid for My First UI Template

Design Goals

🚧 Still in Progress

How Simple Animations Can Make a Big Impact on Your Website

🎥 Live Demo

🔧 What’s Inside the Smooth Reveal Component?

🧠 Final Thoughts

Building a Custom Hook for Theme-Aware Logo Mapping in Next.js

Building a Custom Hook for Theme-Aware Logo Management in React

The Challenge: Professional UI/UX with Theme Support

The Solution: Logo Mapping Object

The Problem: Repetitive Theme Logic

The Solution: Custom useLogo Hook

Using the Custom Hook

Benefits of This Approach

Key Features

Conclusion

Animate Like a Pro: Creating a Reusable MotionDiv Using Motion

What We're Building

Step-by-Step Setup

1. Install Dependencies

2. Create the Component

3. The 'use client' Directive

4. TypeScript Interface

How to Use It

Basic Fade-in Animation

Slide Animation

Hover Effects

Why Make It Reusable?

1. Less Repetitive Code

2. Consistent Animations

Pattern 4: `'use cache: private'` when you can't refactor