[문서] 처음 만난 Next.js: 마치며

FrontOverflow

Q&A

문서

강의

영상

매거진

채용

처음 만난 Next.js

0. 준비하기

0.1

TypeScript

0.2

(실습) Node.js와 npm 설치하기

0.3

(실습) VS Code 설치하기

0.4

마치며

1. Next.js 소개

1.1

React와 Next.js

1.2

CSR vs SSR

1.3

SSG (Static Site Generation)

1.4

Next.js의 탄생 배경

1.5

마치며

2. Next.js 시작하기

2.1

(실습) 직접 Next.js 앱 생성

2.2

(실습) create-next-app을 사용해서 Next.js 앱 생성

2.3

(실습) Global Styles 설정 및 ESLint 규칙 변경

2.4

마치며

3. Routing

3.1

Routing 기초

3.2

Pages Router

3.3

App Router

3.4

Linking 및 Navigating

3.5

(실습) Routes 구성하기

3.6

(실습) Parallel Routes 사용하기

3.7

(실습) Intercepting Routes 사용하기

3.8

마치며

4. Pages와 Layouts

4.1

Pages

4.2

Layouts

4.3

Templates

4.4

Metadata

4.5

(실습) Root Layout 만들기

4.6

(실습) Feed Layout 만들기

4.7

(실습) Template 적용해보기

4.8

(실습) Static Metadata 사용해보기

4.9

(실습) Dynamic Metadata 사용해보기

4.10

(실습) 동적으로 Open Graph 이미지 생성하기

4.11

마치며

5. Route Handlers

5.1

Pages Router의 API Routes

5.2

App Router의 Route Handlers

5.3

Route Handlers 사용 예시

5.4

(실습) Route Handlers를 활용하여 API 만들어보기

5.5

마치며

6. Middleware

6.1

Middleware란?

6.2

Next.js의 Middleware

6.3

(실습) Middleware 사용해보기

6.4

마치며

7. Date Fetching

7.1

fetch

7.2

Server Actions

7.3

(실습) 서버에서 데이터 받아오기

7.4

(실습) Server Actions 사용해보기

7.5

마치며

8. SWR

8.1

SWR 소개 및 역할

8.2

Data Fetching

8.3

Mutation & Revalidation

8.4

(실습) SWR 사용해보기

8.5

마치며

9. Rendering

9.1

Rendering Fundamentals

9.2

Server Components

9.3

Client Components

9.4

Server와 Client Composition Patterns

9.5

Edge와 Node.js Runtimes

9.6

(실습) Server Components 사용해보기

9.7

마치며

10. Caching

10.1

Request Memoization

10.2

Data Cache

10.3

Full Route Cache

10.4

Client-side Router Cache

10.5

Cache Interactions

10.6

캐싱 관련 API

10.7

캐싱 요약

10.8

(실습) 캐싱 동작 확인해보기

10.9

마치며

11. Styling

11.1

CSS Modules와 Global Styles

11.2

Tailwind CSS

11.3

CSS-in-JS

11.4

Sass

11.5

(실습) Tailwind CSS 사용해보기

11.6

마치며

12. Optimizing

12.1

Image Optimization

12.2

Fonts

12.3

Scripts

12.4

Lazy Loading

12.5

Static Assets

12.6

(실습) Image 최적화 적용하기

12.7

(실습) Font 최적화 적용하기

12.8

(실습) Lazy Loading 적용하기

12.9

마치며

13. Configuring

13.1

next.config.js 파일

13.2

환경 변수 설정

13.3

(실습) 환경 변수 사용해보기

13.4

(실습) Redirect 적용하기

13.5

(실습) Rewrite 적용하기

13.6

마치며

14. Testing

14.1

프론트엔드 테스트의 종류

14.2

Vitest

14.3

Jest

14.4

Playwright

14.5

Cypress

14.6

(실습) Jest로 테스팅하기

14.7

(실습) Playwright로 테스팅하기

14.8

마치며

15. Build & Deploying

15.1

Build의 개념

15.2

Next.js 애플리케이션 빌드

15.3

(실습) Next.js 애플리케이션 빌드해보기

15.4

마치며

16. Mini Project

16.1

미니 커뮤니티 기획하기

16.2

(실습) Next.js 애플리케이션 생성하기

16.3

(실습) 폴더 구성하기

16.4

(실습) 페이지 생성하기

16.5

(실습) Routes 구성하기

16.6

(실습) Shadcn UI 및 Tailwind CSS 연동하기

16.7

(실습) 데이터베이스 설계하기

16.8

(실습) Turso 데이터베이스 생성하기

16.9

(실습) Drizzle ORM 연동 및 데이터베이스 schema 생성

16.10

(실습) NextAuth 연동하기

16.11

(실습) Route Handlers로 API 만들기

16.12

(실습) 클라이언트 API 호출을 위한 함수 구현하기

16.13

(실습) SWR 연동하기

16.14

(실습) Header 컴포넌트 구현하기

16.15

(실습) Route Groups를 사용하여 여러 RootLayout 구현하기

16.16

(실습) SignInPage 구현하기

16.17

(실습) SignUpPage 구현하기

16.18

(실습) MainPage 구현하기

16.19

(실습) PostWritePage 구현하기

16.20

(실습) PostViewPage 구현하기

16.21

(실습) Middleware 만들기

16.22

(실습) 로컬에서 애플리케이션 작동 테스트

16.23

(실습) Vercel 배포하기

16.24

(실습) 배포된 애플리케이션 작동 테스트

처음 만난 Next.js 문서

9.7

마치며

이번 장에서 배운 내용은 아래와 같습니다.

Rendering
- 코드를 실제 화면에 나타나는 사용자 인터페이스로 변환하는 작업
- SSR (Server Side Rendering): 서버에서 렌더링이 이뤄지는 것
- CSR (Client Side Rendering): 클라이언트에서 렌더링이 이뤄지는 것
Server Components
- 서버에서 컴포넌트를 렌더링하고 그 결과를 클라이언트로 전송
- 클라이언트 측의 렌더링 부담을 줄이고 성능을 향상시키는 데 도움을 줌
- Server Components의 렌더링 과정
  1. 서버에 컴포넌트 렌더링 요청
  2. 서버에서 컴포넌트 렌더링
  3. RSC Payload 생성 및 전송
  4. 클라이언트에서 서버 컴포넌트 재구성
  5. 상호작용 처리 및 클라이언트 컴포넌트 렌더링
  6. 최종 UI 렌더링
- Server Rendering Strategies
  - Static Rendering
    - 빌드 시 또는 데이터 재검증 후 백그라운드에서 Route가 렌더링 됨
  - Dynamic Rendering
    - 요청 시점에 각 사용자에 대해 Route가 동적으로 렌더링 됨
  - Streaming
    - 서버에서 UI를 점진적으로 렌더링 함
    - 기본적으로 Next.js App Router에 내장되어 있음
- 서버 렌더링의 장점
  - 빠른 Data Fetching
  - 보안성 향상
  - Caching
  - 성능 향상
  - 초기 페이지 로드 및 FCP(First Contentful Paint) 향상
  - 검색 엔진 최적화(SEO)
  - 스트리밍(Streaming)
Client Components
- 클라이언트에서 렌더링이 이뤄지는 것
- 클라이언트 컴포넌트를 사용하면 사용자와의 상호작용성 및 브라우저 API 사용 가능
- 파일의 맨 위에 리액트의 'use client' 지시어를 추가하여 사용
  - 해당 파일에서 가져오는 모든 모듈(하위 컴포넌트 포함)이 클라이언트 번들의 일부로 간주됨
  - 여러 개의 'use client' 진입점을 정의할 수 있음
- Next.js에서의 Client Components 렌더링
  - Full Page Load (전체 페이지 로드)
    - React의 API를 사용하여 클라이언트 및 서버 컴포넌트 모두에 대해 서버에서 정적 HTML 미리보기를 렌더링
    - 서버 컴포넌트와 클라이언트 컴포넌트가 각각 렌더링 됨
  - Subsequent Navigations (후속 탐색)
    - 클라이언트 컴포넌트는 서버에서 렌더링되는 HTML 없이 전적으로 클라이언트에서 렌더링 됨
Server and Client Composition Patterns
- Client Components 내에 Server Components나 Server Actions 코드를 작성하여 서버 환경에서 실행되도록 하는 패턴
Edge와 Node.js Runtimes
- Edge Runtime
  - Web API를 기반으로 한 실행 환경
  - Node.js API의 일부를 지원
  - 사용자들에게 빠른 속도로 동적인 컨텐츠를 제공하고 싶을 경우에 적합
- Node.js Runtime
  - Node.js를 기반으로 한 실행 환경
  - Node.js의 모든 API를 지원하며, 연관된 라이브러리들도 모두 사용 가능
  - Edge Runtime에 비해서 무겁기 때문에 속도면에서는 상대적으로 느리고, 서버 인프라 관리나 운영에 대한 비용도 상대적으로 높음
  - Serverless Node.js
    - Node.js Runtime을 사용하면서도 인프라 관리에 대한 비용을 낮출 수 있게 해주는 것
    - Vercel에서 제공하는 Serverless Function이 해당

개발자를 위한 슬라이드 작성 도구

마지막 업데이트: 2025년 10월 24일 02시 35분

On this page

9.7 마치며

.css-jz2m06{color:var(--chakra-colors-blue-400);-webkit-text-decoration:underline;text-decoration:underline;}처음 만난 Next.js 문서

처음 만난 Next.js 문서