Next.js

NEXT.jsλž€?

The React Framework for the Web

React기반의 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ°œλ°œν•  λ•Œ 생산성, ν™•μž₯μ„±, μ„±λŠ₯ λ“±, κ°œλ°œμžκ°€ 직면할 λ‹€μ–‘ν•œ λ¬Έμ œλ“€μ˜ μ†”λ£¨μ…˜μ„ μ œκ³΅ν•œλ‹€.

Nextμ—μ„œ μ œκ³΅ν•΄μ£ΌλŠ” μ†”λ£¨μ…˜

  • SSR(Server Side Rendering)

  • λΌμš°νŒ… 섀계가 ν•„μš”μ—†λŠ” File-system based λΌμš°νŒ…

  • SEO, Image, Font, Scripts μ΅œμ ν™”

  • Server API λΉŒλ“œ

NEXT.js 역사

2016년도에 Vercelμ‚¬μ—μ„œ μ˜€ν”ˆμ†ŒμŠ€λ‘œ 첫 릴리즈 λ˜μ—ˆλ‹€.

Vercel은 aws와 같은 PaaS(Platform-as-a-Service) 즉, ν΄λΌμš°λ“œ ν˜ΈμŠ€νŒ… μ„œλΉ„μŠ€λ₯Ό μ œκ³΅ν•˜λŠ” νšŒμ‚¬μ΄λ‹€.

ν˜„μž¬λŠ” 13 버전이 릴리즈 λ˜μ–΄μžˆκ³  React 18 버전에 맞좰 λ‹€μ–‘ν•œ κΈ°λŠ₯듀이 μΆ”κ°€ λ˜μ—ˆλ‹€.

NEXT.js μ² ν•™

  • zero-config: λ³΅μž‘ν•œ μ„€μ • 없이 κ°œλ°œμ„ ν•  수 μžˆλ„λ‘ κΈ°λ³Έ 섀정을 μ œκ³΅ν•œλ‹€.

  • javascript everywhere: ν•˜λ‚˜μ˜ ν”„λ‘œμ νŠΈ λ‚΄μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ ν•˜λ‚˜λ‘œ front, back λͺ¨λ‘ κ΅¬ν˜„ κ°€λŠ₯ν•˜λ„λ‘ μ œκ³΅ν•œλ‹€.

  • automatic code spliting: μžλ™μœΌλ‘œ μ½”λ“œ μŠ€ν”Œλ¦¬νŒ…μ„ μˆ˜ν–‰ν•˜μ—¬ μ‚¬μš©μžκ°€ ν•„μš”λ‘œν•˜λŠ” νŽ˜μ΄μ§€μ˜ μ΅œμ†Œν•œμ˜ μ½”λ“œλ§Œ μ œκ³΅ν•˜μ—¬ λΉ λ₯Έ 초기 λ‘œλ”© 속도λ₯Ό μ œκ³΅ν•œλ‹€.

  • server side rendering: μ„œλ²„ μΈ‘μ—μ„œ 앱을 μ‹€ν–‰ν•˜κ³  νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ ν•˜μ—¬ SEO μ΅œμ ν™” 및 초기 λ Œλ”λ§ 속도λ₯Ό κ°œμ„ ν•œλ‹€.

  • anticiipated requests: μ‚¬μš©μžκ°€ 보고 μžˆλŠ” νŽ˜μ΄μ§€μ—μ„œ ν•„μš”ν•œ 것듀을 미리 μ˜ˆμΈ‘ν•˜μ—¬ μ œκ³΅ν•œλ‹€.

  • simple, easy to deploy: μ†μ‰½κ²Œ 배포할 수 μžˆλŠ” 방법을 μ œκ³΅ν•œλ‹€.

Last updated