app router
- 라우팅 처리될 페이지들이 포함될 디렉토리
- 파일 시스템 기반으로 라우팅 처리
- 자동 코드 스플리팅 수행(번들 사이즈 down 효과)
💡 path alias
경로 별칭 설정 가능 (next.js는 기본적으로 @으로 설정됨)
상대 경로 ex) ../../app/layout
절대 경로 ex) @/app/layout
브라우저 주소 app 폴더에 반영하기
layout.tsx
- 여러 페이지간에 공유되는 UI (Navbar, header, footer 등 공통적으로 표현될 UI)
- 레이아웃은 중첩될 수 있다. (루트 레이아웃 -> 특정 레이아웃 -> 특정 페이지)
- children prop으로 페이지 또는 중첩 레이아웃을 전달받는다.
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<section>
{/* Navbar, header, footer 등 공통적으로 표현될 UI */}
<nav></nav>
{children}
</section>
)
}
Root Layout (필수)
- 루트 레이아웃은 앱 디렉토리의 최상위 레벨에 정의되며 모든 경로에 적용됨
- 레이아웃은 필수이며 서버에서 반환된 초기 HTML을 수정할 수 있도록 HTML 및 본문 태그를 포함해야 함
export default function RootLayout({
children,
}: PropsWithChildren) {
return (
<html lang="en">
<body className={inter.className}>
{children}
</body>
</html>
)
}
pages
- 경로에 따라 렌더링 되는 페이지.
- 기본적으로 page.tsx 파일에서 컴포넌트를 내보내서 페이지를 정의할 수 있다.
- /dashboard 경로에 대한 페이지를 만들려면 dashboard라는 새 폴더를 만들고 page.tsx 파일을 추가
동적 라우팅
- Next.js는 파일 시스템 기반으로 디렉토리 경로에 따른 라우팅 처리됨.
- 폴더의 이름을 대괄호로 묶어 동적 세그먼트를 만들 수 있음.
- 아래 이미지의 [usename], [id]가 동적 세그먼트, params prop을 이용해 동적 라우팅 가능
❗️주의할 점
동적 세그먼트에 전달되는 값이 app 디렉토리 아래의 폴더명과 겹치면 지정된 폴더 이름의 페이지가 렌더링된다.
예를 들어, [usename]의 동적 세그먼트에 home이 전달되고, home 디렉토리가 존재할 경우 우선적으로 home 디렉토리의 페이지가 렌더링되므로 주의해야한다.
라우트 그룹
- 라우트 그룹을 이용해 폴더가 경로의 URL 경로에 포함되지 않도록 할 수 있다.
- 폴더 이름을 소괄호로 묶어 라우트 그룹을 생성할 수 있다. 위 이미지의 (afterLogin)에 해당함.
- 그룹별 공통 레이아웃을 지정할 때 유용 (일반적으로 layout으로 인한 그룹핑을 하게됨)
참조
https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/
Next + React Query로 SNS 서비스 만들기 | 조현영 - 인프런
조현영 | 리액트18 & 넥스트14 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 S...
www.inflearn.com
'Programming > React' 카테고리의 다른 글
| Next.js 14 - z.com(3) (0) | 2024.04.19 |
|---|---|
| Next.js 14 - z.com(2) (0) | 2024.04.18 |
| State management - 상태관리 (0) | 2024.03.09 |
| React 공식문서 정리 - 커스텀 훅으로 로직 재사용하기 (1) | 2023.12.29 |
| React 공식문서 정리 - Removing Effect DependenciesEffect (의존성 제거하기) (1) | 2023.12.28 |
