23.12.29 셀프 스터디 - Next.js

개요

추후 진행할 팀 사이드 프로젝트를 진행하기 위하여 Next.js 복습용으로 프로젝트를 만들려다가 Next.js 13 이후로 추가된 App Router를 익히기 위해서 그리고 Full Stack 용도로 사용하기 위해서 Project Structure, Data Fetching 중심으로 셀프 스터디를 하였다.

아래 내용은 Next.js Docs를 기반으로 진행한 스터디를 요약한 내용입니다.

Project Structure

라우팅을 중심으로 이루어진 프로젝트의 구조는 다음과 같다.

• .env : 환경변수
• .env.local : 로컬 환경변수
• .env.production : 운영서버 환경변수
• .env.development : 개발서버 환경변수

App Router

• page : 페이지 ( [URL 이름] / page )
  • 충돌을 방지하기 위하여 맨 하단의 폴더에서만 추가 가능
  • 'use client' 를 사용하여 API 요청이 가능하다. → **Client Components**
• api : 엔드 포인트 설정 ( api / [엔드 포인트 이름] )
  • route.ts → 각 메서드마다 API 설정이 가능하다.
  • return type : Promise / NextResponse

Pages Router

• _app / _document / _error : 필수 페이지
• index : 페이지
  • 중복 가능
• api : 엔드 포인트 설정
  • 단 엔드 포인트 이름을 파일의 이름으로 설정해야한다.
  • return type : Promise / NextApiResponse

Data Fetching

• mysql2 등을 활용하여 직접 DB를 연결할 수 있다. 의외로 레거시 코드랑 비슷한 구도로 가는게 특징이다.

const connection = mysql.createConnection({  
	host: process.env.DB_HOST,   
	user: process.env.DB_USER,  
	password: process.env.DB_PASSWORD,  
	database: process.env.DB_DATABASE  
});

Next

• Rendering / Caching
  • Server Components / Client Components
  • Composition Patterns
• More File Conventions
• App Router와 Pages Router의 차이점은 무엇일까? 이렇게 나뉘어진 이유로도 있을까?