Next.js

1. 정의

Vercel에서 개발한 React Framework, SSR, CSR, API 라우팅 등의 다양한 최적화 기능 제공.

React의 기본 기능을 확장해 보다 빠르고 안정적으로 웹 애플리케이션을 개발.

 

2. 설치

npx create-next-app@latest [프로젝트 이름]

- 타입스크립트 사용 여부

- ESLint 사용 여부

- Tailwind CSS 사용 여부

- src/ 디렉토리 사용 여부

- App Router 사용 여부 => 13 이상부터 사용할 수 있게 된 방식으로 추천!

- 별칭 사용 여부

 

3. 컴포넌트

Server와 Client를 구분해서 사용

서버 컴포넌트는 보안/캐싱/성능/SEO 등의 이점

클라이언트 컴포넌트에서는 click/load/이벤트/브라우저 api 활용 등의 이점

 

4. 라우팅

파일 규칙

layout.js (고정 레이아웃)

 template.js (변화 레이아웃)

  error.js (에러 페이지)

 

5. 페이지

폴더를 사용해 경로를 정의하는 파일 시스템 기반 라우터 방식을 사용

ex) /app/movies => http://localhost:3000/movies 로 접근 가능

그리고 접근한 경로에서 출력할 내용은 기본적으로 각 폴더의 page.tsx 컴포넌트에 작성

/app/page.tsx는 홈 화면

 

6. 레이아웃

공통으로 사용하는 UI는 각 라우팅 폴더의 layout.tsx