NextJS - Routing/Layouts and pages (수정 25/1/30)

Hunter Joe·2024년 12월 16일

nextjs

작성 버전 - Next.js : 15.1.6

이 포스트만 보기보다 공식문서를 같이 옆에 두고 보는거 추천

📌File-system based routing

NextJS는 파일 시스템 기반 라우팅을 사용한다고 나와있다.
파일 시스템 기반 라우팅이란 파일이 하나의 Route로 동작하는 것
React-Router-Dom을 파일기반으로 쓴다 생각하면 됨

파일 기반 라우팅을 직접 구현한 코드
(내부 로직을 이해하면 좋을꺼 같아서 같이 첨부)
GitHub Link

📌Root Page & Root Layout

최상위 폴더(app)에서 페이지와 레이아웃을 선언해야한다.

Create Root page

페이지를 만들고 싶으면 app폴더 안에 page.tsx 만들면 됨. app 안에 있는 page.tsx가 localhost:3000으로 접속했을 때 가장 먼저 보이는 페이지가 됨

Create Root Layout

Layout은 여러 페이지에 공유되는 UI다. 해당 페이지나 여러 페이지의 중첩되어 사용되는 공통 UI
root layout은 필수! ! (프레임워크이기 때문)

📌 Nesting

Nested Routes

폴더를 서로 중첩해서 생성하면 중첩 라우트를 생성할 수 있게된다.

// 폴더 구조 
app/
├── blog/
│   ├──[id]/ 
│   │   ├──page.tsx
│ 	├── page.tsx       
│   ├── layout.tsx    
├── page.tsx           
├── layout.tsx

app/ : Root Segment
blog : Segment
[slug] : Leaf Segment

[slug]는 /blog안에 특정 게시물에 대한 동적 라우트를 생성할 수 있다.
Dynamic Routes에서 다뤄볼 예정

Nesting Layouts

기본적으로 폴더 계층 구조에 있는 Layout은 중첩되며 자식 Layout을 childrenprop로 내려준다.

NextJS가 Layout을 렌더링 하는 방식

렌더링을 진행할 때 바로 해당 컴포넌트로 가서 렌더링을 진행하는게 아니라.
일단 Layout 컴포넌트로 이동해서 export default된 Layout이 있는지 확인하고 렌더링 진행

RootLayout확인 → URL확인 → URL의 subLayout확인 → 렌더링 진행

Ex_)

// 폴더 계층 구도
app/
├── blog/
│   ├──[id]/ 
│   │   ├──page.tsx
│ 	├── page.tsx       
│   ├── layout.tsx    
├── page.tsx           
├── layout.tsx

최상위 app폴더의 Layout이 아래 blog Layout을 감싼다는 말

// app/layout.tsx
export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html lang="en">
			<body>
				<Nav />
				<h1>im layout</h1>
				{children}
			</body>
		</html>
	);
}

// app/blog/Layout.tsx
export default function BlogLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<div>
			&copy; Next JS is great!
			{children}
		</div>
	);
}

아래처럼 중첩되어 있다는 것

<RootLayout> 
  <BlogLayout /> // Blog page에 가면 Root Layout도 당연히 보인다. BlogLayout은 children 임!
</RootLayout>

📌 Dynamic Routes

[]를 씌워서 폴더를 생성하게 되면 해당 폴더의 동적 라우트가 가능해진다.
리액트에서 동적 라우팅을 했던 방식을 떠올리면 쉽다.
<Route path="/blog/:id" element={<BlogPage />} />

// 폴더 구조 
app/
├── blog/
│   ├──[id]/ //동적 라우팅
│   │   ├──page.tsx
│ 	├── page.tsx       
│   ├── layout.tsx    
├── page.tsx           
├── layout.tsx