ナビの情報を外部からMAPで読み込む

typescriptの場合は型定義も必要

//types/index.d.ts

// marketing.tsの型定義
export type NavItem = {
  title: string;
  href: string;
  disabled?: boolean;
};
//上記の型定義を別名で使用する
export type MarketingConfig = {
  mainNav: NavItem[];
};

// marketing.ts
import { MarketingConfig } from "@/types";

export const marketingConfig: MarketingConfig = {
  // mainNav(大元はNavItem)
  mainNav: [
    {
      title: "特徴",
      href: "#features",
    },
    {
      title: "ブログ",
      href: "/blog",
    },
    {
      title: "価格",
      href: "/pricing",
    },
  ],
};

// main-nav.tsx(ここでナビ情報を呼び出す）

import { NavItem } from "@/types";
import Link from "next/link";
import { ReactNode } from "react";

interface MainNavProps {
  items?: NavItem[];
  children?: ReactNode;
}

export default function MainNav({ items }: MainNavProps) {
  return (
    <>
        <nav>
          {items?.map((item, index) => (
            <Link
              key={index}
              href={item.href}
            >
              {item.title}
            </Link>
          ))}
        </nav>
    </>
  );
}