Enable Next.js Typed routes

docs/app/_components/CommandItems.tsx

@@ -3,6 +3,7 @@ import { iterateTokens } from '@/lib/utils';
 import { ruiTheme } from '@/theme';
 import { Icons, cn } from '@/ui';
 import { Command, CommandGroup, useCommandState } from 'cmdk';
+import type { Route } from 'next';
 import {
   Dispatch,
   ReactNode,
@@ -19,6 +20,10 @@ import { ExternalLink } from '@marigold/icons';
 import { NestedStringObject } from '@marigold/system';
 import { Hotkey } from './SiteMenu';
 
+type RouteWithoutSlash<T extends string = Route> = T extends `/${infer Rest}`
+  ? Rest
+  : T;
+
 interface CopyItemProps {
   children: ReactNode;
   className?: string;
@@ -60,8 +65,17 @@ const useGoto = (
 ) => {
   const router = useRouter();
 
-  const goto = ({ slug, hash = '' }: { slug: string; hash?: string }) => {
-    const url = `/${slug}${hash}`;
+  const goto = ({
+    slug,
+    hash,
+  }: {
+    slug: RouteWithoutSlash;
+    hash?: `#${string}`;
+  }) => {
+    let url: Route = `/${slug}`;
+    if (hash && hash.startsWith('#')) {
+      url = `/${slug}${hash}`;
+    }
 
     router.push(url);
     setOpen(false);
@@ -195,7 +209,7 @@ export const PagesItem = ({
             key={page.slug}
             value={page.slug}
             keywords={[page.title]}
-            onSelect={() => goto({ slug: page.slug })}
+            onSelect={() => goto({ slug: page.slug as RouteWithoutSlash })}
           >
             <Inline space={4} alignY="center">
               {page.title}
@@ -215,7 +229,10 @@ export const PagesItem = ({
                       classNames.item
                     )}
                     onSelect={() =>
-                      goto({ slug: page.slug, hash: `#${sub.slug}` })
+                      goto({
+                        slug: page.slug as RouteWithoutSlash,
+                        hash: `#${sub.slug}`,
+                      })
                     }
                   >
                     {sub.text}
@@ -241,7 +258,7 @@ export const InternalPage = ({ classNames, setOpen }: ChangeOpenItemProps) => {
               className={classNames.item}
               key={name}
               value={slug}
-              onSelect={() => goto({ slug })}
+              onSelect={() => goto({ slug: slug as RouteWithoutSlash })}
             >
               {name}
             </Command.Item>

docs/app/_components/SiteNavigation.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { Route } from 'next';
 import { usePathname } from 'next/navigation';
 import { NavLink } from '@/ui/navigation/NavLink';
 import { useNavigation } from '@/ui/navigation/Navigation';
@@ -21,7 +22,7 @@ export const SiteNavigation = () => {
           className="text-sm font-medium lg:px-1"
           key={index}
           current={pathname.startsWith(`/${slug}`)}
-          href={link?.href ?? `/${slug}`}
+          href={(link?.href ?? `/${slug}`) as Route}
         >
           {name}
         </NavLink>

docs/lib/config.ts

@@ -146,4 +146,4 @@ export const internal = [
       },
     ],
   },
-];
+] as const;

docs/next.config.js

@@ -4,6 +4,7 @@ const pkg = require('./package.json');
 const nextConfig = {
   reactStrictMode: false,
   distDir: '.next',
+  typedRoutes: true,
   transpilePackages: ['@marigold/components', '@marigold/system'],
   env: {
     version: pkg.version,

docs/ui/TeaserCard.tsx

@@ -1,4 +1,5 @@
 import { Card, Stack, Tiles } from '@/ui';
+import type { Route } from 'next';
 import type { ReactElement } from 'react';
 import Link from 'next/link';
 
@@ -10,7 +11,7 @@ export interface TeaserCardProps {
 }
 
 export const TeaserCard = ({ href, icon, title, caption }: TeaserCardProps) => (
-  <Link className="flex no-underline" href={href}>
+  <Link className="flex no-underline" href={href as Route}>
     <Card variant="hovering">
       <Stack space={4}>
         <div className="bg-bg-muted grid size-12 place-items-center rounded-full p-2">

docs/ui/layout/SectionNavigation.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { Route } from 'next';
 import { usePathname } from 'next/navigation';
 import { Badge } from '@marigold/components';
 import { NavLink } from '@/ui/navigation/NavLink';
@@ -25,7 +26,7 @@ export const SectionNavigation = () => {
             className="flex items-center gap-4"
             key={href}
             current={pathname === href}
-            href={href}
+            href={href as Route}
           >
             {name}
             {badge && <Badge variant="dark">{badge}</Badge>}
@@ -42,7 +43,7 @@ export const SectionNavigation = () => {
                   <NavLink
                     className="flex items-center gap-4"
                     current={pathname === href}
-                    href={href}
+                    href={href as Route}
                   >
                     {name}
                     {badge && <Badge variant="dark">{badge}</Badge>}

docs/ui/navigation/NavLink.tsx

@@ -1,3 +1,4 @@
+import type { Route } from 'next';
 import type { ReactNode } from 'react';
 import Link, { LinkProps } from 'next/link';
 import { type VariantProps, cn, cva } from '@marigold/system';
@@ -42,7 +43,9 @@ const styles = cva([], {
   },
 });
 
-export interface NavLinkProps extends VariantProps<typeof styles>, LinkProps {
+export interface NavLinkProps
+  extends VariantProps<typeof styles>,
+    LinkProps<Route> {
   className: string;
   children: ReactNode;
 }

docs/ui/navigation/Navigation.tsx

@@ -3,6 +3,7 @@
 import { siteConfig } from '@/lib/config';
 import { Badge } from '@/ui';
 import { ContentPage, allContentPages } from 'contentlayer/generated';
+import type { Route } from 'next';
 import { usePathname } from 'next/navigation';
 import { NavLink } from './NavLink';
 
@@ -87,7 +88,7 @@ export const Navigation = ({ onClick }: NavigationProps) => {
                 className="flex items-center gap-4"
                 key={href}
                 current={pathname === href}
-                href={href}
+                href={href as Route}
                 onClick={onClick}
               >
                 {name}
@@ -107,7 +108,7 @@ export const Navigation = ({ onClick }: NavigationProps) => {
                       <NavLink
                         className="flex items-center gap-4"
                         current={pathname === href}
-                        href={href}
+                        href={href as Route}
                         onClick={onClick}
                       >
                         {name}