🧱 언어 모음집/Next.js
[Next.js] index 페이지 다듬기
은돌1113
2022. 2. 20. 17:39
728x90
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

728x90