다른 페이지 만들기
웹사이트들은 url 을 이용해서 페이지를 구분합니다.
vibe.naver.com/today 으로 접속하면 오늘의 메세지 보여주고, vibe.naver.com/chart 으로 접속하면 차트 보여주죠.
이렇게 맘대로 url 을 작명해놓고 거기로 접속하면 다른 html 을 보여주는 식으로 개발해놓습니다. 앞으로 만들 사이트도 메인페이지 & 상품목록페이지가 필요할테니 각가 만들어 보았습니다.
Next.js 의 자동 라우팅
url 로 페이지 나누는 걸 라우팅이라고 합니다. 라우팅하려면 일반적인 웹서버들은 "누가 /list 로 접속하면, 상품목록 html 을 보여주세요~" 라고 서버에 코드를 짜놔야 하는데, Next.js 를 쓰면 그런 코드를 짤 필요가 없이 폴더와 파일 하나만 만들면 자동으로 됩니다.
- app 폴더 안에 폴더 하나 작명하고,
- 폴더 page.js 파일 만들고 안에 html 작성하기만 하면,
자동으로 url 과 페이지가 완성됩니다.
예를 들어 /list 로 접속시 상품목록html 을 보여주고 싶다면,
- app 폴더 안에 list 폴더를 만들고,
- 그 안에 page.js 만들어서 상품목록 html 을 넣어두면 됩니다.
이렇게 라우팅 기능이 끝이죠. 왜냐하면, Next.js 는 app 폴더 안에 있는 폴더들을 자동으로 url 로 만들어줍니다. 그래서 위 사진처럼 해놓고 page.js 파일 안에 원하는 html 작성한 /list 페이지로 접속하게 됩니다.
Nanvar 만들기
웹페이지에 꼭 하나씩 있는 상단메뉴를 같이 만들어보겠습니다.
app/page.js
import Link from "next/link";
export default function Home() {
return (
<main>
<div className="navbar">
<Link href="/">home</Link>
<Link href="/list">list페이지</Link>
</div>
<h1 className="title">Programming Log</h1>
<p className="title-sub">by dev kim</p>
</main>
)
}html 로 디자인해 각각 페이지마다 넣으면 됩니다.
근데 잘 보면 /list 페이지랑 홈페이지에 똑같은 UI 를 만들어줘야 합니다. 똑같은 UI 는 굳이 페이지마다 직접 작성할 필요는 없고, layout.js 파일에 작성해두면 편리합니다.
중복되는 html 은 layout.js 파일에
Next.js 는 실은 page.js 를 보여줄 때, 옆에 layout.js 파일이 있으면 layout.js 내용 안에 page.js 내용을 담아서 보여줍니다.
layout.js 에 들어가면, {children} 이라고 표기된 부분이 있는데, 그게 page.js 넣을 곳을 표시하는 문법입니다.
참고로 상위폴더에 layout.js 가 또 있는 경우, 상위폴더의 layout.js 안에 하위폴더의 layout.js 를 담아서 보여줍니다.
그것이 Next.js 레이아웃들의 작동방식입니다. 페이지마다 반복적으로 보여줘야할 html UI 가 있다면, 최상단 layout.js 파일에 만들면 편하겠죠.
layout.js
import Link from "next/link";
import './globals.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<div className="navbar">
<Link href="/">Home</Link>
<Link href="/list">List</Link>
</div>
{children}
</body>
</html>
)
}
layout.js 파일 안에 navbar 를 만들었습니다. 그럼 page.js 마다 navbar 를 만들어줄 필요가 없죠.
'Next.js > 코딩애플' 카테고리의 다른 글
| 상세페이지 만들기 1 (Dynamic route) (0) | 2023.09.17 |
|---|---|
| 글목록 조회기능 만들기 (DB 데이터 출력) (0) | 2023.09.17 |
| 쇼핑몰 프로젝트 생성 / MongoDB 사용 (0) | 2023.09.17 |
| client/server component, import 문법 (0) | 2023.09.17 |
| [항해 38일차] TIL_Next.js 설치와 개발환경 셋팅 (0) | 2023.09.17 |
