라우팅 - 여러페이지 만들기

폴더 방식의 라우팅 지원

1. 우선 app폴더의 하위폴더를 생성

ex) app/list

=> 작명한 폴더이름 = url 이름이 됨.

 

2. 만든 폴더 안에 page.js 파일을 생성

ex) app/list/page.js

=> html 작성 공간

---

Link 태그

=> 페이지 이동 태그

 

1. 사용할 태그를 우선 import 

import Link from "next/link";

 2. html 안에 작성

<div>
  <Link href="/">home</Link>
  <Link href="/list">list</Link>
</div>

home 기준으로 url은 "/"이며,

폴더명 = url명에 따라 작성

=> 페이지 이동 태그 완성

---

중복 레이아웃 구성법

다른 페이지에 같은 html을 구성하고 싶은 경우

ex) header(상단바) 또는 footer(하단바)

layout.js는 page.js를 덮는구조를 가진다.

=> 위에서 작성했던 Link태그를 모든 페이지에 보여주고 싶다면?

(layout.js)

<div>
  <Link href="/">home</Link>
  <Link href="/list">list</Link>
</div>

layout.js의 html공간에 작성하면 된다.

---

layout.js 구조

- 즉,

상위 레이아웃 < app/layout.js > = 모든 페이지가 볼 수있는 큰 레이아웃을 구성

하위 레이아웃 < app/list/layout.js > = 하위 페이지들끼리만 볼 수 있는 레이아웃을 구성

 

* 하위 레이아웃에 구성한 html = app/page.js에는 보이지 않는다.

---

폴더방식의 라우팅은 처음 겪어보는지라,, 신세계가 따로 없다..

JSP로 웹을 시작했던 게 엊그제 같은데 정~말 편해진 것 같다고 새삼 느낀다.

페이지가 많아지면 복잡해진다는데, 뭐 어때 그 정도는 감수할만하지 않나? 정리정돈 이쁘게 해 보자아~!~!