Next.js : Web tutorial 뼈대 + 라우팅 + 다이나믹 라우팅

728x90

* 개발을 할때는 개발서버를 켜야함 => npm run dev

1. Web tutorial 뼈대

[layout.js]

import './globals.css';

export const metadata = {

title: 'Web tutorials',

description: '2023-12-19',

};

export default function RootLayout({ children }) {

return (

<html>

<body>

<h1>

</h1>

<ol>

<li>

</li>

<li>

</li>

</ol>

{children}

<ul>

<li>

<a href="/create">Create</a>

</li>

<li>

<a href="/update/1">Update</a>

</li>

<li>

</li>

</ul>

</body>

</html>

);

}

1) metadata : 파비콘 옆에 들어가는 문구

2) 바디의 {children} = page.js의 return 값

2. 라우팅 설정 (create)

1) 경로에 따라서 어떤 방식으로 보여줄지 = 라우팅

[src > app > create >page.js만 있는 경우]

** next.js는 app폴더 밑에 create가 있는지 찾음

▼

그리고 그 폴더가 page.js가 있는지 찾음

▼

page.js의 내용을 creaet폴더가 layout.js가 있으면 같이 결합함

=> 근데 없다?

▼

그 부모폴더로 이동해서 layout.js를 찾음 (있음)

저 내용이 {content}에 내용이 들어옴

2) src > app > create > page.js (약속된 파일이여서 이름 그대로 작성할 것) --> 컴포넌트임

create > [page.js]

export default function Create() {

return <>Create@</>;

}

3) create 클릭시 --> 라우터 이동 (localhost:3000/create)

[src > app > create >page.js + layout.js 모두 있는 경우]

**위와 동일한 순서로 감

** 중요한건 폴더 안의 layout.js는 props가 무조건 있어야함

▼

page.js의 내용이 같은 폴더의 layout.js에 안김

▼

그게 form태그의 내용임

▼

그리고 최종적으로 조합된 내용이

그 부모폴더로 이동해서 layout.js를 찾음 (있음)

저 내용이 {content}에 내용이 들어옴

create > [layout.js]

export default function Layout(props) {

return (

<form>

<h2>Create</h2>

{props.children}

</form>

);

}

▶ {props.children} => page.js의 내용임

3. 다이나믹 라우팅 설정 (read)

1번이라고 되어있는 세그먼트 => 폴더에서 [ ] 대괄호로 설정 (id라는 이름 부여)

export default function Read(props) {

return (

{props.params.id}

</>

);

}

/read/1

/read/2

=> 1,2 : id에 해당되는 폴더의 위치명을 가져올 수 있음 = props.params.id

[출처] 생활코딩

'Next.js' 카테고리의 다른 글

Next.js : backend (Json-server) \| Server Component (0)	2023.12.20
Next.js : Single Page Application & 이미지 추가 & CSS (0)	2023.12.19
Next.js - 배포 (1)	2023.12.19
Next.js 13 : 설치와 실행 (0)	2023.12.19
Next.js (0)	2023.12.18

1. Web tutorial 뼈대

2. 라우팅 설정 (create)

3. 다이나믹 라우팅 설정 (read)

'Next.js' 카테고리의 다른 글

티스토리툴바