[Next.js] 1. 개요, 폴더구조, RSC, 라우팅, not found

Next.js 14 Tutorial by Codevolution youtube channel

1. Next.js란?

리액트의 메타 프레임워크 

- 리액트는 유저인터페이스 도구임. 라우팅, 데이터 페칭 등 작업은 개발자가 알아서 해야함

 

리액트 사용하여 작업시 필수적인 기능들을 제공함

- 라우팅, 렌더링 최적화, 데이터 페칭, 빌드 및 컴파일 

- 별도 패키지 설치, 셋팅 필요없이 바로 작업 가능

2. 폴더구조

- src/app 하위 폴더를 만들어 라우팅 분기점을 생성

- layout.tsx > page.tsx 파일 순서로 렌더링 됨

- 각 폴더에서도 렌더링 되는 순서는 같음

 

ex) /about 렌더링 순서

src/app > layout.tsx > page.tsx > about 폴더 > layout.tsx > page.tsx

3. RSC

Next.js의 모든 컴포넌트는 기본적으로 서버 컴포넌트임

 

서버 컴포넌트

- 렌더링 전 db에서 데이터 가져옴, 파일을 읽음

- 훅, 유저 인터랙션 작업은 불가능함

 

클라이언트 컴포넌트

- 파일 최상위 "use client" 기재 해야함

- db에서 데이터 가져오거나 파일을 읽을 수 없음

- 훅, 유저 인터랙션 작업 가능

4. 라우팅

2번에 언급한 폴더구조와 참고.

 

4-1. 중첩 라우팅

- 폴더 내에 폴더를 만들어서 라우팅 생성 가능함

 

ex) /about/company

about 폴더 > page.tsx > company 폴더 > page.tsx

 

 

4-2. 다이나믹 라우팅

- path가 동적인 경우 [] 로 폴더명 감싸서 생성

- 컴포넌트에서 parmas 인자로 전달받을 수 있음

 

ex) products/1

products 폴더 > [productId] 폴더 > page.tsx

 

p.s) 다이나믹 라우팅 폴더도 중첩 구조 가능함 

 

 

4-3. Catch all Segments

- [...slug] 와 같은 폴더 생성시 컴포넌트 params 인자로 string[] 타입 데이터 전달받을 수 있음

 

 

4-4. Private Folders

- 폴더명 앞에 _ 지정시 브라우저 경로로 라우팅되지 않음

 

 

4-5. Route Groups

- 폴더명에 () 로 폴더명 감싸서 생성

- 해당 폴더명은 제외되고 라우팅됨

 

ex) /login

(auth) 폴더 > login 폴더 > page.tsx

5.  not found 페이지

- 폴더 내 not-found.tsx 생성

- page.tsx 파일에서 notFound 함수 호출시 (next/navigation 모듈) not-found.tsx 파일 렌더링 됨