@djangocfg/layouts 2.1.308 → 2.1.310

package/README.md

@@ -139,11 +139,16 @@ Wraps `BaseApp` and picks **admin → private → public** layout by path (`matc
 
 ```tsx
 import { useLocaleSwitcher } from '@djangocfg/nextjs/i18n/client';
+import { routing } from '@djangocfg/nextjs/i18n/routing';
 
 const { locale, locales, changeLocale } = useLocaleSwitcher();
-<AppLayout i18n={{ locale, locales, onLocaleChange: changeLocale }}>{children}</AppLayout>
+<AppLayout i18n={{ locale, locales, onLocaleChange: changeLocale, routing }}>
+  {children}
+</AppLayout>
 ```
 
+`i18n.routing` is the object returned by `defineRouting()` (`next-intl/routing`). When passed, `BaseApp` builds a locale-aware `Link` adapter from it and mounts a `LinkProvider`, so every `<Link>` rendered inside layouts (navbar, footer, drawer, …) keeps the active locale prefix on click. Drop it for default-locale-only apps — raw `next/link` works fine.
+
 ---
 
 ## Monitor & debug

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.308",
+  "version": "2.1.310",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,19 +74,20 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.308",
-    "@djangocfg/centrifugo": "^2.1.308",
-    "@djangocfg/debuger": "^2.1.308",
-    "@djangocfg/i18n": "^2.1.308",
-    "@djangocfg/monitor": "^2.1.308",
-    "@djangocfg/ui-core": "^2.1.308",
-    "@djangocfg/ui-nextjs": "^2.1.308",
-    "@djangocfg/ui-tools": "^2.1.308",
+    "@djangocfg/api": "^2.1.310",
+    "@djangocfg/centrifugo": "^2.1.310",
+    "@djangocfg/debuger": "^2.1.310",
+    "@djangocfg/i18n": "^2.1.310",
+    "@djangocfg/monitor": "^2.1.310",
+    "@djangocfg/ui-core": "^2.1.310",
+    "@djangocfg/ui-nextjs": "^2.1.310",
+    "@djangocfg/ui-tools": "^2.1.310",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "next": "^16.2.2",
+    "next-intl": "^4.9.1",
     "p-retry": "^7.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -110,19 +111,20 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.308",
-    "@djangocfg/centrifugo": "^2.1.308",
-    "@djangocfg/debuger": "^2.1.308",
-    "@djangocfg/i18n": "^2.1.308",
-    "@djangocfg/monitor": "^2.1.308",
-    "@djangocfg/typescript-config": "^2.1.308",
-    "@djangocfg/ui-core": "^2.1.308",
-    "@djangocfg/ui-nextjs": "^2.1.308",
-    "@djangocfg/ui-tools": "^2.1.308",
+    "@djangocfg/api": "^2.1.310",
+    "@djangocfg/centrifugo": "^2.1.310",
+    "@djangocfg/debuger": "^2.1.310",
+    "@djangocfg/i18n": "^2.1.310",
+    "@djangocfg/monitor": "^2.1.310",
+    "@djangocfg/typescript-config": "^2.1.310",
+    "@djangocfg/ui-core": "^2.1.310",
+    "@djangocfg/ui-nextjs": "^2.1.310",
+    "@djangocfg/ui-tools": "^2.1.310",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "eslint": "^9.37.0",
+    "next-intl": "^4.9.1",
     "typescript": "^5.9.3"
   },
   "publishConfig": {

package/src/layouts/AppLayout/BaseApp.tsx

@@ -49,6 +49,7 @@ import { CentrifugoProvider } from '@djangocfg/centrifugo';
 import { Toaster, TooltipProvider } from '@djangocfg/ui-core/components';
 import { DialogProvider } from '@djangocfg/ui-core/lib/dialog-service';
 import { NextRouterAdapter, NextLinkProvider } from '@djangocfg/ui-core/adapters/nextjs';
+import { NextIntlLinkBridge } from './NextIntlLinkBridge';
 import { ThemeProvider } from '@djangocfg/ui-nextjs/theme';
 import { ThemeStyleBridge } from '../../theme/ThemeStyleBridge';
 import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
@@ -158,7 +159,13 @@ export function BaseApp({
                     onMonitorCapture={(d) => FrontendMonitor.capture(errorDetailToMonitorEvent(d))}
                   >
                     <MonitorProvider {...monitorConfig} />
-                    <LayoutI18nProvider value={i18n}>{children}</LayoutI18nProvider>
+                    <LayoutI18nProvider value={i18n}>
+                      {i18n?.routing ? (
+                        <NextIntlLinkBridge routing={i18n.routing}>{children}</NextIntlLinkBridge>
+                      ) : (
+                        children
+                      )}
+                    </LayoutI18nProvider>
                     <NextTopLoader
                       color="hsl(var(--primary))"
                       height={3}

package/src/layouts/AppLayout/NextIntlLinkBridge.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+/**
+ * NextIntlLinkBridge
+ *
+ * Bridges next-intl's locale-aware `Link` (built from a `routing` object via
+ * `createNavigation()`) into our framework-agnostic `LinkProvider`. Mounted
+ * by `BaseApp` only when the consumer passes `i18n.routing`.
+ *
+ * Why this lives in @djangocfg/layouts (not @djangocfg/ui-core):
+ *   ui-core stays free of next-intl. Layouts already depend on next + nextjs
+ *   plumbing, so taking a peer on next-intl here is honest about scope and
+ *   keeps consumer apps from having to wire `createNavigation` themselves.
+ */
+
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { createNavigation } from 'next-intl/navigation';
+
+import {
+  LinkProvider,
+  type LinkComponent,
+  type LinkComponentProps,
+} from '@djangocfg/ui-core/components';
+
+import type { NextIntlRouting } from '../types/layout.types';
+
+export interface NextIntlLinkBridgeProps {
+  /** The `routing` object returned by `defineRouting()` from `next-intl/routing`. */
+  routing: NextIntlRouting;
+  children: ReactNode;
+}
+
+export function NextIntlLinkBridge({ routing, children }: NextIntlLinkBridgeProps) {
+  const adapter = useMemo<LinkComponent>(() => {
+    // The `createNavigation` overload signature splits between localized and
+    // shared routing variants and TS can't narrow either way through our
+    // opaque `NextIntlRouting` alias — cast to satisfy the localized branch
+    // and rely on next-intl to handle both at runtime.
+    const { Link: IntlLink } = createNavigation(
+      routing as unknown as Parameters<typeof createNavigation>[0],
+    );
+    return forwardRef<HTMLAnchorElement, LinkComponentProps>(
+      function NextIntlLinkAdapter(
+        { href, replace, scroll, prefetch, children: kids, ...rest },
+        ref,
+      ) {
+        // next-intl's Link accepts the same props we expose. The cast is safe
+        // because LinkComponentProps is a structural subset.
+        const Link = IntlLink as unknown as LinkComponent;
+        return (
+          <Link
+            href={href}
+            replace={replace}
+            scroll={scroll}
+            prefetch={prefetch}
+            ref={ref}
+            {...rest}
+          >
+            {kids}
+          </Link>
+        );
+      },
+    );
+  }, [routing]);
+
+  return <LinkProvider value={adapter}>{children}</LinkProvider>;
+}

package/src/layouts/PublicLayout/README.md

@@ -29,20 +29,11 @@ All internal anchors (navbar, footer, mobile drawer) use `<Link>` from
 `@djangocfg/ui-core/components`. In Next.js apps it renders through `next/link`
 automatically (via `NextLinkProvider`, which `BaseApp` mounts for you).
 
-For a locale-aware Link (e.g. `next-intl`'s `createNavigation().Link`), swap
-the underlying component by mounting your own `LinkProvider` from
-`@djangocfg/ui-core/components` higher in the tree:
-
-```tsx
-import { LinkProvider } from '@djangocfg/ui-core/components';
-import { Link as I18nLink } from '@/i18n/navigation';
-
-<LinkProvider value={I18nLink}>
-  <PublicLayout navbar={<FloatingNavbar config={…} />} footer={…}>
-    {children}
-  </PublicLayout>
-</LinkProvider>
-```
+For multi-locale apps (`next-intl` with `localePrefix: 'always' | 'as-needed'`)
+pass `i18n.routing` to `AppLayout` / `BaseApp`. The bridge inside `BaseApp`
+calls `createNavigation(routing)` and swaps the default `next/link` adapter
+for the locale-aware one — every navbar / footer / drawer link keeps the
+active locale prefix on click. See `@djangocfg/layouts` README → **i18n**.
 
 ## Navbar variants
 

package/src/layouts/types/layout.types.ts

@@ -13,6 +13,15 @@ import type { AnalyticsConfig } from '../../snippets/Analytics/types';
 import type { PwaInstallConfig } from '@djangocfg/ui-nextjs/pwa';
 import type { ErrorBoundaryConfig, ErrorTrackingConfig } from '../../components/errors/types';
 
+/**
+ * Opaque alias for the `routing` object returned by `defineRouting()` from
+ * `next-intl/routing`. Typed as `unknown` so consumer apps can pass shared
+ * (no `pathnames`) or localized routing without fighting next-intl's
+ * conditional generics. The bridge inside `BaseApp` casts it back when it
+ * calls `createNavigation(routing)`.
+ */
+export type NextIntlRouting = object & { __nextIntlRouting?: never };
+
 // Import local provider configs
 import type { ThemeConfig, SWRConfigOptions, CentrifugoConfig } from './providers.types';
 import type { MonitorConfig } from '@djangocfg/monitor';
@@ -117,6 +126,14 @@ export interface I18nLayoutConfig {
   brand?: I18nBrandConfig;
   /** Custom UI strings for the locale-switcher dialog. */
   dialogLabels?: I18nDialogLabels;
+  /**
+   * Optional `routing` object from `next-intl`'s `defineRouting()`. When
+   * passed, `BaseApp` builds a locale-aware Link adapter from it and mounts
+   * a `LinkProvider` so every `<Link>` rendered inside layouts keeps the
+   * active locale prefix on click. Without it, non-default-locale users get
+   * sent back to the default locale on every navbar / footer click.
+   */
+  routing?: NextIntlRouting;
 }
 
 // ============================================================================