Symbol
Next.js Github Pages 블로그 만들기 #6
Next.js SSG 블로그 상세 페이지 만들기
2023-08-19
이전 글에서 만든 블로그 목록 만들기에 이어서 블로그 상세 페이지를 만들어 보겠습니다.
기능 구현 순서는 다음과 같습니다.
  1. 블로그 상세 컴포넌트 생성 PostViewer
  2. slug 값을 참조하여 post 객체를 추출하는 getPost 함수 생성
  3. 동적 라우팅 페이지 컴포넌트 생성 ./src/app/post/[slug]/page.tsx

PostViewer 컴포넌트

PostViewer 컴포넌트를 만들어줍니다.
MDXRemote 컴포넌트는 mdx 파일을 html 형식으로 렌더링 해주는 역할을 합니다.
./src/components/post/Viewer.tsx

getPost

상세 페이지를 만들기 위해 게시글 1개만 추출하는 getPost 함수를 만들어 줍니다.
./src/services/post.ts

Dynamic Route

블로그 상세페이지에 slug 값은 동적으로 변하는 url이기 때문에 app 폴더에 동적 라우팅 컴포넌트를 생성합니다.
Next.js에서 동적라우팅 파라미터에 해당하는 경로의 폴더명은 [] 대괄호로 감싸줍니다.
generateStaticParams 함수는 SSG 빌드 시점에 실행되며 return 으로 반환되는 목록을 참조하여 정적 페이지를 생성합니다.
./src/app/post/[slug]/page.tsx

결과 화면

폴더 구조