2023-12-21 본캠프 56일차 / 75일차 TIL

2023-12-21 본캠프 56일차 / 75일차 TIL

주요진행사항

-  next.js 블로그만들기 

 

---

next.js 블로그만들기

 

next.js와 typescript를 프로젝트를 통해 공부하기 위해서 개인 포트폴리오 (블로그) 프로젝트를 무작정 시작하였다.

개념을 정리하며 프로젝트를 진행 할 예정이다.

1. next.js 프로젝트 만들기

 

next.js는 CRA (Create React App)을 자체적으로 가지고 있다.

 

프로젝트를 생성하는 명령어는 다음과 같다.

npx create-next-app@latest --typescript

yarn create next-app --typescript

pnpm create next-app --typescript

 

이후 프로젝트 생성을 위한 몇가지 질문을 프로젝트 성격에 맞게 설정하고 생성을 마친다.

 

 

2. App Router

next.js는 라우팅 방식이 pages router와 app router 두가지 종류로 나뉘어진다.

공식문서에서 권장하는 방식은 App Router이다.

몇가지 이유가 있지만, 특히 React의 Server Component를 활용할 수 있기 때문이다.

 

App Router의 구조는 다음과 같다.

 

기본적으로 App Router는 폴더 구조에 기초하여 path가 생성된다.

최상위 app 폴더부터 시작하여 하위 폴더로 경로가 생성된다.

이때 보여지는 각 경로별 보여지는 파일의 규칙은 다음과 같다.

layout : 세그먼트 하위 컴포넌트들에 UI 공유
page : 경로 고유의 UI 파일
loading : 하위 세그먼트를 포함하여 로딩 중일 때 보여줄 UI
not-found : 세그먼트 및 그 하위 세그먼트에 대해 UI를 찾을 수 없을 때 보여줌
error : 세그먼트 및 그 하위 세그먼트에 대한 오류 UI
global-error : 전역적인 오류 시 보여주는 UI
route : 서버측 API 엔드포인트 template : 특수하게 다시 렌더링된 레이아웃
default : 병렬 경로에 대한 기본 폴백 UL

 

각 경로의 page.js / jsx / tsx 파일이 ui로 나타난다.