Programming/React

Next.js 14 - z.com(1)

한우콩 2024. 4. 16. 20:13

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 파일을 추가

https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

 

 

동적 라우팅

  • 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