导航配置

NEXTDEVKIT 提供了一个灵活的导航系统，支持多级菜单、国际化和图标集成。导航配置位于 src/config/navigation.ts。

📁 导航结构

导航系统支持带图标和描述的分层菜单结构：

src/config/navigation.ts

import {
  Box,
  Cpu,
  Eye,
  Globe,
  Palette,
  Rocket,
  Search,
  Shield,
} from "lucide-react";
import { useTranslations } from "next-intl";

export function getNavItems(): NavItem[] {
  const t = useTranslations("navigation");

  return [
    {
      id: 1,
      label: t("products.label"),
      subMenus: [
        {
          title: t("products.dxPlatform.title"),
          items: [
            {
              label: t("products.dxPlatform.previews.label"),
              description: t("products.dxPlatform.previews.description"),
              icon: Cpu,
              link: "/products/previews",
            },
            {
              label: t("products.dxPlatform.ai.label"),
              description: t("products.dxPlatform.ai.description"),
              icon: Search,
              link: "/products/ai",
            },
          ],
        },
        {
          title: t("products.infrastructure.title"),
          items: [
            {
              label: t("products.infrastructure.rendering.label"),
              description: t("products.infrastructure.rendering.description"),
              icon: Globe,
              link: "/products/rendering",
            },
            {
              label: t("products.infrastructure.observability.label"),
              description: t(
                "products.infrastructure.observability.description",
              ),
              icon: Eye,
              link: "/products/observability",
            },
            {
              label: t("products.infrastructure.security.label"),
              description: t("products.infrastructure.security.description"),
              icon: Shield,
              link: "/products/security",
            },
          ],
        },
        {
          title: t("products.openSource.title"),
          items: [
            {
              label: t("products.openSource.nextjs.label"),
              description: t("products.openSource.nextjs.description"),
              icon: Rocket,
              link: "/products/nextjs",
            },
            {
              label: t("products.openSource.turborepo.label"),
              description: t("products.openSource.turborepo.description"),
              icon: Box,
              link: "/products/turborepo",
            },
            {
              label: t("products.openSource.aiSdk.label"),
              description: t("products.openSource.aiSdk.description"),
              icon: Palette,
              link: "/products/ai-sdk",
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: t("solutions.label"),
      subMenus: [
        {
          title: t("solutions.useCases.title"),
          items: [
            {
              label: t("solutions.useCases.aiApps.label"),
              description: t("solutions.useCases.aiApps.description"),
              icon: Cpu,
              link: "/solutions/ai-apps",
            },
            {
              label: t("solutions.useCases.commerce.label"),
              description: t("solutions.useCases.commerce.description"),
              icon: Box,
              link: "/solutions/commerce",
            },
            {
              label: t("solutions.useCases.marketing.label"),
              description: t("solutions.useCases.marketing.description"),
              icon: Rocket,
              link: "/solutions/marketing",
            },
            {
              label: t("solutions.useCases.multiTenant.label"),
              description: t("solutions.useCases.multiTenant.description"),
              icon: Globe,
              link: "/solutions/multi-tenant",
            },
            {
              label: t("solutions.useCases.webApps.label"),
              description: t("solutions.useCases.webApps.description"),
              icon: Search,
              link: "/solutions/web-apps",
            },
          ],
        },
        {
          title: t("solutions.users.title"),
          items: [
            {
              label: t("solutions.users.platformEngineers.label"),
              description: t("solutions.users.platformEngineers.description"),
              icon: Cpu,
              link: "/solutions/platform-engineers",
            },
            {
              label: t("solutions.users.designEngineers.label"),
              description: t("solutions.users.designEngineers.description"),
              icon: Palette,
              link: "/solutions/design-engineers",
            },
          ],
        },
      ],
    },
    {
      id: 3,
      label: t("blog.label"),
      link: "/blog",
    },
    {
      id: 4,
      label: t("docs.label"),
      link: "/docs",
    },
    {
      id: 5,
      label: t("pricing.label"),
      link: "/#pricing",
    },
  ];
}

export interface NavSubItem {
  label: string;
  description: string;
  icon: React.ElementType;
  link: string;
}

export interface NavSubMenu {
  title: string;
  items: NavSubItem[];
}

export interface NavItem {
  id: number;
  label: string;
  link?: string;
  subMenus?: NavSubMenu[];
}

🔧 导航项类型

NavItem 结构

属性	类型	描述
`id`	`number`	导航项的唯一标识符
`label`	`string`	导航项的显示文本
`link`	`string` (可选)	简单导航项的直接链接
`subMenus`	`NavSubMenu[]` (可选)	子菜单组数组

NavSubMenu 结构

属性	类型	描述
`title`	`string`	子菜单组的标题
`items`	`NavSubItem[]`	此子菜单组中的项目数组

NavSubItem 结构

属性	类型	描述
`label`	`string`	子菜单项的显示文本
`description`	`string`	子菜单项的描述文本
`icon`	`React.ElementType`	Lucide React 图标组件
`link`	`string`	子菜单项的URL或路径

🎯 导航示例

简单导航项

{
  id: 3,
  label: t("blog.label"),
  link: "/blog",
},
{
  id: 4,
  label: t("docs.label"),
  link: "/docs",
},
{
  id: 5,
  label: t("pricing.label"),
  link: "/#pricing",
}

带子菜单的多级导航

{
  id: 1,
  label: t("products.label"),
  subMenus: [
    {
      title: t("products.dxPlatform.title"),
      items: [
        {
          label: t("products.dxPlatform.previews.label"),
          description: t("products.dxPlatform.previews.description"),
          icon: Cpu,
          link: "/products/previews",
        },
        {
          label: t("products.dxPlatform.ai.label"),
          description: t("products.dxPlatform.ai.description"),
          icon: Search,
          link: "/products/ai",
        },
      ],
    },
    {
      title: t("products.infrastructure.title"),
      items: [
        {
          label: t("products.infrastructure.rendering.label"),
          description: t("products.infrastructure.rendering.description"),
          icon: Globe,
          link: "/products/rendering",
        },
        {
          label: t("products.infrastructure.observability.label"),
          description: t("products.infrastructure.observability.description"),
          icon: Eye,
          link: "/products/observability",
        },
        {
          label: t("products.infrastructure.security.label"),
          description: t("products.infrastructure.security.description"),
          icon: Shield,
          link: "/products/security",
        },
      ],
    },
  ],
}

🌍 国际化支持

所有导航项都通过翻译系统支持国际化：

// messages/en.json中的导航翻译
{
  "navigation": {
    "products": {
      "label": "产品",
      "dxPlatform": {
        "title": "DX 平台",
        // ... 更多项目
      }
    },
    "blog": {
      "label": "博客"
    },
    "docs": {
      "label": "文档"
    },
    "pricing": {
      "label": "定价"
    }
  }
}

On this page