Search

Next.js μ†Œκ°œ

Next.js μ†Œκ°œ

Next.js μ†Œκ°œ

β€’
Next.js λž€?
β€’
Next.js νŠΉμ§•
β—¦
μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§ (SSR)
β—¦
정적 μ‚¬μ΄νŠΈ 생성 (SSG)
β—¦
파일 기반 λΌμš°νŒ…
β—¦
동적 λΌμš°νŒ…
β—¦
API 라우트
β—¦
μžλ™ μ½”λ“œ λΆ„ν• 
β—¦
이미지 μ΅œμ ν™”
β—¦
TypeScript 지원
β—¦
ν•« λ¦¬λ‘œλ”©
β—¦
μ„œλ²„ μ»΄ν¬λ„ŒνŠΈμ™€ ν΄λΌμ΄μ–ΈνŠΈ μ»΄ν¬λ„ŒνŠΈ
β—¦
미듀웨어
β—¦
ν΄λΌμš°λ“œ 톡합 (Vercel)
β—¦
λ‹€κ΅­μ–΄ 지원 (i18n)
β—¦
App Router
β€’
Next.js ν•™μŠ΅ λ¬Έμ„œ

Next.js λž€?

SSR, SSG, μžλ™ μ½”λ“œ λΆ„ν•  κΈ°λŠ₯ 등을 μ§€μ›ν•˜λŠ” React 기반 ν’€μŠ€νƒ μ›Ή ν”„λ ˆμž„μ›Œν¬
β€’
SSR (Server-Side Rendering)
β€’
SSG (Static Site Generation)
β€’
μžλ™ μ½”λ“œ λΆ„ν•  (Automatic Code Splitting)
β€’
파일 기반 λΌμš°νŒ…

SSR (Server-Side Rendering)

μ„œλ²„μ—μ„œ HTML을 μƒμ„±ν•˜κ³  ν΄λΌμ΄μ–ΈνŠΈμ— μ „λ‹¬ν•˜λŠ” λ Œλ”λ§ λ°©μ‹μž…λ‹ˆλ‹€.
β€’
μž‘λ™ 방식: μ‚¬μš©μžκ°€ μ›Ή νŽ˜μ΄μ§€λ₯Ό μš”μ²­ν•˜λ©΄, μ„œλ²„κ°€ ν•΄λ‹Ή νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•˜κ³  μ™„μ„±λœ HTML을 ν΄λΌμ΄μ–ΈνŠΈμ— λ°˜ν™˜ν•©λ‹ˆλ‹€. ν΄λΌμ΄μ–ΈνŠΈλŠ” λ°˜ν™˜λœ HTML을 μ¦‰μ‹œ ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€.
β€’
μž₯점: 초기 νŽ˜μ΄μ§€ λ‘œλ”© 속도가 λΉ λ₯΄κ³ , 검색 엔진 μ΅œμ ν™”(SEO)에 μœ λ¦¬ν•©λ‹ˆλ‹€. μ‚¬μš©μžκ°€ μš”μ²­ν•  λ•Œλ§ˆλ‹€ μ„œλ²„μ—μ„œ νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•˜λ―€λ‘œ μ΅œμ‹  데이터가 ν¬ν•¨λœ νŽ˜μ΄μ§€λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
β€’
단점: μ„œλ²„μ— λΆ€ν•˜κ°€ 걸릴 수 있으며, 맀 μš”μ²­λ§ˆλ‹€ μ„œλ²„μ—μ„œ λ Œλ”λ§μ„ μˆ˜ν–‰ν•˜λ―€λ‘œ 응닡 μ‹œκ°„μ΄ 증가할 수 μžˆμŠ΅λ‹ˆλ‹€.

SSG (Static Site Generation)

λΉŒλ“œ μ‹œμ μ— HTML νŒŒμΌμ„ μƒμ„±ν•˜μ—¬ μ„œλ²„μ— λ°°ν¬ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€.
β€’
μž₯점: μ„œλ²„ λΆ€ν•˜κ°€ 적고 νŽ˜μ΄μ§€ λ‘œλ”© 속도가 λΉ λ¦…λ‹ˆλ‹€. CDN을 톡해 μ „ μ„Έκ³„μ μœΌλ‘œ λΉ λ₯΄κ²Œ μ œκ³΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
β€’
단점: νŽ˜μ΄μ§€λ₯Ό 생성할 λ•Œμ˜ λ°μ΄ν„°λŠ” 정적이며, 이후 데이터 λ³€κ²½ μ‹œ λ‹€μ‹œ λΉŒλ“œν•΄μ•Ό ν•©λ‹ˆλ‹€.

μžλ™ μ½”λ“œ λΆ„ν•  (Automatic Code Splitting)

μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ JavaScript μ½”λ“œλ₯Ό μ—¬λŸ¬ 개의 λ²ˆλ“€λ‘œ λ‚˜λˆ„μ–΄ ν•„μš”ν•œ λΆ€λΆ„λ§Œ λ‘œλ“œν•˜λŠ” 기술
β€’
μž₯점: 초기 λ‘œλ”© μ‹œκ°„μ΄ λ‹¨μΆ•λ˜κ³  μ„±λŠ₯이 ν–₯μƒλ©λ‹ˆλ‹€. νŽ˜μ΄μ§€μ™€ μ»΄ν¬λ„ŒνŠΈ λ‹¨μœ„λ‘œ μ½”λ“œκ°€ λ‚˜λˆ„μ–΄μ Έ μžˆμ–΄, ν•„μš”ν•  λ•Œλ§Œ λ‘œλ“œλ˜λ―€λ‘œ 전체 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ½”λ“œκ°€ ν•œ λ²ˆμ— λ‘œλ“œλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
β€’
단점: μ½”λ“œ 뢄할을 λ„ˆλ¬΄ μ„ΈλΆ„ν™”ν•˜λ©΄ 좔가적인 λ„€νŠΈμ›Œν¬ μš”μ²­μ΄ λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€.

파일 기반 λΌμš°νŒ…

파일 이름과 디렉토리 ꡬ쑰가 URL 경둜λ₯Ό κ²°μ •ν•˜μ—¬ λΌμš°νŒ…μ„ κ΄€λ¦¬ν•˜λŠ” 기술
β€’
파일 ꡬ쑰
β€’
URL 경둜

파일 ꡬ쑰

/pages /index.js /about.js
Plain Text
볡사

URL 경둜

URL 경둜
파일 경둜
μ„€λͺ…
/
pages/index.js
ν™ˆ νŽ˜μ΄μ§€
/about
pages/about.js
About νŽ˜μ΄μ§€

Next.js νŠΉμ§•

νŠΉμ§•
μ„€λͺ…
μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§ (SSR)
μ„œλ²„μ—μ„œ νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈμ— HTML을 μ „λ‹¬ν•©λ‹ˆλ‹€.
정적 μ‚¬μ΄νŠΈ 생성 (SSG)
λΉŒλ“œ μ‹œμ μ— 정적 HTML νŒŒμΌμ„ μƒμ„±ν•˜μ—¬ νŽ˜μ΄μ§€λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
파일 기반 λΌμš°νŒ…
pages 디렉토리 λ‚΄μ˜ 파일과 폴더 ꡬ쑰λ₯Ό 기반으둜 μžλ™μœΌλ‘œ 라우트λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
동적 λΌμš°νŒ…
파일 이름에 λŒ€κ΄„ν˜Έ []λ₯Ό μ‚¬μš©ν•˜μ—¬ 동적 경둜λ₯Ό μ •μ˜ν•©λ‹ˆλ‹€.
API 라우트
pages/api 디렉토리 내에 API μ—”λ“œν¬μΈνŠΈλ₯Ό μ •μ˜ν•˜μ—¬ μ„œλ²„λ¦¬μŠ€ APIλ₯Ό κ΅¬ν˜„ν•©λ‹ˆλ‹€.
μžλ™ μ½”λ“œ λΆ„ν• 
νŽ˜μ΄μ§€ λ‹¨μœ„λ‘œ μ½”λ“œκ°€ λΆ„ν• λ˜μ–΄ ν•„μš”ν•œ λΆ€λΆ„λ§Œ λ‘œλ“œλ©λ‹ˆλ‹€.
이미지 μ΅œμ ν™”
next/image μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν•˜μ—¬ μ΄λ―Έμ§€μ˜ μ΅œμ ν™”μ™€ 지연 λ‘œλ”©μ„ μ§€μ›ν•©λ‹ˆλ‹€.
TypeScript 지원
TypeScript와 μ›ν™œν•˜κ²Œ ν†΅ν•©λ˜μ–΄ νƒ€μž… μ•ˆμ „μ„±μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
ν•« λ¦¬λ‘œλ”©
μ½”λ“œ λ³€κ²½ μ‹œ νŽ˜μ΄μ§€κ°€ μžλ™μœΌλ‘œ μ—…λ°μ΄νŠΈλ˜μ–΄ 개발 속도가 λΉ¨λΌμ§‘λ‹ˆλ‹€.
μ„œλ²„ μ»΄ν¬λ„ŒνŠΈμ™€ ν΄λΌμ΄μ–ΈνŠΈ μ»΄ν¬λ„ŒνŠΈ
μ„œλ²„μ—μ„œλ§Œ λ Œλ”λ§λ˜λŠ” μ»΄ν¬λ„ŒνŠΈμ™€ ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ λ Œλ”λ§λ˜λŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό κ΅¬λΆ„ν•©λ‹ˆλ‹€.
미듀웨어
μš”μ²­μ„ κ°€λ‘œμ±„κ³  μ²˜λ¦¬ν•  수 μžˆλŠ” 미듀웨어 κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€.
ν΄λΌμš°λ“œ 톡합 (Vercel)
Vercel과의 톡합을 톡해 λΉ λ₯΄κ³  κ°„νŽΈν•œ 배포λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€.
λ‹€κ΅­μ–΄ 지원 (i18n)
λ‹€κ΅­μ–΄ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μœ„ν•œ κ΅­μ œν™”(i18n) κΈ°λŠ₯을 μ§€μ›ν•©λ‹ˆλ‹€.
App Router
app 디렉토리λ₯Ό μ‚¬μš©ν•˜μ—¬ 더 μœ μ—°ν•œ λΌμš°νŒ…κ³Ό λ ˆμ΄μ•„μ›ƒ 관리λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€.

Next.js ν•™μŠ΅ λ¬Έμ„œ

Next.js by Vercel - The React Framework
Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
https://nextjs.org/learn