Next 13
Next 13
λ²μ μ
μ΄ λλ©΄μ κΈ°μ‘΄ νλ‘μ νΈλ₯Ό λ§μ΄κ·Έλ μ΄μ
νλ κ²½μ° Breaking Changes
λ‘ μΈν΄ μ λ°μ μΌλ‘ λ³κ²½μ¬νμ λ§μΆ° μ
κ·Έλ μ΄λλ₯Ό ν΄μ€μΌ νλ€.
Nextλ μ΄κ²μ λ°©μ§νκ³ μ μλ‘ μΆκ°λ κΈ°λ₯κ³Ό κ·μΉλ€μ app/
μ μ μ©νμ¬ κΈ°μ‘΄ page/
ꡬ쑰μ μ±μ΄ λ§κ°μ§μ§ μκ³ μ μ§μ μΌλ‘ λ§μ΄κ·Έλ μ΄μ
ν μ μλλ‘ μ 곡νλ€.
Braking Changes
μννΈμ¨μ΄ μμ€ν μ ν λΆλΆμ΄ λ³κ²½λμ΄ λ€λ₯Έ κ΅¬μ± μμμ μ μ¬μ μΌλ‘ μ₯μ λ₯Ό μΌμΌν€λ κ²
Routing
맀μΉν κ²½λ‘λ₯Ό ν΄λ μ΄λ¦μΌλ‘ λκ³ νμμ page
μ»΄ν¬λνΈ νμΌμ λλ©΄ μλμΌλ‘ λΌμ°ν
λλ€.
ν΄λ(κ²½λ‘)λ³λ‘ λ²μλ₯Ό μ’ν μ¬μ¬μ©λλ λ μ΄μμ
, μλ¬ μν
, λ‘λ© UI
λ±μ 곡μ νμ¬ ν΄λΉ λΌμ°νΈ μμμ μ²λ¦¬ν΄μ£ΌκΈ° μν¨
page/
βapp/
Folder & File based routing
Dynamic Routing
generateStaticParams()
generateStaticParams()
μ΄μ λ²μ μ getStaticPaths()
λ₯Ό λ체νλ ν¨μ
미리 μμ±ν νμ΄μ§μ λμ κ²½λ‘(slug)λ₯Ό μ§μ νκ³ { slug: value } ꡬ쑰μ λ°°μ΄μ λ°ννκΈ°λ§ νλ©΄ λλ€.
Layout
λ μ΄μμμ κΈ°λ³Έμ μΌλ‘ μλ² μ»΄ν¬λνΈ(λ³κ²½ κ°λ₯)
κ°μ κ²½λ‘ λ° νμ κ²½λ‘μ νμ΄μ§μ 곡μ λλ©° λνλλ€. β λ μ΄μμ(μ»΄ν¬λνΈ)
κ²½λ‘ λ³λ‘ λ μ΄μμμ μ§μ κ°λ₯νλ©° μμμ μλ λ μ΄μμμ μ€μ²©λμ΄ μ μ©λλ€.
λ°μ΄ν° ν¨μΉμ΄ κ°λ₯νλ©° λ μ΄μμκ° μ λ¬μ΄ λΆκ°λ₯νμ§λ§ κ²½λ‘κ° κ°μ κ²½μ° κ° λ μ΄μμμ΄ μ€λ³΅μΌλ‘ λ°μ΄ν° ν¨μΉμ Reactκ° μμμ μ€λ³΅λ μμ²μ μ κ±°νλ€.
Root Layout (νμ)
app/
λ΄μμ κ°μ₯ μμμ μλ layout.tsx
λ₯Ό λ£¨νΈ λ μ΄μμμ΄λΌ μΉνλ©° λͺ¨λ νμ΄μ§μ λνλλ€.
μ΄μ λ²μ μ
_app.tsx
,_document.ts λ₯Ό λ체νλ€.
μλ²μμ λ°νλ μ΄κΈ° HTMLμ μμ ν μ μλ€
Next.jsκ° μλμΌλ‘
<html>
,<body>
λ₯Ό μμ±νμ§ μμΌλ―λ‘ λ£¨νΈ λ μ΄μμμ ν΄λΉ νκ·Έλ₯Ό μ μν΄μΌ νλ€.
Not Found Page
컀μ€ν
404 pageλ₯Ό λ§λλ €λ©΄ νμΌμ΄λ¦μ not-found
λ‘ μ§μ ν΄μΌ νλ€.
ν΄λ(κ²½λ‘)λ΄μ κ°μ₯ κ°κΉμ΄ not-found
νμΌμ΄ μ¬μ©λμ΄ νμ΄μ§ λ³λ‘ μλ¬ νμ΄μ§λ₯Ό μ€μ κ°λ₯
νμ¬ μμ μλ notFound()
νΈμΆμ μν΄ νΈλ¦¬κ±°λ λλ§ λ λλ§λλ€.
Global Not Found Page
ν μμ 13.2.4
λ²μ μμλ Global Not Found Page κΈ°λ₯μ΄ app/
λΌμ°ν
μμλ μμ§ μ 곡λμ§ μκ³ μλ€.
Global Not Found Pageλ₯Ό ꡬννλ €λ©΄?
κΈ°μ‘΄ λ°©μλλ‘
page/
νμμ404.tsx
μ»΄ν¬λνΈλ₯Ό μΆκ°ν΄ μ¬μ©app/ λ΄μμ
λμ λΌμ°ν μ νμ©νμ¬ κ΅¬ν
μ°νν΄μ app/
λΌμ°ν
μΌλ‘ Global Not Found Page ꡬννκΈ°
μ°νν΄μ app/
λΌμ°ν
μΌλ‘ Global Not Found Page ꡬννκΈ°Metadata
μ΄λ€ νμ΄μ§(or λ μ΄μμ)μμλ κ°μ²΄ ννλ‘ λ metadata
λ³μλ₯Ό export
ν΄μ£ΌκΈ°λ§ νλ©΄ λλ€.
Dynamic Metadata
generateMetadata()
ν¨μλ₯Ό ν΅ν΄ λΉλκΈ° λ°μ΄ν°λ₯Ό ν¨μΉ ν λ©νλ°μ΄ν° κ°μ²΄λ₯Ό λ°ννλ€.
generateMetadata()
ν¨μλ₯Ό ν΅ν΄ λΉλκΈ° λ°μ΄ν°λ₯Ό ν¨μΉ ν λ©νλ°μ΄ν° κ°μ²΄λ₯Ό λ°ννλ€.μ¬μ©μμκ² νμ΄μ§λ₯Ό μ£ΌκΈ° μ generateMetadata()
νΈμΆλκ³ λ©νλ°μ΄ν° μ λ³΄κ° μμ± λμ΄μΌμ§λ§ νμ΄μ§λ₯Ό μ μ‘νλ€.
Default Metadata
λ°λ‘ μΆκ°νμ§ μμλ κΈ°λ³Έμ μΌλ‘ μ€μ λλ λ©ννκ·Έ
Rendering
λ λλ§ λ°©μμ΄ (page/) νμ΄μ§ λ¨μ -> (app/) μ»΄ν¬λνΈ λ¨μλ‘ λ³κ²½λμλ€.
κΈ°μ‘΄ page λ¨μ λ λλ§ λ°©μμ λ¬Έμ μ
νμ΄μ§ λ¨μμ λ λλ§ λ°©μμ μ±μ κ·λͺ¨κ° 컀μ§μλ‘ ν΄λΌμ΄μΈνΈκ° λ°λ λ²λ€ μλ°μ€ν¬λ¦½νΈ μ½λκ° μ»€μ§λ λ¬Έμ κ° μμλ€.
μ΄λ₯Ό ν΄κ²°νκΈ° μν΄ React 18 λ²μ μ λ§μΆ° μλ² μ»΄ν¬λνΈ, ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈλ‘ ꡬλΆνμ¬ λ λλ§ νλ λ°©μμ΄ λμ λμλ€.
μ»΄ν¬λνΈ λ¨μ λ λλ§ λ°©μμ μ₯μ
νλμ νμ΄μ§ μμμ μ¬λ¬ μ»΄ν¬λνΈλ₯Ό κ°κΈ° λ€λ₯Έ λ λλ§ λ°©μμ κ·μ ν΄ μ‘°ν©νμ¬ μ¬μ©μ΄ κ°λ₯νλ€.
μλ² μ»΄ν¬λνΈλ μλ²μμλ§ μμ μ΄ μ΄λ£¨μ΄μ§κ³ μλ²μμ λ λλ§λμ΄ ν΄λΌμ΄μΈνΈμκ² λ³΄λΌ μ½λκ° μκΈ° λλ¬Έμ ν΄λΌμ΄μΈνΈκ° λ°μ λ²λ€ μλ°μ€ν¬λ¦½νΈ μ½λκ° νμ ν μ€μ΄λ€κ² λλ€.
μ¦, μ¬μ©μμ μΈν°λ μ μ΄ νμν μ½λλ§ ν΄λΌμ΄μΈνΈμκ² μ λ¬λμ΄ μ΄κΈ° λ‘λ© μλκ° λμ± λΉ¨λΌμ§κ² λλ€.
React v18μμ μλ‘κ² μΆκ°λ κΈ°λ₯
μλ²μμμ 리μ‘νΈ μ½λλ₯Ό μμ±ν μ μκ² λμλ€.
μλ²μμμλ§ λμνλ μ»΄ν¬λνΈ
SSR !== RSC, μλ‘ λ체μ κ° μλλ©° μ¬μ©μ κ²½νμ ν₯μμν€κΈ° μν΄ μλ‘ λ³΄μνμ¬ μ¬μ©λλ κ²
ν리 λ λλ§(SSR) + λ²λ€μ¬μ΄μ¦ μ΅μν(RSC)
app/
λ΄μ λͺ¨λ μ»΄ν¬λνΈλ κΈ°λ³Έμ μΌλ‘ μλ² μ»΄ν¬λνΈμ΄λ€.μλ²μμ λΉλ λ λ μ€νλλ μ»΄ν¬λνΈ, κΈ°λ³Έμ μΌλ‘ SSG
μ μ μΈ HTML ννλ‘ ν΄λΌμ΄μΈνΈμκ² μ λ¬λλ©° ν΄λΌμ΄μΈνΈμκ² μ λ¬λλ μλ°μ€ν¬λ¦½νΈ μ½λλ Zero
λΈλΌμ°μ μμ μ 곡νλ API, Hooksλ₯Ό μ¬μ©ν μ μμ§λ§ node.js(μλ²)μμ μ 곡νλ APIλ μ¬μ©μ΄ κ°λ₯νλ€.
μλ² μ»΄ν¬λνΈμμ λ°μ΄ν°λ₯Ό 곡μ ν λ μ μ μ±κΈν€κ³Ό κ°μ λ€μ΄ν°λΈ μλ°μ€ν¬λ¦½νΈ ν¨ν΄μ νμ©
μλ² μ»΄ν¬λνΈ κ°μ μλ²(DB)μμ ν¨μΉν λ°μ΄ν° μμμ 곡μ νκ³ μΆμ λλ λ°μ΄ν°λ₯Ό λΆνμνκ² μ λ¬ν νμ μμ΄ κ·Έ λ°μ΄ν°λ₯Ό νμλ‘ νλ κ³³μμ ν¨μΉνλ©΄ λλ€. κ°μ Έμ¨ λ°μ΄ν°λ μΊμ± λμ΄ λ₯μ€νΈμμ μ€λ³΅ μμ²μ μ κ±°νλ μμΌλ‘ μ΅μ νκ° μλμΌλ‘ μ΄λ£¨μ΄μ§λ€.
Client Component
μ΄μ λ²μ μμ μ¬μ©νλ ν리λ λλ§ + νμ΄λλ μ΄μ λ°©μ
λν΄νΈκ° μλ²μ»΄ν¬λνΈμ΄κΈ° λλ¬Έμ ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈλ‘ μ¬μ©νκΈ° μν΄μλ μλ¨μ
use client
λ₯Ό λͺ μν΄μ£Όμ΄μΌ νλ€.ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈλΌκ³ ν΄μ 무쑰건
csr
λ‘ λμνλ κ²μ΄ μλλ€.μλ²μμ μ»΄ν¬λνΈλ₯Ό μ½κ³ μ μ μΈ λΆλΆμ λΆλ¦¬νμ¬ ν리λ λλ§μ ν¬ν¨μν€κ³ νμ΄λλ μ΄μ κ³Όμ μ΄ μΌμ΄λλ€. (κΈ°μ‘΄ λ°©μκ³Ό λμΌ)
μ¬μ©μμ μ΄λ²€νΈκ° μκ±°λ λΈλΌμ°μ μμ μ€νλμ΄μΌ νλ μ½λλ€μ΄ μλ€λ©΄ ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈμ΄λ€.
μ¦, μ¬μ©μ(λΈλΌμ°μ )μκ² λ³΄λ΄μ ΈμΌ νλ μ½λλ€μ΄ λ΄κΈ΄ μ»΄ν¬λνΈ
μνλ₯Ό μ°κ±°λ hooksλ₯Ό μ¬μ©νλ€λ©΄ ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈλ‘ μ¬μ©ν΄μΌ νλ€.
μλ² μ»΄ν¬λνΈμμ ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈλ‘ μ λ¬νλ propsλ serialization(μ§λ ¬ν)κ° κ°λ₯ν΄μΌ νλ€.
ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈ λ΄λΆμμ μ¬μ©λλ λͺ¨λ, νμ μ»΄ν¬λνΈλ€μ λͺ¨λ ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈκ° λλ€.
ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈ λ΄λΆμμ μλ² μ»΄ν¬λνΈλ₯Ό μν¬νΈν΄μ μ¬μ©ν μ μλ€.
λ°λΌμ κ°λ₯νλ€λ©΄ ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈλ μ»΄ν¬λνΈ Treeμμ κ°μ₯ λλ¨μ μμΉνλ leafλ‘ μ΄λμν€λ κ²μ΄ μ’λ€.
λΆκ°νΌν κ²½μ° λ₯μ€νΈμμ μ»΄ν¬μ§μ ν¨ν΄(μμ μ»΄ν¬λνΈλ₯Ό propsλ‘ μ λ¬νμ¬ μμ μ»΄ν¬λνΈλ₯Ό μ‘°ν©νλ ν¨ν΄)μ νμ©ν κ²μ κΆκ³ νλ€.
serialization(μ§λ ¬ν)λ κ°μ²΄λ₯Ό λ€νΈμν¬ μμμ μ μ‘νκ±°λ νμΌμ μ μ₯νκΈ° μν΄ κ°μ²΄λ₯Ό μΌλ ¨μ λ°μ΄νΈ μ€νΈλ¦ΌμΌλ‘ λ³ννλ κ³Όμ
μλ°μ€ν¬λ¦½νΈμμλ JSON.stingify()
, JSON.prase()
ν¨μλ₯Ό ν΅ν΄ κ°μ²΄λ₯Ό JSON λ¬Έμμ΄λ‘ μ§λ ¬ν & μμ§λ ¬ν κΈ°λ₯μ μ 곡νλ€.
Serialization(μ§λ ¬ν) κ°λ₯ μ¬λΆ κ΅¬λΆ - κ°λ₯: κ°μ²΄, λ°°μ΄, μ«μ, λ¬Έμμ΄, λΆλ¦¬μΈ, null, undefined - λΆκ°λ₯: ν¨μ, Date
μλ² μ»΄ν¬λνΈ ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈ κ΅¬λΆνκΈ°
μ¬μ©μμκ² μ λ¬ λμ΄μΌ νλ μ½λκ° ν¬ν¨λ κ²½μ°λ§ ν΄λΌμ΄μΈνΈ μ»΄ν¬λνΈλ‘ λ§λ€μ΄ μ±λ₯μ λμ΄μ.
Data Fetching
getStaticProps()
,gstServerSideProps()
λ₯Ό λ체νλ μ¬λ¬κ°μ§ λ°©μμ΄ μΆκ° λμλ€.
μ΄λ μμ μ νμ΄μ§(or λ μ΄μμ)λ₯Ό μ¬μμ± ν μ§ μ§μ
revalidate
λΈλΌμ°μ μμ νμ΄μ§(or λ μ΄μμ)μ μ¬κ²μ¦νλ κΈ°λ³Έ μκ°μ μ§μ
fetch()
μ μ€μ λ μΊμ μ΅μ
μ override νμ§ μλλ€.
-> revalidate < fetch()
fetch(url, options)
async/await
μ μ¬μ©νμ¬ λ°μ΄ν° ν¨μΉ
Next.jsλ Web fetch APIλ₯Ό νμ₯νμ¬ μ¬μ©
μΊμ μ 무μ λ°λΌ SSG
, ISR
, SSR
λ‘ λλκ² λλ€.
Dynamic Rendering
λμ ν¨μ λ₯Ό μ¬μ©νκ±°λ fetch()
μμ²μ μΊμ μ΅μ
μ΄ no-store μΌ λ λμ λ λλ§(SSR)μΌλ‘ μ νλλ€.
λμ ν¨μ(Dynamic fuction)
μ¬μ©μμ μμ² μμ μ μ μ μλ μ 보λ₯Ό μ¬μ©ν ν¨μλ₯Ό λμ ν¨μλΌ νλ€.
ex) μμ² μμ μ μ μ μλ μ 보 -> μΏ ν€, HTTP μμ² ν€λ, URL params
API Route
Nextκ° Full StackμΌλ‘ κ°λ°ν μ μλ μ΄μ
μμ² λ³(Get, Post)λ‘ λλμ΄ κ΅¬μ‘°μ μΌλ‘ ꡬν κ°λ₯νλλ‘ λ°λμλ€.
λΌμ°νΈλΉ ν΄λ νλ
λΌμ°νΈκ° λλ ν΄λ μ¦, νμ΄μ§ λ³λ‘ λ€μνκ³ μ μ©ν μμ΄ν λ€μ μ€μ ν μ μλ€.
ν΄λ λ³λ‘ μ€μ ν μ μλ νλͺ©λ€
page.tsx: ν΄λΉ ν΄λλ₯Ό κ²½λ‘λ‘ νλ νμ΄μ§ μ»΄ν¬λνΈ
layout.tsx: νμ΄μ§λ₯Ό κ°μΈλ 골격μ μ€μ (μμ λ μ΄μμμ μ€μ²©λ¨)
template.tsx: λ μ΄μμκ³Ό λΉμ·νλ. νμ΄μ§ μ νμ μ»΄ν¬λνΈμ μ μΈμ€ν΄μ€κ° λ§μ΄νΈλμ΄ μ€νλλ μ°¨μ΄κ° μλ€.
loading.tsx: ν΄λΉ λΌμ°νΈμμ νμ΄μ§ UIκ° μ€λΉλκΈ° μ μ¬μ©μμκ² λ³΄μ¬μ£Όλ UI μ»΄ν¬λνΈ (React.Suspense)
error.tsx: λ°νμ μλ¬μ λ체 UI μ»΄ν¬λνΈ (React.ErrorBoundary)
not-found.tsx: ν΄λΉ λΌμ°νΈμ 404 UI μ»΄ν¬λνΈ
loading.tsx
ν΄λΉ λΌμ°νΈμ νμ΄μ§κ° μ€λΉλλ λμ loading.tsxμ μ μΈν μ»΄ν¬λνΈκ° 보μ¬μ§κ² λλ€. * layoutμ μ μΈν page λΆλΆλ§ μ μ©λ¨
μ΄ μ»΄ν¬λνΈλ₯Ό μ¬μ©νλ©΄ λ΄λΆμ μΌλ‘ React.Suspense λ₯Ό μ¬μ©νλ€.
λ‘λ©μ λμ μΈ SSRμ ν λ λΉ λ₯΄κ² λ‘λ© UIλ₯Ό λ¨Όμ 보μ¬μ£Όκ³ μ€μ μ»΄ν¬λνΈλ₯Ό λ³λ ¬μ μΌλ‘ λ°±κ·ΈλΌμ΄λμμ μ€νν μλ£λλ©΄ μ μ‘νλ μμΌλ‘ μ¬μ©μμκ² νμ΄μ§κ° μλΉμ€μ΄λΌλ κ²μ μλ¦°λ€.
SSGλ μ΄λ―Έ μ μ μΈ HTMLμ μλ²μμ μ μ‘λκΈ° λλ¬Έμ λ‘λ©μ μλ―Έκ° νμμλ€.
νκ³μ
ν΄λΉ μ»΄ν¬λνΈλ νμ΄μ§ μ 체λ₯Ό λ¬ΆκΈ° λλ¬Έμ λ³λ ¬ μ€νΈλ¦¬λ°μ μν΄μλ λ΄λΆ μμλ€μ μμ€νμ€λ₯Ό λ°λ‘ μ€μ ν΄μ€μΌ νλ€.
Suspense μ¬μ© μ΄μ
UIλ₯Ό λ λλ§νκΈ° μ μ λͺ¨λ λ°μ΄ν°κ° λ‘λλ λκΉμ§ κΈ°λ€λ¦΄ νμ μμ΄ νμ΄μ§μ μΌλΆλ₯Ό λ 빨리 νμν μ μλ€.
Streaming Server Rendering: μ€νΈλ¦¬λ°μ μ¬μ©νλ©΄ νμ΄μ§μ HTMLμ λ μμ μ²ν¬λ‘ λλκ³ ν΄λΉ μ²ν¬λ₯Ό μλ²μμ ν΄λΌμ΄μΈνΈλ‘ μ μ§μ μΌλ‘ μ μ‘ν μ μμ΅λλ€
Selective Hydration: μ¬μ©μ μΈν°λ μ μ ν΅ν΄ μ΄λ€ μ»΄ν¬λνΈλ₯Ό λ¨Όμ μνν μ§ μ νμ μΌλ‘ κ²°μ
Next.jsμμ loading.tsxλ₯Ό μ¬μ©νκ±°λ Suspenseλ₯Ό μ¬μ©νλ©΄ μ€νΈλ¦¬λ°μ ꡬνν μ μλ€. μ€νΈλ¦¬λ°μ κ° μ»΄ν¬λνΈλ₯Ό νλμ μ²ν¬λ‘ κ°μ£Όν μ μλ€
error.tsx
μλ¬ μ»΄ν¬λνΈλ μ΄λ€ μλ¬κ° λ°μνλμ§μ νμ΄μ§λ₯Ό 리μ ν μ μλ μ½λ°±ν¨μλ₯Ό propsλ‘ μ 곡νλ€.
λ΄λΆμ μΌλ‘ ErrorBoundary
λ₯Ό μ¬μ©νλ€.
μλ¬ μ»΄ν¬λνΈλ λ°νμμ νμν μ¬μ©μ μ½λμ useEffect
κ°μ ν
λ€μ μ¬μ©ν΄μΌ νλ 무쑰건 Client μ»΄ν¬λνΈκ° λλ€.
loading.tsx
μ λ§μ°¬κ°μ§λ‘ νμ΄μ§ λ΄λΆ μμ λ¨μλ‘ μλ¬ UIλ₯Ό 보μ¬μ£Όκ³ μΆλ€λ©΄ ν΄λΉ μ»΄ν¬λνΈλ₯Ό ErrorBoundary
λ‘ κ°μΈλ©΄ λλ€.
κ°μ₯ κ·Όμ ν λΆλͺ¨μ error.tsx
λ₯Ό 보μ¬μ€λ€. (λ²λΈλ§ λ¨)
Last updated