Skip to content
Twilight React Playground
ثيم رائدaren

NextJsLinkAdapter

componentAdvanced

The link adapter for Next.js setups. It renders a plain anchor, not next/link, so a click loads a whole new page.

import { NextJsLinkAdapter } from '@salla.sa/twilight-theme-engine/nextjs';

In plain words

With TwilightProvider's client={{ framework: 'nextjs' }}, the engine's Link renders through NextJsLinkAdapter. Today that is an ordinary <a href>: a click asks the browser for a new page, without Next.js's client-side navigation or prefetching.

Signature

const NextJsLinkAdapter: React.ForwardRefExoticComponent<
  LinkProps & React.RefAttributes<HTMLAnchorElement>
>
// renders <a href={to ?? href ?? '/'}>; preload is ignored

Example

app/components/LegalLinks.tsx (Next.js)
import { NextJsLinkAdapter } from '@salla.sa/twilight-theme-engine/nextjs';

// No locale is added for you: pass the full path.
export function LegalLinks({ locale }: { locale: string }) {
  return (
    <nav>
      <NextJsLinkAdapter to={`/${locale}/privacy`}>Privacy</NextJsLinkAdapter>
      <NextJsLinkAdapter to={`/${locale}/terms`}>Terms</NextJsLinkAdapter>
    </nav>
  );
}

How it behaves

  • The href is to, else href, else /, exactly as given: no locale and no store segment are added.

  • With replace, a click is intercepted: history.replaceState changes the address and a popstate event is dispatched, with no page load. Whatever listens to popstate must render the new address.

  • Under client={{ framework: 'nextjs' }}, TwilightProvider pairs it with a navigate that assigns window.location (a full page load) and applies no page class.

Gotchas

  • Do not use it in a TanStack theme. Its href bypasses the router, so on localhost and the preview host it lacks the store segment the router adds, and every click reloads the whole page. Use Link from @salla.sa/twilight-theme-engine/components/common.

Related

TanStackLinkAdapter

The anchor behind the engine's Link under TanStack Router: it adds the current language to internal paths and passes intent preloading on.

Link

An anchor that moves between store pages without reloading, adding the language (and, on localhost or the preview host, the store) to the path.

LinkProvider

Tells the engine's Link which real anchor component to render; TwilightProvider supplies TanStack Router's, and tests can supply a plain one.

Source and docs