[Next.js] Post 페이지 다듬기

title 게시물 페이지에 추가

pages/posts/[id].js에서 게시물 데이터를 사용하여 태그를 추가해보겠습니다.

최상단에 Head를 import 하고 구성 요소를 아래와 수정하여 태그를 추가합니다.

// Add this import
import Head from 'next/head'

export default function Post({ postData }) {
  return (
    <Layout>
      {/* Add this <Head> tag */}
      <Head>
        <title>{postData.title}</title>
      </Head>

      {/* Keep the existing code here */}
    </Layout>
  )
}

날짜 형식 지정

1️⃣ 날짜 형식을 지정하기 위해서 date-fns 라이브러리를 사용합니다.

터미널을 열고 아래 코드를 입력하여 라이브러리를 설치합니다.

$ npm install date-fns

2️⃣ 다음으로는 components/date.js라는 파일을 생성하고, Date 구성 요소를 추가합니다.

(참고 - date-fns 웹사이트에서 format()과 같이 다양한 문자열 옵션을 볼 수 있습니다.)

import { parseISO, format } from 'date-fns'

export default function Date({ dateString }) {
  const date = parseISO(dateString)
  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
}

3️⃣ 이제 pages/posts/[id].js 최상단에 다음과 date를 import 해오는 코드를 추가하고

아래와 같이 Date를 사용하여 코드를 수정합니다.

// Add this import
import Date from '../../components/date'

export default function Post({ postData }) {
  return (
    <Layout>
      {/* Keep the existing code here */}

      {/* Replace {postData.date} with this */}
      <Date dateString={postData.date} />

      {/* Keep the existing code here */}
    </Layout>
  )
}

CSS 추가

1️⃣ 이전에 추가한 파일을 사용하여 CSS를 추가해보겠습니다.

pages/posts/[id].js를 열고 styles/utils.module.css라는 CSS 파일에 대한 import를 추가하여

Post 구성 요소를 다음과 같이 수정합니다.

// Add this import at the top of the file
import utilStyles from '../../styles/utils.module.css'

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  )
}

2️⃣ yarn dev 또는 npm run dev로 개발 서버를 구동하고

아래 페이지를 방문해보면 아래와 같이 블로그 콘텐츠가 출력되는 걸 볼 수 있습니다.

🥕 localhost:3000/posts/ssg-ssr

🥕 localhost:3000/posts/pre-rendering

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

'프레임워크 > Next.js' 카테고리의 다른 글

[Next.js] 동적 경로 세부정보 (0)	2022.02.20
[Next.js] index 페이지 다듬기 (0)	2022.02.20
[Next.js] Render MarkDown (0)	2022.02.20
[Next.js] getStaticProps 구현 (0)	2022.02.20
[Next.js] getStaticPaths 구현 (0)	2022.02.20