[Next.js] React의 찐친 확장판?

---

01

Next.js 란 무엇인가?

Next.js는 React.js의 확장판 느낌이 물씬 나는 프레임워크입니다.

“라이브러리가 아니라고?” 맞아요, 프레임워크예요. 이게 왜 중요하냐면, 개발자와 코드의 관계가 완전히 달라집니다.

라이브러리 vs 프레임워크: 누가 더 자유로울까?

• 프레임워크는 이렇게 말하죠:
  “내가 틀을 다 정해놨으니 너는 그 안에서 놀아. 내가 다 해줄게!”
  덕분에 모든 기능이 기본 제공되지만, 대신 자유도는 낮아집니다.
  
  
• 반면 라이브러리는:
  “자, 이거 쓰고 싶은 대로 써. 네 마음대로 만들어봐!”
  자유도는 최고지만, 대신 직접 만들어야 할 게 많습니다.

Next.js는 이 프레임워크의 특성을 활용해 사전 렌더링 같은 고급 기술을 쉽게 사용할 수 있도록 만들어졌습니다.

---

02

사전 렌더링: CSR의 단점을 극복한 히어로

Client-Side Rendering(CSR) 방식은 브라우저가 직접 화면을 그리는 방식이에요.

하지만... 느립니다. 특히, 유저가 첫 화면을 보기까지 기다리는 시간이 길죠.
Next.js는 사전 렌더링으로 이걸 개선했습니다. 간단히 작동 원리를 볼까요?

1. 유저가 서버에 접속 요청을 보냅니다.
   “안녕하세요! 페이지 좀 주세요~”
2. 서버가 JS를 실행하며 사전에 렌더링 합니다.
   “HTML 뼈대 여기 있어요!”
3. 브라우저가 HTML을 받고 유저에게 보여줍니다.
   “보이긴 보이죠? 하지만 아직 상호작용은 안 돼요.”
4. 서버에서 JS 번들을 추가로 받아와 실행합니다.
   이제야 유저가 페이지와 상호작용할 수 있어요!

이 모든 과정을 통해 유저는 화면을 빨리 볼 수 있게 되고, 페이지 로드의 첫인상(FCP)이 훨씬 좋아져요.

 

 

*FCP(First Contentful Paint)

: "요청시작" 시점으로부터 콘텐츠가 화면에 처음 나타나는 데 걸리는 시간

[요청시작↔콘텐츠 렌더] > 프론트성능을 대표할 정도로 중요한  지표

 

*TIL(Time to Interactive)

: 사용자가 페이지에 접속한 후, 해당 페이지와 완전히 상호작용할 수 있는 상태가 되는 데 걸리는 시간

[요청시작↔콘텐츠 렌더] > 프론트성능을 대표할 정도로 중요한  지표

 

---

03

Page Router: Next.js만의 라우팅 시스템

Next.js는 파일명 기반의 라우팅을 제공합니다. 페이지를 만들고 싶다면 그냥 pages 폴더에 파일을 만들면 끝!

1. /home.js 파일을 만들면 /home 경로가 바로 생깁니다.

 

2. about폴더에 index.tsx파일로 만들면 /about 경로가 생깁니다.

 

3. 동적 경로(Dynamic Routes)도 지원합니다.

• [id].js: /item/123처럼 단일 ID를 받을 수 있습니다.
  
  
• [...id].js: /item/123/456/789처럼 여러 ID를 배열로 받을 수 있습니다.
  - Catch-All Segments
  -  /item/123/456/789 같은 경로를 배열로 받아옵니다.
  -  반드시 하나 이상의 세그먼트가 필요합니다.
  
  
• [[...id]].js: 인덱스 없이 /item 경로도 접속 가능합니다.
  - Optional Catch-All Segments
  -  /item 경로처럼 세그먼트가 없어도 기본적으로 접근 가능합니다.
  -  추가 세그먼트가 있을 경우 배열로 처리됩니다.

 

* URL이 여러 부분으로 나뉘어 있을 때, /로 구분된 각각의 단위를 세그먼트( Segment )라고 부릅니다.

---

04

Next.js 라우팅: Page Router의 이해

Page Router는 Next.js의 라우팅 시스템 중 하나로, Next.js 초기 버전부터 사용된 방식입니다.

파일 기반 라우팅을 사용하여 간단하고 직관적인 라우팅 설정이 가능하다는 특징이 있습니다.

다만, 이 라우팅 방식은 현재 Next.js 최신 버전에서는 잘 사용되지 않는 추세입니다.

왜 잘 사용되지 않을까?

• Next.js는 App Router라는 새로운 라우팅 시스템을 도입하며, 더 유연하고 강력한 기능(예: 서버 구성 컴포넌트, 동적 렌더링)을 제공하기 시작했습니다.
• Page Router는 구버전으로 간주되며, 최신 프로젝트에서는 주로 App Router를 권장합니다.

장점	단점
간단하고 직관적 : 파일 이름과 경로가 1:1로 매핑되므로, 구조를 이해하기 쉽습니다	유연성 부족 : 복잡한 라우팅 요구사항을 처리하기에는 제한적일 수 있습니다.
빠른 학습 곡선 : 별도의 라우팅 설정 없이 폴더와 파일만으로 구현 가능.	폴더 구조 의존 : 프로젝트가 커지면 폴더 관리가 복잡해질 수 있습니다.

---

05

Next.js Page Router로 프로젝트 시작하기

React.js 는 페이스북에서 개발한 사용자 인터페이스 라이브러리입니다.

현재 많은 프론트엔드 개발자들이 사용하고 있는 인기 있는 라이브러리입니다.

01. Next 앱 생성

아래의 명령어를 입력 후, 프로젝트에 맞게 설정을 합니다.

bash

npx create-next-app@14 [패키지 이름]

 

*npx는 Node Package Executor : https://www.npmjs.com/ 에서 최신버전의 라이브러리를 바로 다운로드하는 명령어

 

02. 개발 서버 실행

아래의 명령어로 서버를 실행하면 아래와 같은 초기 실행 페이지가 나타납니다.

bash

npm run dev

03. Next.js의 기본 구성 파일들

프로젝트를 처음 생성하면 **_app.tsx**와 _document.tsx 파일을 볼 수 있습니다.
이 파일들은 개별 페이지가 아니라,

Next.js 앱의 공통 로직, 레이아웃, 데이터를 관리하기 위해 필요한 중요한 역할을 합니다.

• _app.tsx
  - 모든 페이지의 공통 로직을 관리하는 파일. React의 App 컴포넌트 같은 역할이에요.
• _document.tsx
  - HTML 레이아웃에 공통적으로 적용할 코드를 작성하는 곳. React의 index.html 역할이라고 보면 돼요.
• next.config.mjs
  - Next.js 설정 파일이에요.
  - reactStrictMode는 개발 편의를 위해 false로 설정하는 것을 추천합니다.