Refactor article metadata structure to use slugs instead of URLs, implement multilingual support, and enhance SEO metadata generation

- Updated article metadata files to replace `url` with `slug` for better routing and localization.
- Introduced language switching functionality in article headers.
- Added support for multiple languages in article metadata and sitemap generation.
- Created new components and utilities for handling localization and language detection.
- Implemented middleware for locale prefixing in routes.
- Enhanced category labels to support localization.
- Added tests for portfolio page metadata.
- Created robots.txt and sitemap.xml for improved SEO.

Author: echoja

.env.example

@@ -6,5 +6,5 @@ NEXT_PUBLIC_GTM_ID=G-xxxxxx
 NEXT_PUBLIC_UTTERANCES_REPO=owner/repo
 
 # base url
-BASE_URL=
+BASE_URL=http://localhost:3000
 NEXT_PUBLIC_BASE_URL=

AGENTS.md

@@ -13,7 +13,7 @@ This project is a Next.js 15 + TypeScript blog/site. Use the conventions below t
 ## Build, Test, and Development Commands
 - `pnpm i`: Install dependencies.
 - `pnpm dev`: Run Next dev server.
-- `pnpm build`: Production build + generate sitemap (`next-sitemap`).
+- `pnpm build`: Production build. Sitemap/robots via Next routes.
 - `pnpm start`: Start the built app.
 - `pnpm test` / `pnpm test:ci`: Run Vitest (happy‑dom env).
 - `pnpm lint` / `pnpm type-check`: Lint with ESLint and check types with `tsc`.
@@ -38,4 +38,3 @@ This project is a Next.js 15 + TypeScript blog/site. Use the conventions below t
 ## Security & Configuration
 - Copy `.env.example` → `.env` (managed with `direnv`). Never commit secrets.
 - Client‑exposed values must use `NEXT_PUBLIC_*` (e.g., `NEXT_PUBLIC_SITE_URL=https://example.com`).
-

next-seo.config.js

@@ -7,7 +7,7 @@
     "test": "vitest",
     "test:ci": "vitest run",
     "dev": "next dev",
-    "build": "next build && next-sitemap --config next-sitemap.config.js",
+    "build": "next build",
     "start": "next start",
     "analyze": "ANALYZE=true pnpm build",
     "lint": "eslint .",
@@ -61,7 +61,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "happy-dom": "^18.0.1",
     "knip": "^5.61.3",
-    "next-sitemap": "^4.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",

next-sitemap.config.js

@@ -1,18 +1,16 @@
 "use client";
 
 import type { ArticleItem } from "@modules/article/types";
-import { metadataBase } from "@modules/metadata/constants";
+import { getCategoryLabel } from "@modules/category";
 import dayjs from "dayjs";
 import { motion } from "motion/react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const listVariants = {
   hidden: { opacity: 0 },
   visible: {
     opacity: 1,
-    // transition: {
-    //   staggerChildren: 0.03,
-    // },
   },
 };
 
@@ -35,10 +33,20 @@ export function List({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function ListItem({ item }: { item: ArticleItem }) {
-  const { createdAt, summary, title, url, category } = item;
+export function ListItem({
+  item,
+  basePathname,
+}: {
+  item: ArticleItem;
+  basePathname: string;
+}) {
+  const { createdAt, summary, title, slug, category } = item;
 
-  const href = new URL(url, metadataBase).pathname;
+  const href = new URL(slug, basePathname).pathname;
+  const pathname = usePathname();
+  const firstSeg = (pathname.split("/")[1] ?? "") as "ko" | "en" | "";
+  const locale: "ko" | "en" =
+    firstSeg === "ko" || firstSeg === "en" ? firstSeg : "ko";
 
   return (
     <motion.li
@@ -55,7 +63,7 @@ export function ListItem({ item }: { item: ArticleItem }) {
         {category && (
           <>
             <span className="opacity-50"> | </span>
-            <span>{category}</span>
+            <span>{getCategoryLabel(category, locale)}</span>
           </>
         )}
       </div>

package.json

@@ -4,7 +4,7 @@ import dayjs from "dayjs";
 import i1 from "./i.png";
 
 export const title = "Node.js 스트림(stream) 개념을 익혀보자";
-export const url = "https://springfall.cc/article/2021-12/node-js-stream";
+const slug = "article/2021-12/node-js-stream";
 export const summary =
   "Stream 자료구조를 간단하게 익히고 Readable 클래스를 직접 확장하여 구현해봅니다";
 export const createdAt = dayjs("2021-12-07").toISOString();
@@ -20,7 +20,7 @@ export const item: ArticleItem = {
   imageAlt,
   summary,
   title,
-  url,
+  slug,
   category,
   tags: [],
 };

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 import i4 from "./i4.jpeg";
 
 export const title = "개발자로서 회사에 들어와서 만 1년이 되기 직전 느낀 점";
-export const url = "https://springfall.cc/article/2022-09/company";
+const slug = "article/2022-09/company";
 export const summary =
   "기록을 남겨두지 않으면 현재의 모습이 어디로부터 기원했는지를 알 방도가 없어집니다.";
 export const createdAt = dayjs("2022-09-01").toISOString();
@@ -18,6 +18,6 @@ export const item: ArticleItem = {
   imageAlt,
   summary,
   title,
-  url,
+  slug,
   tags: [],
 };

src/app/ListItem.tsx

@@ -4,7 +4,7 @@ import dayjs from "dayjs";
 import i1 from "./i1.jpeg";
 
 export const title = "[리뷰] 슬픔이여 안녕";
-export const url = "https://springfall.cc/article/2022-10/hello-sadness";
+const slug = "article/2022-10/hello-sadness";
 export const summary =
   "세상엔 다양한 세계가 있고, 화해할 수도 있지만 양립하지 못할 수도 있다. 그런 사실에 직면하는 것이 슬픔인 것 같다.";
 export const createdAt = dayjs("2022-10-02").toISOString();
@@ -20,7 +20,7 @@ export const item: ArticleItem = {
   imageAlt,
   summary,
   title,
-  url,
+  slug,
   category,
   tags: [],
 };