Next.js 문학 커뮤니티 프로젝트(2)_Next.js 라우팅과 pages, layouts, templetes

Next.js 에서의 라우팅

Creating Routes
Next.js uses a file-system based router where folders are used to define routes.
Each folder represents a route segment that maps to a URL segment. To create a nested route, you can nest folders inside each other.

경로 생성
Next.js는 폴더를 사용하여 경로를 정의하는파일-시스템 기반 라우터를 사용합니다.
각 폴더는 URI 세그먼트에 그려지는 라우트 세그먼트를 대변한다. 중첩 경로를 만들려면 폴더를 서로 중첩할 수 있습니다.

폴더를 사용해서 라우트를?

app폴더내에 create 폴더를 생성하고 page.tsx 생성하고

create > page.tsx

export default function CreatePage() {
  return <div>hi</div>;
}

http://localhost:3000/create 경로로 들어가면 작지만 확실한 hi가 표시된다.

여기서 등장하는게 page.tsx 와 layout.tsx 이다

Page.tsx VS layout.tsx

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

Routing: Pages and Layouts | Next.js

Using App Router Features available in /app

nextjs.org

The App Router inside Next.js 13 introduced new file conventions to easily create pages, shared layouts, and templates. This page will guide you through how to use these special files in your Next.js application.

Next.js 13안에 앱 라우터에는 쉽게 페이지를 생성하고 레이아웃과 템플릿을 공유하는 새로운 파일 관례가 소개된다.
이 페이지는 당신의 Next.js 어플리케이션에 이 특별한 파일들을 어떻게 사용하는지 알려줄것이다.

Pages

A page is UI that is unique to a route.
You can define pages by exporting a component from a page.js file.
Use nested folders to define a route and a page.js file to make the route publicly accessible.

페이지는 라우트하기 위한 유니크한 UI다.
너는 page.js 파일로 부터 컴포넌트를 내보내 페이지를 정의할 수 있다.
중첩된 폴더들에 공개적으로 접근가능한 라우터를 만드는 page.js 파일과 라우트를 정의 할 수 있다.

첫번째 페이지는 app 폴더 밑에 생성되어 있다.

페이지는 기본적으로는 서버 컴포넌트지만 클라이언트 컴포넌트로 변경가능하다고 한다.

페이지는 데이터를 가져 올 수 있고, 경로 라우트에 접근을 할려면 page.tsx(js, jsx) 파일이 꼭 필요하다고 한다

Layouts

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.
You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a child page during rendering.

레이아웃은 여러 페이지 간에 공유되는 UI입니다. 탐색에서 레이아웃은 상태를 보존하고 대화형 상태를 유지하며 다시 렌더링하지 않습니다. 레이아웃은 중첩될 수도 있습니다.
레이아웃은 기본적으로 layout.js 파일에서 React 컴포넌트를 내보내서 정의할 수 있습니다. 컴포넌트는 렌더링 중에 자식 레이아웃(있는 경우) 또는 자식 페이지로 채워질 자식 프로퍼티를 받아들여야 합니다.

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
 
      {children}
    </section>
  )
}

레이아웃 또한 데이터를 불러 올 수 있고, 서버 컴포넌트지만 클라이언트 컴포넌트로 변경가능하다고 한다.

같은 폴더에 page 와 layout을 같이 설치 할 수 있고 이렇게 되면 page를 layout이 감싼다고 한다.

app 폴더에 생성되어 있는 layout은 루트 레이아웃이라고 명명한다고 한다. (루트 레이아웃에만 <html> 및 <body> 태그를 포함할 수 있다고)

각 부모 레이아웃은 React.ReactNode(리액트 프로퍼티) 사용하여 그 아래의 자식 레이아웃을 감싸준다고 한다.

templetes

레이아웃과 템플릿 사이의 주요 차이점은, 템플릿이 레이아웃과 비슷한 역할을 하지만, 레이아웃이 상태(state)를 보존하는 반면 템플릿은 항상 새로운 children을 생성한다는 것이다.
이를 통해 레이아웃은 페이지 단위로 화면 내 컴포넌트가 수시로 바뀌어도 리렌더링 비용을 최대한 줄여 성능을 향상시킬 수 있다고
레이아웃은 일관된 구조를 유지하는 동안 상태를 보존하고, 템플릿은 상태를 보존하지 않는다.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

템플릿은 레이아웃밑에서 렌더링 된다고 한다.

Next.js 13 공식문서속 단순 예시:

<Layout>
  {/* Note that the template is given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>