Next.js 13

@2023/10/19

안녕하세요 lika-7입니다

이번시간에는 Next.js 13에서 바뀐 내용을 다루겠습니다.

app 폴더

Next.js 13버전은 pages 폴더 대신에 app 폴더를 이용해 페이지 구성과 라우팅을 구현 할 수 있습니다.

File System Routing

파일 시스템 라우팅을 구성하는 방법은 크게 3가지가 있습니다.

home/	abc.com/home	일반 라우팅
[slug]/	abc.com/{slug}	동적 라우팅
(group)/	abc.com/	라우팅 경로에 영향을 주지 않음

1. 일반 라우팅을 위한 파일 구성

2. 동적 라우팅을 위한 파일 구성

3. 그룹을 만들기 위한 파일 구성
   • 파일의 그룹을 만들기 위해 사용되며, 라우팅 경로에 영향을 주지 않습니다.

app/
├── layout.tsx
├── (marketing)/
│   ├── about/
│ 	│   └── page.tsx
│ 	└── blog/
│ 			└── products/
└── (shop)/
    └── acount/
        └── page.tsx

예약된 파일 (Special Files)

Next.js는 중첩 라우트를 위한 몇가지 special file이 있습니다.

page.tsx	Unique UI of a route and make routes publicly accessible
layout.tsx	Shared UI for a segment and its children
loading.tsx	Loading UI for a segment and its children
error.tsx	Error UI for a segment and its children
template.tsx	Specialized re-rendered Layout UI

* 중첩라우트란

URL에서 중첩되는 경로에 있는 모든 레이아웃 요소를 해당페이지에서 모두 중첩해서 사용하는 파일 기반의 라우팅 시스템이라고 할수 있습니다.

위 사진에서 layout.js는 전체 부분에 해당하는 layout도 있고 dashboard에 해당하는 layout도 있다는 말

Server Component

Next.js 13버전에서 컴포넌트는 기본적으로 server component 입니다.

기존 Next.js 프로젝트는 pages라는 폴더를 이용해 라우팅을 설정할수 있었습니다.

Next.js 13 부터는 pages폴더를 app 폴더로 대체 하였는데

이 app 폴더 내부의 모든 컴포넌트는 기본적으로 server component로 동작합니다.

app directory 내부에서 클라이언트 컴포넌트를 사용하고 싶으면 파일의 최상단에 use client라고 명시해주면 됩니다.

"use client";

import {useState} from "react";

const ClientComponent  =() => {
 
 const [state,setState] = useState()

 return <div>Test</div>
}

export default ClientComponent