현재까지 사용자의 효율적인 페이지 이동을 위해 react-router-dom을 사용하여 라우팅 기능을 구현하였다.
라우팅 기능은 매우 중요하면서도 기본이 되는 기능이라고 생각한다.
Next.js에서는 라우팅을 어떻게 구현하면 좋을지 강의를 통해 얻은 지식을 정리하고, 프로젝트에 적용해 보고자 한다 👀
💁♀️ (먼저!) 라우팅이란?
* 웹 라우팅은 웹 애플리케이션에서 URL의 경로에 따라 특정 페이지나 리소스를 사용자에게 보여주는 것
👉🏻 즉, url의 path에 특정 페이지를 설정하고, 사용자가 해당 경로로 이동할 때, 설정한 페이지를 보여주는 것이다.
🙋🏻♀️ Next.js 라우팅
1️⃣ 페이지 생성
'pages' 디렉터리에 파일을 생성하면, 해당 파일의 경로와 이름에 따라 자동으로 라우트가 생성
ex) pages/create 폴더는 '/create' 세그먼트를 의미하며, pages/create.js에 해당하는 화면을 반환
ex) pages/read 폴더는 '/read' 세그먼트를 의미하며, pages/read.js에 해당하는 화면을 반환
2️⃣ 동적 라우팅
파일 또는 디렉토리 이름을 대괄호([ ])로 감싸면 동적 라우트를 생성
ex) read/[id]/page.js 파일은 '/read/1', '/read/2',... 등의 경로로 접근할 때 렌더링되며, 'id' 값을 동적으로 가져옴
▶️ src/app/layout.js는 기본적인 골격 역할
💁♀️ 공통된 내용을 다루는 것은 layout.js에서 다루는 것이 좋다.
▶️ src/app/page.js는 layout.js의 {children}에 해당하는 컴포넌트의 '내용'
▶️ create/page.js와 read/[id]/page.js 확인
👀 page.js는 공통 약속 (특정 폴더 안에 있는 page.js 파일은 해당 폴더 이름을 경로로 가짐)
🥴 동적 라우팅 접근
위에 설명한 예시인 read/1, read/2,... 의 1, 2, 3,... 에 접근하는 방법은?
➡️ props로 주고, {props.params.id}로 접근
export default async function Read(props) {
const resRead = await fetch(`http://localhost:9999/topics/${props.params.id}`, {cache: 'no-store'})
const topic = await resRead.json()
return (
<>
...(생략)
<br />id의 값은 {topic.id}
</>
)
}
🏃🏻♀️ 페이지 이동
return (
<html>
<body>
<h1><Link href='/'>MainPage</Link></h1>
<ol>
{
topics.map((item) => {
return <li key={item.id}><Link href={`/read/${item.id}`}>{item.title}</Link></li>
})
}
</ol>
{children}
<Control />
</body>
</html>
)✅ 페이지 간 이동을 위해 'Link' 컴포넌트 사용
'프론트엔드 > Next.js' 카테고리의 다른 글
| [Next.js] SPA(Single Page Application) (2) | 2023.08.21 |
|---|---|
| [Next.js] 설치 및 빌드하기 (1) | 2023.08.10 |