[Next.js] Next.js 14 기초

기본 용어

메타데이터(metadata)

Next.js는 메타데이터(metadata)로 HTML에서 사용하던 `head` 엘리먼트를 대신합니다.

 

Next.js에서 폴더와 파일의 역할

폴더는 경로를 정의하는 데 사용됩니다. 경로는 루트 폴더(root folder)부터, `page.js` 파일이 포함된 최종 리프 폴더(leaf folder)까지 파일 시스템 계층 구조를 따라가는 중첩된 폴더(nested folder)의 단일 경로입니다. 

 

파일은 경로 세그먼트에 표시되는 UI를 만드는 데 사용됩니다. 

 

Next.js에서 서버 컴포넌트를 먼저 렌더링(pre rendering)하여 HTML로 클라이언트에 전송합니다. SPA를 하기 위해 필요한 코드는 따로 js파일을 생성하여 브라우저에 전송합니다.(ex. Link 컴포넌트)

---

AppRouter

AppRouter는 Next.js 13 버전부터 소개된 새로운 파일 기반 라우팅 기능입니다.

 

공식 문서에 따르면 버전 13에서 Next.js는 공유 레이아웃(shared layouts), 중첩 레이아웃(nested layouts), 로딩 상태(loading states), 오류 처리(error handling) 등을 지원하는 React 서버 컴포넌트(React Server Component)를 기반으로 새롭게 구축된 AppRouter를 도입했습니다. AppRouter는 `src/app` 디렉토리에서 동작합니다.

 

기본적으로 `app` 디렉토리 내부의 컴포넌트들은 `React Server Component`라고 합니다. 

 

중첩 라우팅 (Nested Routes)

/user/profile처럼 중첩된 라우팅의 경우, Next.js에서는 폴더 구조를 중첩해서 이를 구현합니다.

Next.js의 파일 기반 중첩 라우팅

 

파일 컨벤션 (File Conventions)

Next.js에서는 파일명을 작성할 때 

 

(작성중...)

 

---

알고있으면 도움이 되는 내용

Next.js에서 redirect 함수는 특별한 Errror를 반환한다.

그래서 try문 안에 redirect함수를 사용하면 리다이렉팅이 동작하지 않을 것입니다. try, catch문에서 redirect를 호출해봅시다.

 

Next.js를 빌드하면 static, dynamic 파일이 생성된다.

static 파일은 정적인 파일입니다. 만약 데이터를 수정했다고 해도, 서버에서 이 데이터를 반영해서 재렌더링하지 않습니다. dynamic 파일은 동적이기 때문에 매번 재렌더링을 합니다. 만약 static 파일을 재렌더링 해야하는 일이 생긴다면, 아래와 같은 압업을 사용해야 합니다.

 

static 파일의 종류

Dynamic 파일의 종류

 

(작성중...)

dynamic 파일을 캐싱하기 위해서는 generateStaticParams를 사용해야 한다.