사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업을 '라우팅'이라고 한다.
어떤 프레임워크든 그 중심에는 반드시 라우팅이 있고 이것은 웹개발의 가장 중요한 요소 중 하나이다.
app의 layout.js
import Link from 'next/link'
import './globals.css'
export const metadata = {
title: 'WEB',
description: 'Generated by kangin',
}
export default function RootLayout({ children }) {
return (
<html>
<body>
<h1 ><Link href='/'>WEB</Link></h1>
<ol>
<li><Link href='/read/1'>html</Link></li>
<li><Link href='/read/2'>css</Link></li>
</ol>
{children}
<ul>
<li><Link href='/create'>Create</Link></li>
<li><Link href='/update'>Update</Link></li>
<li><input type='button' value="delete"></input></li>
</ul>
</body>
</html>
)
}app의 page.js
import Image from 'next/image'
export default function Home() {
return (
<>
<h2>Welcome</h2>
Hello, WEB!
</>
)
}
이 화면에서 Create를 눌렀을 때 Create 페이지로 가려면 어떻게 해야 할까?
1. app 밑에 create라는 폴더를 만든다.
2. create 폴더에 page.js 파일을 만들어 create에 들어갈 내용을 작성한다.
app/create/page.js
export default function Create(){
return(
<>Create!!</>
)
}결과
create 링크를 누르면?
create 페이지로 이동하는 것을 볼 수 있다.
이게 가능한 이유
- create 링크를 클릭하면 next.js는 app 폴더 밑에 create 폴더가 있는지 찾는다.
- 그 찾은 폴더가 page.js를 가지고 있는지 확인한다.
- page.js를 가지고 있다면 이 page.js를 layout.js와 결합한다. (**여기서 create 폴더에 layout.js가 있다면 create 폴더의 layout.js와 결합하고 layout.js가 없다면 부모 폴더의 layout.js를 찾아 결합한다.)
만약 create 폴더에 layout.js 파일이 있다면?
이와 같이 create 폴더 밑에 layout.js가 있다면
create 폴더 밑에 있는 page.js는 create 폴더에 있는 layout.js와 결합하여 부모 폴더로 이동한다.
부모 폴더로 이동하여 부모폴더의 layout.js와 결합해 최종 화면을 랜더링하게 된다.
동적 라우팅(dynamic routing)
//생략...
<ol>
<li><Link href='/read/1'>html</Link></li>
<li><Link href='/read/2'>css</Link></li>
</ol>
//생략...read/1, read/2 의 1,2는 가변적으로 변경되는 경로이다.
이런 경로를 처리하려면 어떻게 해야 할까?
1. app 폴더 밑에 read라는 폴더를 만든다.2. 그 read 폴더 밑에 또 다시 [id]라는 폴더를 만든다.3. 그 아래 page.js를 만든다.
그 후에 read/[id]/page.js에 다음과 같이 작성
export default function Read(props){
return(
<>
<h2>Read</h2>
parameters: {props.params.id}
</>
)
}Next.js는 만약 /read/1 로 접속하면 1의 자리에 해당하는 폴더인 [id]의 이름을 기준으로 props를 만들어서 주입해준다.
참고:https://opentutorials.org/course/5098/32350
Next.js의 도로교통 시스템 - Routing - 생활코딩
사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업을 '라우팅'이라고 합니다. 어떤 프레임워크든 그 중심에는 반드시 라우팅이 있습니다. 이것은 웹개발의 가장 중요한 요소 중 하나
opentutorials.org
'Next.js' 카테고리의 다른 글
| [Next] Next.js 시작하기 (설치 방법) (0) | 2023.10.24 |
|---|
