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

index 페이지 다듬기

다음으로는 인덱스 페이지(pages/index.js)를 수정하겠습니다.

Link를 사용하여 각 게시물 페이지에 링크를 추가 해야 합니다.

 

1️⃣ pages/index.js 파일 최상단에 Link와 Date를 import 하는 코드를 추가합니다.

import Link from "next/link";
import Date from "../pages/components/date";

 

2️⃣ Home 컴포넌트에 li 태그를 아래와 같이 수정합니다.

<li className={utilStyles.listItem} key={id}>
  <Link href={`/posts/${id}`}>
    <a>{title}</a>
  </Link>
  <br />
  <small className={utilStyles.lightText}>
    <Date dateString={date} />
  </small>
</li>

 

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

아래 페이지를 방문해보면 아래와 같이 출력되는 걸 볼 수 있습니다.

 

🥕 localhost:3000/posts/ssg-ssr

수정 전

🥕 localhost:3000/posts/pre-rendering

수정 후