🤖 Next.js MetadataRoute 정복: Robots, Sitemap, Manifest까지 한 번에

import type { MetadataRoute } from "next"; 

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [{ userAgent: '*', allow: '/' }],
    sitemap: 'https://pyomin.com/sitemap.xml'
  }
}

import type { MetadataRoute } from "next";
import { getApiBase } from "@/lib/api/apiBases";

export const revalidate = 86400;

const SITE_URL = 'https://pyomin.com';

const staticPagesInfo = [
  { path: '/', changeFrequency: 'weekly', priority: 1.0, lastModified: undefined },
  { path: '/posts', changeFrequency: 'weekly', priority: 0.7, lastModified: undefined },
  { path: '/about', changeFrequency: 'yearly', priority: 0.5, lastModified: '2025-09-05T00:00:00.000Z' },
  { path: '/guestbooks', changeFrequency: 'yearly', priority: 0.5, lastModified: '2025-07-01T00:00:00.000Z' },
] as const;

type Sitemap = { key: string; lastModified: string };
type SitemapResponse<T> = { sitemap: T[] };

async function fetchPostSitemap(): Promise<Sitemap[]> {
  const res = await fetch(`${getApiBase()}/posts/sitemap`);
  if (!res.ok) throw new Error('posts/sitemap 실패');
  
  const json = (await res.json()) as SitemapResponse<Sitemap>;
  return json.sitemap ?? [];
}

async function fetchCategorySitemap(): Promise<Sitemap[]> {
  const res = await fetch(`${getApiBase()}/categories/sitemap`);
  if (!res.ok) return [];
  
  const json = (await res.json()) as SitemapResponse<Sitemap>;
  return json.sitemap ?? [];
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const [posts, categories] = await Promise.all([fetchPostSitemap(), fetchCategorySitemap()]);
  
  const latestPostDateISO = posts.at(0)?.lastModified ?? new Date().toISOString();
  
  const staticPages: MetadataRoute.Sitemap = staticPagesInfo.map(({ path, lastModified, changeFrequency, priority }) => ({
    url: `${SITE_URL}${path}`,
    lastModified: lastModified ?? latestPostDateISO,
    changeFrequency,
    priority
  }));
  
  const categoryPages: MetadataRoute.Sitemap = categories.map((category) => ({
    url: `${SITE_URL}/posts/category/${encodeURIComponent(category.key)}`,
    lastModified: category.lastModified,
    changeFrequency: 'monthly',
    priority: 0.6,
  }));
  
  const postPages: MetadataRoute.Sitemap = posts.map((post) => ({
    url: `${SITE_URL}/posts/${encodeURIComponent(post.key)}`,
    lastModified: post.lastModified,
    changeFrequency: 'monthly',
    priority: 0.8,
  }));
  
  return [...staticPages, ...categoryPages, ...postPages];
}

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    // 앱의 전체 이름
    name: 'BlueCool Blog',
    
    // 앱의 짧은 이름
    short_name: 'BlueCool',
    
    // 앱 설명
    description: 'BlueCool 블로그의 글들을 빠르게 탐색해보세요!',
    
    // 앱 고유 식별자
    id: '/',
    
    // 앱이 시작되는 기본 URL
    start_url: '/',
    
    // 앱이 접근 가능한 URL 범위
    scope: '/',
    
    // 앱 실행 방식
    display: 'standalone',
    
    // display가 지원되지 않을 경우 우선순위 대안
    display_override: ['standalone', 'browser'],
    
    // 앱 로딩 시 배경 색
    background_color: '#E6F7FB',
    
    // 브라우저 툴바 및 UI의 테마 색상
    theme_color: '#145B6F',
    
    // 화면 방향
    orientation: 'any',
    
    // 텍스트 방향
    dir: 'ltr',
    
    // 기본 언어 설정
    lang: 'ko-KR',
    
    // 앱의 카테고리
    categories: ['programming', 'blog', 'technology', 'education'],
    
    // 홈화면 아이콘들
    icons: [
      { src: '/images/manifest/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
      { src: '/images/manifest/icon-192-maskable.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
      { src: '/images/manifest/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
      { src: '/images/manifest/icon-512-maskable.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
      
      { src: '/images/manifest/icon-256.png', sizes: '256x256', type: 'image/png' },
      { src: '/images/manifest/icon-384.png', sizes: '384x384', type: 'image/png' },
      
      { src: '/images/manifest/icon-32.png', sizes: '32x32', type: 'image/png' },
      { src: '/images/manifest/icon-16.png', sizes: '16x16', type: 'image/png' },
    ],
    
    // 앱 아이콘을 길게 눌렀을 때 나오는 단축 메뉴
    shortcuts: [
      { name: 'Posts', url: '/posts', description: '전체 글 목록' },
      { name: 'About', url: '/about', description: '소개' },
      { name: 'Guestbook', url: '/guestbooks', description: '방명록' },
    ],   
  };
}