route.ts

export const ROUTES = {
  // トップページ
  HOME: '/',

  // 静的ページ
  ABOUT: '/about',
  CONTACT: '/contact',
  PRIVACY_POLICY: '/privacy-policy',

  // ニュース（一覧 + 動的詳細ページ）
  NEWS: {
    INDEX: '/news',
    DETAIL: (id: string) => `/news/${id}` as const,
    CATEGORY: (category: string) => `/news/category/${category}` as const,
  },

  // ブログ（一覧 + 動的詳細ページ）
  BLOG: {
    INDEX: '/blog',
    DETAIL: (slug: string) => `/blog/${slug}` as const,
  },

  // 認証
  AUTH: {
    LOGIN: '/login',
    REGISTER: '/register',
  },
} as const;

sample.tsx

// ==============================================
// 使用例① ヘッダーナビゲーション（静的ページ）
// ==============================================

import Link from 'next/link';
import { ROUTES } from '@/lib/routes';

export function Header() {
  return (
    <header>
      <nav>
        <Link href={ROUTES.HOME}>ホーム</Link>
        <Link href={ROUTES.ABOUT}>会社概要</Link>
        <Link href={ROUTES.NEWS.INDEX}>ニュース</Link>
        <Link href={ROUTES.BLOG.INDEX}>ブログ</Link>
        <Link href={ROUTES.CONTACT}>お問い合わせ</Link>
      </nav>
    </header>
  );
}

// ==============================================
// 使用例② ニュース一覧ページ（microCMS連携）
// app/news/page.tsx を想定
// ==============================================

import Link from 'next/link';
import { ROUTES } from '@/lib/routes';

// microCMS の型定義
type NewsItem = {
  id: string;
  title: string;
  category: { id: string; name: string };
  publishedAt: string;
};

// microCMS からニュース一覧を取得する想定
async function getNewsList(): Promise<NewsItem[]> {
  const res = await fetch(
    `https://your-service.microcms.io/api/v1/news`,
    {
      headers: { 'X-MICROCMS-API-KEY': process.env.MICROCMS_API_KEY! },
      next: { revalidate: 60 },
    }
  );
  const data = await res.json();
  return data.contents;
}

export default async function NewsListPage() {
  const newsList = await getNewsList();

  return (
    <div>
      <h1>ニュース一覧</h1>

      {/* カテゴリリンク */}
      <nav>
        <Link href={ROUTES.NEWS.CATEGORY('press-release')}>
          プレスリリース
        </Link>
        <Link href={ROUTES.NEWS.CATEGORY('event')}>
          イベント
        </Link>
      </nav>

      {/* ニュース一覧 */}
      <ul>
        {newsList.map((news) => (
          <li key={news.id}>
            <Link href={ROUTES.NEWS.DETAIL(news.id)}>
              <time>{news.publishedAt}</time>
              <span>{news.title}</span>
            </Link>
          </li>
        ))}
      </ul>

      {/* トップに戻る */}
      <Link href={ROUTES.HOME}>トップページへ戻る</Link>
    </div>
  );
}

// ==============================================
// 使用例③ ニュース詳細ページ
// app/news/[id]/page.tsx を想定
// ==============================================

import Link from 'next/link';
import { ROUTES } from '@/lib/routes';

type Props = {
  params: Promise<{ id: string }>;
};

export default async function NewsDetailPage({ params }: Props) {
  const { id } = await params;

  // microCMS から記事を取得する想定
  const res = await fetch(
    `https://your-service.microcms.io/api/v1/news/${id}`,
    {
      headers: { 'X-MICROCMS-API-KEY': process.env.MICROCMS_API_KEY! },
      next: { revalidate: 60 },
    }
  );
  const article = await res.json();

  return (
    <article>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: article.content }} />

      {/* 一覧へ戻る */}
      <Link href={ROUTES.NEWS.INDEX}>ニュース一覧へ戻る</Link>
    </article>
  );
}