언어 처리, 메타데이터, 사이트맵 생성 로직 리팩터링, 최적화

next.config.mjs

@@ -40,9 +40,6 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  experimental: {
-    optimizePackageImports: ['react', 'react-dom'],
-  },
 };
 
 export default withBundleAnalyzer(withVanillaExtract(nextConfig));

schema.ts

@@ -51,7 +51,7 @@ export const articleSchema = defineSchema(() =>
     .transform((data) => ({ ...data, url: `/posts/${data.slug}` }))
     .transform(async (data, { meta }) => {
       if (!meta.mdast) return data;
-      const localThumbnailURL = await generateThumbnailURL(meta, data.title);
+      const localThumbnailURL = await generateThumbnailURL(meta, data.title, 'ko');
       const thumbnail: ThumbnailType = {
         local: localThumbnailURL,
       };
@@ -62,7 +62,7 @@ export const articleSchema = defineSchema(() =>
 export const enArticleMetadataSchema = defineSchema(() =>
   articleMetadataObject
     // transform을 거친 타입은 동기 함수일 경우 타입에 포함됨
-    .transform((data) => ({ ...data, url: `/en/posts/${data.slug}` })),
+    .transform((data) => ({ ...data, url: `/posts/${data.slug}` })),
 );
 
 export const enArticleSchema = defineSchema(() =>
@@ -74,8 +74,7 @@ export const enArticleSchema = defineSchema(() =>
       }),
       headingTree: headingTree(),
     })
-    // TODO: slug를 en-posts로 시작하는 것을 posts로 바꾸는 로직을 좀더 확장성 있게 추가하자
-    .transform((data) => ({ ...data, url: `/en/posts/${data.slug}` }))
+    .transform((data) => ({ ...data, url: `/posts/${data.slug}` }))
     .transform(async (data, { meta }) => {
       if (!meta.mdast) return data;
       const localThumbnailURL = await generateThumbnailURL(meta, data.title, 'en');

src/app/[lang]/about/content.ts

@@ -9,7 +9,7 @@ export const aboutContent = {
     links: [
       { name: '블로그', url: 'https://witch.work' },
       { name: 'GitHub', url: 'https://github.com/witch-factory' },
-      { name: '이메일', url: `mailto:${blogConfig.ko.email}` },
+      { name: '이메일', url: `mailto:${blogConfig.email}` },
       { name: '이력서', url: '/resume/kor' },
     ],
     introduction: {
@@ -51,7 +51,7 @@ export const aboutContent = {
     links: [
       { name: 'Blog', url: 'https://witch.work/en' },
       { name: 'GitHub', url: 'https://github.com/witch-factory' },
-      { name: 'Email', url: `mailto:${blogConfig.ko.email}` },
+      { name: 'Email', url: `mailto:${blogConfig.email}` },
       { name: 'Resume', url: '/resume/kor' },
     ],
     introduction: {

src/app/[lang]/api/language/route.ts

@@ -1,49 +1,28 @@
-import { headers } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
 
-import { blogConfig } from '@/config/blogConfig';
 import { i18n, Locale, LOCALE_COOKIE_NAME } from '@/types/i18n';
 
-function generateRedirectPath(pathname: string, selectedLocale: Locale) {
-  const pathSegments = pathname.split('/').filter(Boolean); // 경로를 '/'로 나누고 빈 값 제거
-  const currentLangIndex = i18n.locales.includes(pathSegments[0] as Locale) ? 0 : -1;
+export const dynamic = 'force-static';
 
-  // 경로에 언어가 없는 경우 추가
-  if (currentLangIndex === -1) {
-    return selectedLocale === i18n.defaultLocale ? pathname : `/${selectedLocale}${pathname}`;
-  }
-
-  pathSegments[currentLangIndex] = selectedLocale === i18n.defaultLocale ? '' : selectedLocale;
-  return `/${pathSegments.filter(Boolean).join('/')}`;
-}
-
-// api/language?locale=ko 등 locale 쿼리스트링을 통해 언어 변경
-export function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams;
-  const selectedLocale = searchParams.get('locale') as Locale | undefined;
+// /[lang]/api/language의 lang 동적 라우트 세그먼트를 통해서 언어 변경
+export function GET(request: NextRequest, { params }: {
+  params: { lang: Locale },
+}) {
+  const selectedLocale = params.lang;
 
   // 유효하지 않은 로케일이면 406 Not Acceptable 에러
-  if (!selectedLocale || !i18n.locales.includes(selectedLocale)) {
+  if (!i18n.locales.includes(selectedLocale)) {
     return NextResponse.json(
       { error: 'Invalid locale' },
       { status: 406 },
     );
   }
 
-  // 이전 페이지의 URL을 referer 헤더를 통해 가져옴
-  const headersList = headers();
-  const refererUrl = new URL(headersList.get('referer') ?? blogConfig.ko.url);
-  const { origin, pathname } = refererUrl;
-
-  const newPath = generateRedirectPath(pathname, selectedLocale);
-  const redirectUrl = new URL(newPath, origin);
-
-  const response = NextResponse.redirect(redirectUrl);
+  const response = NextResponse.json({ locale: selectedLocale });
   response.cookies.set(LOCALE_COOKIE_NAME, selectedLocale, {
     path: '/',
     maxAge: 60 * 60 * 24 * 30, // 1달
     sameSite: 'lax',
   });
-
   return response;
 }

src/app/[lang]/layout.tsx

@@ -3,15 +3,14 @@ import LanguageSwitcher from '@/components/langSwitch';
 import PageContainer from '@/components/pageContainer';
 import ViewReporter from '@/components/viewReporter';
 import { blogCategory } from '@/config/blogCategory';
-import { SEOConfig } from '@/config/blogConfig';
+import { blogMetadata } from '@/config/blogMetadata';
 import { Locale, i18n } from '@/types/i18n';
 import Footer from '@/ui/footer';
 import Header from '@/ui/header';
 
 import { Providers } from './Provider';
 
 import '@/styles/reset.css';
-import '@/styles/global.css';
 import '@/styles/theme.css';
 import '@/styles/github-light.css';
 import '@/styles/github-dark.css';
@@ -61,5 +60,5 @@ export function generateStaticParams() {
 }
 
 export function generateMetadata({ params: { lang } }: Props) {
-  return SEOConfig[lang];
+  return blogMetadata[lang];
 }

src/app/[lang]/page.tsx

@@ -41,15 +41,15 @@ function Home({ params }: Props) {
         <div>
           <h2 className={styles.title}>{titles[lang].recentPosts}</h2>
           <AllPostTagList selectedTag="all" lang={lang} />
-          <PostList postList={recentPosts} direction="row" />
+          <PostList lang={lang} postList={recentPosts} direction="row" />
         </div>
 
         <div>
           <Link href="/translations/all">
             <h2 className={styles.title}>{titles[lang].recentTranslations}</h2>
           </Link>
           <hr className={styles.separator} />
-          <PostList postList={recentTranslations} direction="row" />
+          <PostList lang={lang} postList={recentTranslations} direction="row" />
         </div>
 
       </section>

src/app/[lang]/posts/[slug]/page.tsx

@@ -8,11 +8,12 @@ import Giscus from '@/components/giscus';
 import TableOfContents from '@/components/toc';
 import TranslationNotice from '@/components/translationNotice';
 import ViewReporter from '@/components/viewReporter';
-import { blogConfig } from '@/config/blogConfig';
+import { blogLocalConfig } from '@/config/blogConfig';
 import { i18n, Locale } from '@/types/i18n';
 import FrontMatter from '@/ui/frontMatter';
 import { getPostBySlug, getSortedPosts } from '@/utils/content/post';
 import { getSortedPostMetadatas } from '@/utils/content/postMetadata';
+import { generatePostPageMetadata } from '@/utils/meta/helper';
 
 import * as contentStyles from './content.css';
 
@@ -44,6 +45,7 @@ function PostPage({ params }: Props) {
     <>
       <ViewReporter slug={slug} />
       <FrontMatter
+        lang={lang}
         title={post.title}
         date={post.date}
         tags={post.tags}
@@ -55,7 +57,7 @@ function PostPage({ params }: Props) {
         className={contentStyles.content}
         dangerouslySetInnerHTML={{ __html: post.html }}
       />
-      {blogConfig[lang].comment.type === 'giscus' ? <Giscus lang={lang} /> : null}
+      {blogLocalConfig[lang].comment.type === 'giscus' ? <Giscus lang={lang} /> : null}
     </>
   );
 }
@@ -83,35 +85,5 @@ export function generateMetadata({ params }: Props): Metadata {
     notFound();
   }
 
-  return {
-    title: post.title,
-    description: post.description,
-    alternates: {
-      canonical: post.url,
-    },
-    openGraph: {
-      title: post.title,
-      description: post.description,
-      url: post.url,
-      images: [{
-        url: post.thumbnail?.[blogConfig[lang].imageStorage] ?? blogConfig[lang].thumbnail,
-        width: 300,
-        height: 200,
-        alt: `${post.title} thumbnail`,
-      }],
-    },
-    twitter: {
-      card: 'summary_large_image',
-      site: '@witch_front',
-      creator: '@witch_front',
-      title: post.title,
-      description: post.description,
-      images: [
-        {
-          url: post.thumbnail?.[blogConfig[lang].imageStorage] ?? blogConfig[lang].thumbnail,
-          alt: `${post.title} thumbnail`,
-        },
-      ],
-    },
-  };
+  return generatePostPageMetadata(blogLocalConfig, lang, post);
 }

src/app/[lang]/posts/all/[page]/page.tsx

@@ -8,7 +8,7 @@ import Pagination from '@/ui/pagination';
 import PostList from '@/ui/postList';
 import { ITEMS_PER_PAGE, allPostNumber, allEnPostNumber } from '@/utils/content/helper';
 import { getPostsByPage } from '@/utils/content/postMetadata';
-import { generatePostsPageMetadata } from '@/utils/generatePostsPageMetadata';
+import { generatePostListPageMetadata } from '@/utils/meta/helper';
 import { parsePage } from '@/utils/parsePage';
 
 type Props = {
@@ -58,7 +58,7 @@ function PostListPage({ params }: Props) {
         renderPageLink={(page: number) => `${lang === 'ko' ? '' : `/${lang}`}/posts/all/${page}`}
         perPage={ITEMS_PER_PAGE}
       />
-      <PostList postList={pagePostsWithThumbnail} />
+      <PostList lang={lang} postList={pagePostsWithThumbnail} />
       <Pagination
         totalItemNumber={totalPostNumber}
         currentPage={currentPage}
@@ -93,5 +93,5 @@ export function generateMetadata({ params }: Props): Metadata {
   const currentPage = Number(params.page);
   const { lang } = params;
 
-  return generatePostsPageMetadata(lang, currentPage, 'all');
+  return generatePostListPageMetadata(lang, currentPage, 'all');
 }

src/app/[lang]/posts/all/page.tsx

@@ -7,7 +7,7 @@ import Pagination from '@/ui/pagination';
 import PostList from '@/ui/postList';
 import { ITEMS_PER_PAGE, FIRST_PAGE } from '@/utils/content/helper';
 import { getPostsByPage } from '@/utils/content/postMetadata';
-import { generatePostsPageMetadata } from '@/utils/generatePostsPageMetadata';
+import { generatePostListPageMetadata } from '@/utils/meta/helper';
 
 function PostListPage({ params }: { params: { lang: Locale } }) {
   const currentPage = FIRST_PAGE;
@@ -35,7 +35,7 @@ function PostListPage({ params }: { params: { lang: Locale } }) {
         renderPageLink={(page: number) => `${lang === 'ko' ? '' : `/${lang}`}/posts/all/${page}`}
         perPage={ITEMS_PER_PAGE}
       />
-      <PostList postList={pagePostsWithThumbnail} />
+      <PostList lang={lang} postList={pagePostsWithThumbnail} />
       <Pagination
         totalItemNumber={totalPostNumber}
         currentPage={currentPage}
@@ -57,7 +57,7 @@ export function generateStaticParams() {
 export function generateMetadata({ params }: { params: { lang: Locale } }): Metadata {
   const { lang } = params;
 
-  return generatePostsPageMetadata(lang, currentPage, 'all');
+  return generatePostListPageMetadata(lang, currentPage, 'all');
 }
 
 export default PostListPage;

src/app/[lang]/posts/page.tsx

@@ -70,7 +70,7 @@ function PostSearchPage({ params }: Props) {
       {filteredPostList.length === 0
         ? <p>{content[lang].noResult}</p>
         : null}
-      <PostList postList={filteredPostList.slice(0, ITEMS_PER_PAGE * page)} />
+      <PostList lang={lang} postList={filteredPostList.slice(0, ITEMS_PER_PAGE * page)} />
       <div ref={infiniteScrollRef} />
     </>
   );

src/app/[lang]/posts/tag/[tag]/[page]/page.tsx

@@ -9,7 +9,7 @@ import PostList from '@/ui/postList';
 import { ITEMS_PER_PAGE } from '@/utils/content/helper';
 import { getPostsByPage } from '@/utils/content/postMetadata';
 import { getPostCountByTag, getAllPostTags } from '@/utils/content/tag';
-import { generatePostsPageMetadata } from '@/utils/generatePostsPageMetadata';
+import { generatePostListPageMetadata } from '@/utils/meta/helper';
 import { parsePage } from '@/utils/parsePage';
 
 type Props = {
@@ -69,7 +69,7 @@ function TagPaginationPage({ params }: Props) {
         renderPageLink={(page: number) => `${currentTag.url}/${page}`}
         perPage={ITEMS_PER_PAGE}
       />
-      <PostList postList={pagePostsWithThumbnail} />
+      <PostList lang={lang} postList={pagePostsWithThumbnail} />
       <Pagination
         totalItemNumber={totalPostNumber}
         currentPage={currentPage}
@@ -102,7 +102,7 @@ export function generateMetadata({ params }: Props): Metadata {
   const { lang, tag, page } = params;
   const currentPage = parsePage(page);
 
-  return generatePostsPageMetadata(lang, currentPage, tag);
+  return generatePostListPageMetadata(lang, currentPage, tag);
 }
 
 export default TagPaginationPage;

src/app/[lang]/posts/tag/[tag]/page.tsx

@@ -9,7 +9,7 @@ import PostList from '@/ui/postList';
 import { ITEMS_PER_PAGE, FIRST_PAGE } from '@/utils/content/helper';
 import { getPostsByPage } from '@/utils/content/postMetadata';
 import { getAllPostTags } from '@/utils/content/tag';
-import { generatePostsPageMetadata } from '@/utils/generatePostsPageMetadata';
+import { generatePostListPageMetadata } from '@/utils/meta/helper';
 
 type Props = {
   params: {
@@ -51,7 +51,7 @@ function PostListPage({ params }: Props) {
         renderPageLink={(page: number) => `${currentTag.url}/${page}`}
         perPage={ITEMS_PER_PAGE}
       />
-      <PostList postList={pagePostsWithThumbnail} />
+      <PostList lang={lang} postList={pagePostsWithThumbnail} />
       <Pagination
         totalItemNumber={totalPostNumber}
         currentPage={currentPage}
@@ -78,5 +78,5 @@ const currentPage = FIRST_PAGE;
 export function generateMetadata({ params }: Props): Metadata {
   const { tag, lang } = params;
 
-  return generatePostsPageMetadata(lang, currentPage, tag);
+  return generatePostListPageMetadata(lang, currentPage, tag);
 }