[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 앱 생성

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

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

 

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

 

02. 개발 서버 실행

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

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로 설정하는 것을 추천합니다.