NextJS 블로그 만들기 - slug형식 만들기

블로그에 올릴 글을 쉽게 설명하려면 다음과 같은 접근이 좋을 것 같아요.

파일에서 가져온 글 데이터를 URL-friendly 형식으로 변환

파일에서 블로그 글의 정보를 가져와 가공하는 과정을 담았다. 주로 글 제목, 설명, 작성자, 날짜 같은 기본 정보를 가져오고, URL에 쓰기 좋은 슬러그(slug) 형식을 추가하는 작업을 한다.

코드 설명

// lib/article.ts

// Article와 ArticleWithSlug 인터페이스 정의
interface Article {
  title: string;
  description: string;
  author: string;
  date: string;
}

export interface ArticleWithSlug extends Article {
  slug: string; // URL-friendly 문자열
}

1. Article은 블로그 글의 기본 정보 구조.
2. ArticleWithSlug는 Article에 slug라는 필드를 추가한 확장형. slug는 URL에서 글을 고유하게 구분할 수 있도록 하는 식별자.

importArticle 함수 설명

이 함수는 파일명을 받아 그 파일에서 글 정보를 가져와 slug를 포함한 새로운 객체로 반환한다.

// lib/article.ts

export async function importArticle(
  articleFileName: string
): Promise<ArticleWithSlug> {
  let { article } = (await import(`../app/article/${articleFileName}`)) as {
    default: React.ComponentType;
    article: Article;
  };
  
  return {
    slug: articleFileName.replace(/(\/page)?\.mdx$/, ""), // 파일명에서 슬러그 생성
    ...article, // 나머지 정보 추가
  };
}

• import를 사용해 특정 경로에서 article 데이터를 가져오고,
• slug는 파일명에서 .mdx나 /page 부분을 제거하여 생성.
• 최종적으로, 파일에서 가져온 데이터와 slug를 포함한 객체를 반환한다.

URL에서 바로 접근 가능한 슬러그를 자동으로 생성하면서, 글의 중요한 메타데이터를 정리하는 데 유용하다.