Next 15

Layout

Route Group

  • ์ด๋ฆ„์ด ์†Œ๊ด„ํ˜ธ๋กœ ๊ฐ์‹ธ์ง„ ํด๋”

  • ๊ฒฝ๋กœ์ƒ์— ์•„๋ฌด๋Ÿฐ ์˜ํ–ฅ์„ ๋ผ์น˜์ง€ ์•Š์Œ

  • ๋™์‹œ์— ๊ฐ๊ธฐ ๋‹ค๋ฅธ ๊ฒฝ๋กœ๋ฅผ ๊ฐ–๋Š” ํŽ˜์ด์ง€ ํŒŒ์ผ๋“ค์„ ํ•˜๋‚˜์˜ ํด๋”๋กœ ๋ฌถ์„ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ

  • ๊ฒฝ๋กœ๊ฐ€ ๋‹ค๋ฅธ ํŠน์ • ํŽ˜์ด์ง€๋“ค์— ๋™์ผํ•œ ๋ ˆ์ด์•„์›ƒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ๋จ

์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ

์„œ๋ฒ„ ์ธก ์‚ฌ์ „ ๋ Œ๋”๋ง์—์„œ ๋”ฑ ํ•œ๋ฒˆ ์‹คํ–‰๋˜๋Š” ์ปดํฌ๋„ŒํŠธ

๋ฐ˜๋Œ€๋กœ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋Š”, 1. ์„œ๋ฒ„ ์ธก ์‚ฌ์ „ ๋ Œ๋”๋ง, 2. ํ•˜์ด๋“œ๋ ˆ์ด์…˜ ์ด 2๋ฒˆ ์‹คํ–‰๋œ๋‹ค.

์ฃผ์˜์‚ฌํ•ญ

  • ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋  ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋˜๋ฉด ์•ˆ๋œ๋‹ค.

    • ๋ฆฌ์—‘ํŠธ ํ›…, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋˜๋Š” ๊ธฐ๋Šฅ์„ ๋‹ด์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

    • Link ์ปดํฌ๋„ŒํŠธ๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ (์„œ๋ฒ„์—์„œ๋Š” ์ •์ ์ธ <a> ํƒœ๊ทธ๋กœ ๋ Œ๋”๋ง๋˜๊ณ  ์ด๋™ ์ž์ฒด๋Š” ์š”์†Œ๊ฐ€ ๊ฐ€์ง„ ๊ธฐ๋Šฅ์ด๊ธฐ ๋•Œ๋ฌธ)

  • ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ํด๋ผ์ด์–ธํŠธ์—์„œ๋งŒ ์‹คํ–‰๋˜์ง€ ์•Š๋Š”๋‹ค.

  • ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ import ํ•  ์ˆ˜ ์—†๋‹ค.

    • ํ•˜์ด๋“œ๋ ˆ์ด์…˜ ์ง„ํ–‰ ์ค‘์— ์„œ๋ฒ„์ปดํฌ๋„ŒํŠธ๋Š” ํฌํ•จ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ œ ๋ฐœ์ƒ

    • ์ด ๊ฒฝ์šฐ next.js๋Š” ์ž๋™์œผ๋กœ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ณ€๊ฒฝ (์™ผ๋งŒํ•˜๋ฉด ํ”ผํ•˜๊ธฐ)

    • ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ children props๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ OK

  • ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์ง๋ ฌํ™”๋˜์ง€ ์•Š๋Š” props๋Š” ์ „๋‹ฌํ•  ์ˆ˜ ์—†๋‹ค.

    • JSON์œผ๋กœ ์ง๋ ฌํ™”ํ•  ์ˆ˜ ์—†๋Š” ๋ฐ์ดํ„ฐ -> ํ•จ์ˆ˜, ํด๋ž˜์Šค, Map/Set,

    • ๊ทธ ์™ธ ์ง๋ ฌํ™” ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ

      • string, number, boolean, null, undefined

      • array, object

RSC Payload

React Server Component์˜ ์ˆœ์ˆ˜ ๋ฐ์ดํ„ฐ(๊ฒฐ๊ณผ๋ฌผ)

React Server Component๋ฅผ ์ง๋ ฌํ™”ํ•œ ๊ฒฐ๊ณผ

  • ์‚ฌ์ „ ๋ Œ๋”๋ง ๊ณผ์ • ์ค‘์—๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋“ค๋งŒ ๋”ฐ๋กœ ๋จผ์ € ์‹คํ–‰ํ•˜์—ฌ RSC Payload ํ˜•ํƒœ๋กœ ์ง๋ ฌํ™”๋˜๋Š” ๊ณผ์ • ์กด์žฌ

  • ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋“ค๋งŒ ๋”ฐ๋กœ ์‹คํ–‰์‹œํ‚ค๊ฒŒ ๋˜๋ฉด ๊ทธ ๊ฒฐ๊ณผ๋กœ HTML ํƒœ๊ทธ๊ฐ€ ๋ฐ”๋กœ ์‹คํ–‰๋˜๋Š”๊ฒŒ ์•„๋‹Œ RSC Payload๋ผ๋Š” JSON๊ณผ ๋น„์Šทํ•œ ๋ฌธ์ž์—ด์ด ์ƒ์„ฑ๋จ

  • RSC Payload๋Š” ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๊ฐ€ ํฌํ•จ๋จ

    • ๋ Œ๋”๋ง ๊ฒฐ๊ณผ

    • ์—ฐ๊ฒฐ๋œ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ ์œ„์น˜

    • ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์ „๋‹ฌํ•˜๋Š” props ๊ฐ’

๋„ค๋น„๊ฒŒ์ดํŒ…

Page Routing๊ณผ ๋™์ผํ•˜๊ฒŒ ํŽ˜์ด์ง€ ์ด๋™์€ Client Side Rendering ๋ฐฉ์‹์œผ๋กœ ์ฒ˜๋ฆฌ ๋‹จ, ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋…์ด ์ถ”๊ฐ€๋˜์–ด ๋ฐฉ์‹์ด ์กฐ๊ธˆ ๋ณ€๊ฒฝ๋จ

  • ํŽ˜์ด์ง€ ์ด๋™ ์š”์ฒญ ํ›„ JS ๋ฒˆ๋“ค๊ณผ ๊ฐ™์ด ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ๊ฒฐ๊ณผ๋ฌผ์ธ RSC Payload๋„ ํ•จ๊ป˜ ์ „๋‹ฌ

  • ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ํŽ˜์ด์ง€ ์ด๋™์€ useRouter (next/navigation) ์‚ฌ์šฉ *ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ๋งŒ

Prefetching

ํ˜„์žฌ ํŽ˜์ด์ง€์—์„œ ๋งํฌ๋“ค์ด ์กด์žฌํ•˜์—ฌ ์—ฐ๊ฒฐ๋œ ํŽ˜์ด์ง€์˜ ๋ฐ์ดํ„ฐ๋“ค์„ ๋ฏธ๋ฆฌ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ธฐ๋ฒ•

  • ์—ฐ๊ฒฐ๋œ ํŽ˜์ด์ง€๊ฐ€ ์ •์  ํŽ˜์ด์ง€(SSG)์ธ ๊ฒฝ์šฐ RSC Payload + JS Bunlde ํ”„๋ฆฌํŒจ์นญํ•˜์ง€๋งŒ ๋™์  ํŽ˜์ด์ง€(SSR)์ธ ๊ฒฝ์šฐ RSC Payload๋งŒ ๊ฐ€์ ธ์˜ด

    • ๊ธฐ๋ณธ์ ์œผ๋กœ SSG (๋ฐ์ดํ„ฐ๊ฐ€ ํ–ฅํ›„ ์—…๋ฐ์ดํŠธ ๋˜์ง€ ์•Š์„๊ฒƒ์ด๋ฏ€๋กœ JS Bundle ๊นŒ์ง€ ํ”„๋ฆฌํŒจ์นญ)

    • ๋นŒ๋“œ ํƒ€์ž„์—์„œ ๊ฐ€์ ธ์˜ค๊ธฐ ์–ด๋ ค์šด ๊ฒฝ์šฐ(์˜ˆ: ์ฟผ๋ฆฌ ํŒŒ๋ผ๋ฏธํ„ฐ ์‚ฌ์šฉ ๋“ฑ)์€ ๋ชจ๋‘ ๋™์  ํŽ˜์ด์ง€๋กœ ๋ถ„๋ฅ˜

๋ฐ์ดํ„ฐ ํŒจ์นญ

  • ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” async ๋ฅผ ๋ถ™์—ฌ์„œ ๋ฐ์ดํ„ฐ ํŒจ์นญ ๊ฐ€๋Šฅ

  • ๊ธฐ์กด getStaticProps, getServerSideProps๋ฅผ ๋Œ€์ฒด

    • ๋”์ด์ƒ ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ์„œ๋ฒ„์—์„œ ํŒจ์นญํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋„˜๊ฒจ ๋ฐ›์ง€ ์•Š์•„๋„๋จ

    • "Fetching data where it's needed"

ํ™˜๊ฒฝ ๋ณ€์ˆ˜์—์„œ NEXT_PUBLIC_ ์ ‘๋‘์‚ฌ๋ฅผ ์ œ๊ฑฐํ•˜๋ฉด ์„œ๋ฒ„์—์„œ๋งŒ ์ฝ์„ ์ˆ˜ ์žˆ์–ด privateํ•˜๊ฒŒ ๋™์ž‘ํ•จ

๋ฐ์ดํ„ฐ ์บ์‹œ

fetch ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ๋ถˆ๋Ÿฌ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ Next ์„œ๋ฒ„์— ๋ณด๊ด€ํ•˜๋Š” ๊ธฐ๋Šฅ

  • ์˜๊ตฌ์ ์œผ๋กœ ๋ณด๊ด€ํ•˜๊ฑฐ๋‚˜, ํŠน์ • ์‹œ๊ฐ„ ์ฃผ๊ธฐ๋กœ ๊ฐฑ์‹  ๊ฐ€๋Šฅ

  • ๋ถˆํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ์š”์ฒญ ์ˆ˜๋ฅผ ์ค„์—ฌ์„œ ์„ฑ๋Šฅ ๊ฐœ์„ 

  • fetch ์ „์šฉ

    • fetch('endpoint', { cache: 'force-cache' })

    • ์ผ๋ฐ˜ fetch๊ฐ€ ์•„๋‹Œ next ์ „์šฉ ๋ฉ”์„œ๋“œ์ž„

  • force-cache: ์š”์ฒญ ๊ฒฐ๊ณผ๋ฅผ ๋ฌด์กฐ๊ฑด ์บ์‹ฑ, ํ•œ๋ฒˆ ํ˜ธ์ถœ๋œ ํ›„ ๋‹ค์‹œ ํ˜ธ์ถœ๋˜์ง€ ์•Š์Œ

  • (default) no-store: ์š”์ฒญ ๊ฒฐ๊ณผ๋ฅผ ์บ์‹ฑํ•˜์ง€ ์•Š์Œ, ์บ์‹œ๋ฅผ ์ ˆ๋Œ€ํ•˜๋ฉด ์•ˆ๋˜๋Š” ๋ฆฌ์†Œ์Šค์— ์‚ฌ์šฉ

    • next15์—์„œ ๋ณ€๊ฒฝ๋จ 14์—์„œ๋Š” ๊ธฐ๋ณธ์œผ๋กœ ์บ์‹ฑ

  • revalidate: ํŠน์ • ์ฃผ๊ธฐ๋งˆ๋‹ค ์บ์‹œ๋ฅผ ๊ฐฑ์‹  (sec)

    • ํŽ˜์ด์ง€ ๋ผ์šฐํŒ… ๋ฐฉ์‹์— ISR๊ณผ ์œ ์‚ฌ

    • ๋งŒ๋ฃŒ ๋œ ํ›„์˜ ์ฒซ ์š”์ฒญ์€ ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ๊ฐฑ์‹ , ๋‹ค์Œ ์š”์ฒญ ๋ถ€ํ„ฐ ๊ฐฑ์‹ ๋œ ๋ฐ์ดํ„ฐ ๋ฐ˜ํ™˜

  • tags: ํŠน์ • ํƒœ๊ทธ ๊ธฐ๋ฐ˜์œผ๋กœ ์บ์‹œ๋ฅผ ๋ฌดํšจํ™”ํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค์ •

    • ์˜จ๋””๋ฉ˜๋“œ ๋ฆฌ๋ฒจ๋ฆฌ๋ฐ์ดํŠธ

    • ์š”์ฒญ์ด ๋“ค์–ด์™”์„ ๋•Œ ์ตœ์‹  ๋ฐ์ดํ„ฐ ๊ฐฑ์‹ 

cache๊ฐ€ ๋˜์—ˆ๋Š”์ง€ ๋กœ๊น… ๋ฐฉ๋ฒ•

// next.config.js
const nextConfig = {
  logging: {
    fetches: {
      fullUrl: true
    }
  }
}

๋ฆฌํ€˜์ŠคํŠธ ๋ฉ”๋ชจ์ด์ œ์ด์…˜

์—ฌ๋Ÿฌ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ค‘๋ณต๋œ ์š”์ฒญ๋“ค์„ ์บ์‹ฑํ•ด์„œ ํ•œ ๋ฒˆ๋งŒ ์š”์ฒญํ•˜๋„๋ก ์ตœ์ ํ™”

  • ๋ฐ์ดํ„ฐ ์บ์‹œ์™€๋Š” ๋‹ค๋ฆ„

  • ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๋™์•ˆ ์ค‘๋ณต๋œ ์š”์ฒญ๋“ค์— ํ•œํ•ด์„œ ์บ์‹ฑํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ

  • ๋ Œ๋”๋ง์ด ์ข…๋ฃŒ๋˜๋ฉด ์บ์‹œ ์†Œ๋ฉธ

ํ’€ ๋ผ์šฐํŠธ ์บ์‹œ

Next ์„œ๋ฒ„์ธก์—์„œ ๋นŒ๋“œ ํƒ€์ž„์— ํŠน์ • ํŽ˜์ด์ง€์˜ ๋ Œ๋”๋ง ๊ฒฐ๊ณผ๋ฅผ ์บ์‹ฑํ•˜๋Š” ๊ธฐ๋Šฅ

  • SSG์™€ ์œ ์‚ฌํ•œ ๋ฐฉ์‹

  • ๋‹ค์ด๋‚˜๋ฏน ํŽ˜์ด์ง€๋กœ ์ƒ์„ฑ๋˜๋Š” ํŽ˜์ด์ง€ ์™ธ ๋ชจ๋‘ ์ •์  ํŽ˜์ด์ง€๋กœ ์ƒ์„ฑ๋จ (Default)

    • ๋™์  ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋ฐ์ดํ„ฐ ์บ์‹œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ

๋‹ค์ด๋‚˜๋ฏน ํŽ˜์ด์ง€๋กœ ์„ค์ •๋˜๋Š” ๊ธฐ์ค€

์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋งŒ ํ•ด๋‹น, ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ํŽ˜์ด์ง€ ์œ ํ˜•์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š์Œ

  • ํŠน์ • ํŽ˜์ด์ง€๊ฐ€ ์ ‘์† ์š”์ฒญ์„ ๋ฐ›์„ ๋•Œ ๋งˆ๋‹ค๋งค๋ฒˆ ๋ณ€ํ™”๊ฐ€ ์ƒ๊ธฐ๊ฑฐ๋‚˜, ๋ฐ์ดํ„ฐ๊ฐ€ ๋‹ฌ๋ผ์ง€๋Š” ๊ฒฝ์šฐ

  • ์บ์‹œ๋˜์ง€ ์•Š๋Š” Data Fetching์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ

    • ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋“ค์€ ์ž๋™์œผ๋กœ ๋‹ค์ด๋‚˜๋ฏน ํŽ˜์ด์ง€๋กœ ์„ค์ •๋œ๋‹ค.

// ์บ์‹œ ์˜ต์…˜ ์—†์ด fetch๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ
async function Comp() {
  const response = await fetch("..."); // or fetch("...", { cache: "no-store" })
  return <div>...</div>
}
  • ๋™์  ํ•จ์ˆ˜ (์ฟ ํ‚ค, ํ—ค๋”, ์ฟผ๋ฆฌ์ŠคํŠธ๋ง) ์„ ์‚ฌ์šฉํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ์„ ๋•Œ

    • ์š”์ฒญ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋Š” ๊ฐ’๋“ค

import { cookies, headers } from 'next/headers'

async function Comp() {
  const cookieStore = cookies();
  const theme = cookieStore.get('theme');
  
  const headersList = headers();
  const authorization = headersList.get('authorization');
  
  return <div>...</div>
}

async function Page({ searchParams }: { searchParams: { q: string } }) {
  const q = searchparams.q;
  //...
}

Revalidate

ํŽ˜์ด์ง€ ๋ผ์šฐํŠธ์˜ ISR ๋ฐฉ์‹๊ณผ ์œ ์‚ฌ

  • ํ’€ ๋ผ์šฐํŠธ ์บ์‹œ๋กœ ๋™์ž‘ํ•˜๋Š” ํŽ˜์ด์ง€ ๋‚ด๋ถ€์—์„œ revalidate ์˜ต์…˜์ด ์ ์šฉ๋œ ๋ฐ์ดํ„ฐ ํŒจ์นญ์ด ์กด์žฌํ•œ๋‹ค๋ฉด

  • tanstack-query์™€ ๋น„์Šท, reavlidate time์ด ๊ฒฝ๊ณผํ–ˆ๋‹ค๋ฉด ์šฐ์„  ํ’€๋ผ์šฐํŠธ ์บ์‹ฑ๋œ ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ๋ฐ์ดํ„ฐ ์บ์‹œ๋ฅผ ์—…๋ฐ์ดํŠธ ํ›„ ํ’€ ๋ผ์šฐํŠธ ์บ์‹œ ์—…๋ฐ์ดํŠธ, ์ดํ›„ ์š”์ฒญ์—” ์—…๋ฐ์ดํŠธ ๋œ ํŽ˜์ด์ง€ ๋ฐ˜ํ™˜

Suspense

  • useSearchParams ํ›…์€ ํ˜„์žฌ ์š”์ฒญ๋ฐ›์€ ํŽ˜์ด์ง€์˜ ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์„ ์กฐํšŒํ•˜๋Š” ์—ญํ• 

  • ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์€ ๋นŒ๋“œํƒ€์ž„์— ์กด์žฌํ•  ์ˆ˜ ์—†์Œ

  • ๋นŒ๋“œํƒ€์ž„์— ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‹คํ–‰ํ•  ๋•Œ ๋นŒ๋“œ ํƒ€์ž„์— ์•Œ ์ˆ˜ ์—†๋Š” ์ฟผ๋ฆฌ์ŠคํŠธ๋ง ๊ฐ™์€ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ํ›…์„ ๋งŒ๋‚˜๋ฉด ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ

    • ํด๋ผ์ด์–ธํŠธ์ธก์—์„œ๋งŒ ์‹คํ–‰๋˜๋„๋ก, ์ฆ‰ ์‚ฌ์ „ ๋ Œ๋”๋ง์— ๋ฐฐ์ œ๋˜๋„๋ก ์„ค์ •ํ•ด์•ผํ•จ

    • ํ•ด๋‹น ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ <Suspense> ๋กœ ๊ฐ์‹ธ๋ฉด ๋จ

    • ๋„ฅ์ŠคํŠธ ์„œ๋ฒ„๋Š” ์‚ฌ์ „ ๋ Œ๋”๋งํ•  ๋•Œ <Suspense>๋ฅผ ๋งŒ๋‚˜๋ฉด ๊ณง๋ฐ”๋กœ ๋ Œ๋”๋งํ•˜์ง€ ์•Š๊ณ  Fallback ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•จ

  • ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” useSearcmParams ๋Š” ๋น„๋™๊ธฐ๋กœ ๋™์ž‘ํ•จ

    • ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์„ ๋ถˆ๋Ÿฌ์™€์•ผ ๋น„๋™๊ธฐ๊ฐ€ ์ข…๋ฃŒ๋จ

generateStaticParams

๋™์  ๊ฒฝ๋กœ๋ฅผ ๊ฐ–๋Š” ํŽ˜์ด์ง€๋ฅผ ์ •์  ํŽ˜์ด์ง€๋กœ์„œ ๋นŒ๋“œ ํƒ€์ž„์— ์ƒ์„ฑ๋˜๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•

  • ๋นŒ๋“œํƒ€์ž„์— ๋„ฅ์ŠคํŠธ์„œ๋ฒ„๊ฐ€ ํŽ˜์ด์ง€์— ์–ด๋–ค ๊ฒฝ๋กœ(ํŒŒ๋ผ๋ฏธํ„ฐ)๊ฐ€ ์กด์žฌํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์ •์˜ํ•˜์—ฌ ๋ฆฌํ„ด

    • ๋ฏธ๋ฆฌ ์ •์˜ํ•˜์ง€ ์•Š์€ (ํŒŒ๋ผ๋ฏธํ„ฐ)ํŽ˜์ด์ง€์— ๋Œ€ํ•ด์„œ๋„ ๋™์ผํ•˜๊ฒŒ ๋ชจ๋‘ ์ •์  ํŽ˜์ด์ง€๋กœ ์„ค์ •๋จ (๋‹ค๋งŒ ๋™์ž‘์ด ์กฐ๊ธˆ ๋‹ค๋ฆ„)

    • ๋ฏธ๋ฆฌ ์ •์˜ํ•˜์ง€ ์•Š์€ ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ๊ฒฝ์šฐ๋Š” ์„œ๋ฒ„์— ์š”์ฒญ์ด ๋“ค์–ด์™”์„ ๋•Œ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋„ฅ์ŠคํŠธ ์„œ๋ฒ„์— ์ƒ์„ฑ๋˜์–ด ์ดํ›„ ์š”์ฒญ์— ํ’€ ๋ผ์šฐํŠธ ์บ์‹ฑ์ด ์ ์šฉ๋จ

    • ๋„ฅ์ŠคํŠธ์—์„œ๋Š” ๋™์  ๊ฒฝ๋กœ๋ฅผ ๊ฐ–๋Š” ํŽ˜์ด์ง€์— ํ•œํ•ด ์˜ˆ์™ธ์ ์œผ๋กœ generateStaticParams ํ•จ์ˆ˜๊ฐ€ ์กด์žฌํ•œ๋‹ค๋ฉด, ๋ฌด์กฐ๊ฑด ์ •์  ํŽ˜์ด์ง€๋กœ ์„ค์ •ํ•˜๊ฒŒ๋จ

  • ํŒŒ๋ผ๋ฏธํ„ฐ ๊ฐ’์€ ๋ฌธ์ž์—ด๋กœ๋งŒ ์ž‘์„ฑ

  • generateStaticParams ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ํŽ˜์ด์ง€ ๋‚ด๋ถ€์— ๋ฐ์ดํ„ฐ ์บ์‹ฑ์ด ์ ์šฉ๋˜์ง€ ์•Š์€ ๋ฐ์ดํ„ฐ ํŒจ์นญ์ด ์žˆ๋”๋ผ๋„ ๋ฌด์กฐ๊ฑด ํ•ด๋‹น ํŽ˜์ด์ง€๋Š” ๊ฐ•์ œ๋กœ ์ •์ ํŽ˜์ด์ง€๋กœ ์ƒ์„ฑ๋จ

  • ํŽ˜์ด์ง€ ๋ผ์šฐํ„ฐ์˜ getStaticPaths ์™€ ๋™์ผ

export function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }, { id: "3" }] // url ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋‹ด์€ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜
}

๋ผ์šฐํŠธ ์„ธ๊ทธ๋จผํŠธ ์˜ต์…˜

ํŽ˜์ด์ง€ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ๋ฐ์ดํ„ฐ ํŒจ์นญ ์บ์‹ฑ, ๋ฆฌ๋ฒจ๋ฆฌ๋ฐ์ดํŠธ ํƒ€์ž„์„ ๊ฐ•์ œ๋กœ ์„ค์ •

์ฆ‰, ํŠน์ • ํŽ˜์ด์ง€๋ฅผ ๊ฐ•์ œ๋กœ ์ •์  ํŽ˜์ด์ง€ ๋˜๋Š” ๋™์  ํŽ˜์ด์ง€๋กœ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

  • dynamicParams์™€ ๊ฐ™์ด ์•ฝ์†๋œ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธ ํ›„ ๊ฐ’์„ ์„ค์ •ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•˜๋Š” ํŽ˜์ด์ง€ ์„ค์ •์„ ๋ผ์šฐํŠธ ์„ธ๊ทธ๋จผํŠธ ์˜ต์…˜์ด๋ผํ•จ

dynamic

ํŠน์ • ํŽ˜์ด์ง€์˜ ์œ ํ˜•์„ ๊ฐ•์ œ๋กœ static, dynamic ํŽ˜์ด์ง€๋กœ ์„ค์ •

export const dynamic = 'auto' | 'force-dynamic' | 'force-static' | 'error'  
  • auto [default]: ์•„๋ฌด๊ฒƒ๋„ ๊ฐ•์ œํ•˜์ง€ ์•Š์Œ

  • force-dyanmic: ํŽ˜์ด์ง€๋ฅผ ๊ฐ•์ œ๋กœ ๋™์  ํŽ˜์ด์ง€๋กœ ์„ค์ •

  • force-static: ํŽ˜์ด์ง€๋ฅผ ๊ฐ•์ œ๋กœ ์ •์  ํŽ˜์ด์ง€๋กœ ์„ค์ •

    • ๋™์  ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŽ˜์ด์ง€์—์„œ ๋ฌธ์ œ ๋ฐœ์ƒ, ๋นˆ๊ฐ’์œผ๋กœ ๋“ค์–ด์˜ด

  • error: ํŽ˜์ด์ง€๋ฅผ ๊ฐ•์ œ๋กœ ์ •์  ํŽ˜์ด์ง€๋กœ ์„ค์ •

    • ์ •์  ํŽ˜์ด์ง€๋กœ ์„ค์ •ํ•˜๋ฉด ์•ˆ๋˜๋Š” ์ด์œ (๋™์  ํ•จ์ˆ˜, ๋ฐ์ดํ„ฐ ํŒจ์นญ ์บ์‹œ ๋“ฑ)์€ ๋นŒ๋“œ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚ด

ํด๋ผ์ด์–ธํŠธ ๋ผ์šฐํŠธ ์บ์‹œ

๋ธŒ๋ผ์šฐ์ €์— ์ €์žฅ๋˜๋Š” ์บ์‹œ

  • ํŽ˜์ด์ง€ ์ด๋™์„ ํšจ์œจ์ ์œผ๋กœ ํ•˜๊ธฐ ์œ„ํ•ด RSC Payload์—์„œ ์ถ”์ถœํ•œ ํŽ˜์ด์ง€ ์ผ๋ถ€ ๋ฐ์ดํ„ฐ(๋ ˆ์ด์•„์›ƒ)๋ฅผ ๋ณด๊ด€ํ•จ

  • ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€๊ฐ€ ๊ณตํ†ต๋œ ๋ ˆ์ด์•„์›ƒ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ์ค‘๋ณต๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณ„์†ํ•ด์„œ ์ „๋‹ฌ๋ฐ›๊ฒŒ ๋˜๋Š” ๋ฌธ์ œ ๋ฐœ์ƒ

  • ์ด๋Ÿฐ ๋น„ํšจ์œจ์„ ์ค„์ด๊ธฐ ์œ„ํ•ด ๋„ฅ์ŠคํŠธ๋Š” ํด๋ผ์ด์–ธํŠธ ๋ผ์šฐํ„ฐ ์บ์‹œ ๋ผ๋Š” ์ƒˆ๋กœ์šด ์บ์‹œ ๊ณต๊ฐ„์„ ๋งˆ๋ จํ•ด์„œ ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋“ค์„ ์ž๋™ ๋ณด๊ด€

  • ๊ธฐ๋ณธ์ ์œผ๋กœ ์ƒˆ๋กœ๊ณ ์นจ์‹œ ๋ชจ๋‘ ๋น„์›Œ์ง€๊ฒŒ๋จ

์ŠคํŠธ๋ฆฌ๋ฐ์ด๋ž€

*์ŠคํŠธ๋ฆผ[(์•ก์ฒดยท๊ธฐ์ฒด๊ฐ€) ์ค„์ค„[๊ณ„์†] ํ๋ฅด๋‹ค[ํ˜๋Ÿฌ๋‚˜์˜ค๋‹ค] )], ์ž˜๊ฒŒ ์ชผ๊ฐœ์ง„ ๋ฐ์ดํ„ฐ๋“ค์„ ์—ฐ์†์ ์œผ๋กœ ๋ณด๋‚ด์ฃผ๋Š” ๊ธฐ์ˆ 

  • ํด๋ผ์ด์–ธํŠธ ์ž…์žฅ์—์„œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ๋ฐ›์ง€ ์•Š์€ ์ƒํƒœ์—์„œ๋„ ํ˜„์žฌ๊นŒ์ง€ ๋ฐ›์€ ๋ฐ์ดํ„ฐ ์ผ๋ถ€์— ์ ‘๊ทผ ๊ฐ€๋Šฅ

  • ํ™”๋ฉด ๋ Œ๋”๋ง ์‹œ, ๋ธ”๋กœํ‚น ์—†์ด ์ฆ‰์‹œ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์€ ๋จผ์ € ๋น ๋ฅด๊ฒŒ ๋ Œ๋”๋งํ•˜๊ณ , ๋ฐ์ดํ„ฐ ํŒจ์นญ์ด ํ•„์š”ํ•œ ์˜์—ญ์€ ์šฐ์„  ํด๋ฐฑ UI๋ฅผ ๋ณด์—ฌ์ค€ ๋’ค ๋ฐ์ดํ„ฐ๋ฅผ ์ ์ง„์ ์œผ๋กœ ๋ฐ›์•„์™€ ์ „์ฒด ํ™”๋ฉด์ด ๋ง‰ํž˜์—†์ด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๊ทธ๋ ค์ง€๋„๋ก ํ•˜๋Š” ๋ฐฉ์‹

  • Next.js Dynamic Page์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋จ

loading.tsx

๋น„๋™๊ธฐ ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ์— ์ŠคํŠธ๋ฆฌ๋ฐ์„ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

  • loading.tsx๋ฅผ ํ™œ์šฉํ•˜๋ฉด, ํŽ˜์ด์ง€๊ฐ€ ๋ฐ์ดํ„ฐ ํŒจ์นญ์œผ๋กœ ์ธํ•ด ์ง€์—ฐ๋˜๋Š” ์ƒํ™ฉ์—์„œ๋„ ํด๋ฐฑ UI๋ฅผ ๋จผ์ € ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Œ

  • async ๊ฐ€ ๋ถ™์€ ๋น„๋™๊ธฐ ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ŠคํŠธ๋ฆฌ๋ฐ ํ•˜๋„๋ก ์„ค์ •

  • ๋™์ผ ๊ฒฝ๋กœ์˜ ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ๋งŒ ์ŠคํŠธ๋ฆฌ๋ฐ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๋ ˆ์ด์•„์›ƒ ์ปดํฌ๋„ŒํŠธ์ฒ˜๋Ÿผ ํ•ด๋‹น ๊ฒฝ๋กœ ๋‚ด๋ถ€์— ํฌํ•จ๋œ ๋ชจ๋“  ๋น„๋™๊ธฐ ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ๋“ค๊นŒ์ง€ ์ŠคํŠธ๋ฆฌ๋ฐ๋˜๋„๋ก ์„ค์ •๋จ

  • ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์ด ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒฝ์šฐ๋Š” ํŠธ๋ฆฌ๊ฑฐ๋˜์ง€ ์•Š์Œ

    • ์ด ๊ฒฝ์šฐ์—๋„ ์ŠคํŠธ๋ฆฌ๋ฐ์„ ์ ์šฉ์‹œํ‚ค๊ณ  ์‹ถ๋‹ค๋ฉด Suspense ์‚ฌ์šฉ

Suspense

์ปดํฌ๋„ŒํŠธ๋ณ„๋กœ ์„ธ๋ฐ€ํ•˜๊ฒŒ ์ŠคํŠธ๋ฆฌ๋ฐ์„ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

  • Suspense(๋ฏธ์™„์„ฑ), ์ŠคํŠธ๋ฆฌ๋ฐํ•  ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์™„์ „ํžˆ ์ค€๋น„๋  ๋•Œ๊นŒ์ง€ ํด๋ฐฑ UI๋ฅผ ๋จผ์ € ๋ Œ๋”๋งํ•ด์ฃผ๋Š” ์—ญํ• 

  • ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์ด ๋ณ€๊ฒฝ๋˜๋”๋ผ๋„ ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” Suspense๊ฐ€ ๋‹ค์‹œ ํŠธ๋ฆฌ๊ฑฐ๋˜์ง€ ์•Š์ง€๋งŒ, key props๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํŠน์ • ๊ฐ’์ด ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ๋กœ๋”ฉ ์ƒํƒœ๋กœ ๋‹ค์‹œ ๋Œ์•„๊ฐ€๋„๋ก ์„ค์ • ๊ฐ€๋Šฅ

  • ๋ณ‘๋ ฌ๋กœ ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€์— ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ์™„๋ฃŒ๋˜๋Š” ์ˆœ์„œ๋Œ€๋กœ ๊ฐ๊ฐ ๋ Œ๋”๋ง ๊ฐ€๋Šฅ

์Šค์ผˆ๋ ˆํ†ค UI

๋ผˆ๋Œ€ ์—ญํ• ์„ ํ•˜๋Š” UI

  • ๋กœ๋”ฉ ์‹œ๊ฐ„์— ๋Œ€๋žต ์–ด๋–ป๊ฒŒ ์ƒ๊ธด ์ปจํ…์ธ ๊ฐ€ ๋‚˜์˜ฌ์ง€ ๋ฏธ๋ฆฌ ์˜ˆ์ธก ๊ฐ€๋Šฅ

  • ๋ ˆ์ด์•„์›ƒ ์‰ฌํ”„ํŠธ ๋ฐฉ์ง€

error.tsx

์—๋Ÿฌํ•ธ๋“ค๋ง

'use client'

export default function Error ({ error, reset } : { error: Error, rest: () => void}) {
  const router = useRouter();
  
  return (
    <div>
      <h3>Error ๋ฐœ์ƒ</h3>
      <button 
        type="button" 
        onClick={() => {
          startTransition(() => {
            router.refresh()
            reset();
          })
      }}>๋ฆฌ์…‹<button/>
    </div>
  )
}
  • use client ํ‚ค์›Œ๋“œ๋กœ ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ์„ค์ •

    • ์—๋Ÿฌ๋Š” ์„œ๋ฒ„/ํด๋ผ์ด์–ธํŠธ ๋ง‰๋ก ํ•˜๊ณ  ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๋ชจ๋‘ ๋ Œ๋”๋ง๋˜๋Š” ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ๋กœ ์ƒ์„ฑ

  • error.tsx๋Š” ํ˜„์žฌ ์ž์‹ ์˜ ๊ฒฝ๋กœ์— ํ•ด๋‹นํ•˜๋Š” layout๊นŒ์ง€๋งŒ ๋ Œ๋”๋ง

  • ๊ฐ™์€ ๊ฒฝ๋กœ ๋˜๋Š” ํ•˜์œ„ ๊ฒฝ๋กœ์— ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„๋•Œ ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ ๋Œ€์‹  ํ•ด๋‹น ์—๋Ÿฌ ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง

  • ์—๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋Š” ์—๋Ÿฌ ์ •๋ณด๋ฅผ ํฌํ•จํ•˜๋Š” error ๋ฐ์ดํ„ฐ, error๋ฅผ ๋ฆฌ์…‹์‹œ์ผœ์ฃผ๋Š” ํ•จ์ˆ˜๋ฅผ props๋กœ ์ œ๊ณตํ•œ๋‹ค.

    • error: ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—๋Ÿฌ ๊ฐ์ฒด๋กœ, ์–ด๋–ค ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋Š”์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ์Œ

    • reset: ์—๋Ÿฌ ์ƒํƒœ๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋ง์‹œํ‚ค๋Š” ํ•จ์ˆ˜

      • reset์€ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ๋งŒ ๋™์ž‘ํ•˜๋ฉฐ, ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•˜๊ฑฐ๋‚˜ ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ๋ฅผ refetch ํ•˜์ง€๋Š” ์•Š์Œ. ์ฆ‰, ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜๋งŒ ๋ฆฌ์…‹ ๊ฐ€๋Šฅํ•จ

      • Next.js์—์„œ ์ œ๊ณตํ•˜๋Š” useRouter์˜ refresh ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Œ. ์ด refresh ํ•จ์ˆ˜๋Š” ํ˜„์žฌ ํŽ˜์ด์ง€์—์„œ ํ•„์š”ํ•œ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ Next ์„œ๋ฒ„ ์ธก์— ์žฌ์š”์ฒญํ•˜๋„๋ก ํŠธ๋ฆฌ๊ฑฐํ•จ -> refersh๋กœ ์„œ๋ฒ„ ํด๋ผ์ด์–ธํŠธ๋ฅผ ๋‹ค์‹œ ๋ฐ›์€ ํ›„์— reset์ด ์ง„ํ–‰๋˜์–ด์•ผํ•จ

์„œ๋ฒ„ ์•ก์…˜

๋ธŒ๋ผ์šฐ์ €์—์„œ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ์„œ๋ฒ„์—์„œ ์‹คํ–‰๋˜๋Š” ๋น„๋™๊ธฐ ํ•จ์ˆ˜

export default function Page() {
  const createPostAction = async(formData: FormData) => {
    'use server';
    ...
    // formData.get('name') -> FormDataEntryValue | null Type
    const name = formData.get('name')?.toString(); // string | undefined
  }
  
  return (
    <form action={createPostAction}>
      ...
    </form>
  )
}

  • use server -> ๋„ฅ์ŠคํŠธ ์„œ๋ฒ„์—์„œ๋งŒ ์‹คํ–‰๋˜๋Š” ์„œ๋ฒ„ ์•ก์…˜ ์ง€์‹œ์ž

  • ์„œ๋ฒ„์—์„œ๋งŒ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ˜ธ์ถœ, ๋ฐ์ดํ„ฐ๋ฅผ FormData ํ˜•์‹์œผ๋กœ ์ „๋‹ฌ

  • ๊ธฐ์กด์—” api๋กœ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•ด์•ผํ–ˆ๋‹ค๋ฉด ์ด์ œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜ ํ•˜๋‚˜๋งŒ์œผ๋กœ ์„œ๋ฒ„์™€ ํ†ต์‹  ๊ฐ€๋Šฅํ•ด์ง

  • ๊ฐ„๋‹จํžˆ ์„œ๋ฒ„ ํ•จ์ˆ˜ ํ•˜๋‚˜๋กœ api ์—ญํ• ์„ ๋Œ€์ฒด ๊ฐ€๋Šฅ

  • ์•ก์…˜๋“ค์€ ๋ณ„๋„์˜ ํด๋”(actions)๋กœ ๋ถ„๋ฅ˜ํ•ด์„œ ๋ชจ๋“ˆํ™”ํ•˜๋ฉด ๊น”๋”

  • ์•ก์…˜์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋“ค์€ ๋ชจ๋‘ FormData๋กœ ์ž…๋ ฅ๋ฐ›๋„๋ก ์„ค์ •

์žฌ๊ฒ€์ฆ

revalidatePath

ํŽ˜์ด์ง€ ์žฌ๊ฒ€์ฆ ์š”์ฒญ

  • ์„œ๋ฒ„ ์•ก์…˜ ๋‚ด๋ถ€์—์„œ ํ˜ธ์ถœํ•˜๋ฉด ๋„ฅ์ŠคํŠธ์„œ๋ฒ„์—๊ฒŒ ํ•ด๋‹น ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ์ƒ์„ฑํ•˜๋„๋ก ์š”์ฒญํ•ด์„œ ์„œ๋ฒ„ ์•ก์…˜์˜ ๊ฒฐ๊ณผ๋ฅผ ํ™”๋ฉด์— ๋ฐ”๋กœ ๋‚˜ํƒ€๋‚˜๋„๋ก๊ฐ€๋Šฅ

  • ์„œ๋ฒ„์ธก์—์„œ๋งŒ ํ˜ธ์ถœ ๊ฐ€๋Šฅ

    • ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ

    • ์„œ๋ฒ„ ์•ก์…˜

// #1, ํ•ด๋‹น ์ฃผ์†Œ์˜ ํŽ˜์ด์ง€๋งŒ ์žฌ๊ฒ€์ฆ
revalidatePath('/page/1')

// #2, ํŠน์ • ๊ฒฝ๋กœ์˜ ๋ชจ๋“  ๋™์  ํŽ˜์ด์ง€ ์žฌ๊ฒ€์ฆ
revalidatePath('/page/[id]', 'page')

// #3, ํŠน์ • ๋ ˆ์ด์•„์›ƒ์„ ๊ฐ–๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€ ์žฌ๊ฒ€์ฆ
revalidatePath('/(with-layout)', 'layout')

// #4, ๋ชจ๋“  ๋ฐ์ดํ„ฐ ์žฌ๊ฒ€์ฆ (๋ฃจํŠธ ๋ ˆ์ด์•„์›ƒ์„ ๊ฐ–๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€๋“ค ์ „๋ถ€ ๋‹ค ์žฌ๊ฒ€์ฆ -> ๋ชจ๋“  ํŽ˜์ด์ง€ ์žฌ๊ฒ€์ฆ)
revalidatePath('/', 'layout');

// #5, ํƒœ๊ทธ ๊ธฐ์ค€, ๋ฐ์ดํ„ฐ ์บ์‹œ ์žฌ๊ฒ€์ฆ
revalidateTag('tag')

Tag๋ž€?

  • ๋ฐ์ดํ„ฐ ํŒจ์นญ์— ํŠน์ • ํƒœ๊ทธ๋ฅผ ๋ถ™์ผ ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜

  • ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ดˆ๊ธฐํ™” ํ•œ๋‹ค๊ฑฐ๋‚˜ ์žฌ๊ฒ€์ฆํ•จ

  • tanstackQuery์˜ queryKey ์™€ ๋น„์Šท?

useActionState

const { state, formAction, isPending } = useActionState(์•ก์…˜, ์ƒํƒœ ์ดˆ๊ธฐ๊ฐ’)

๊ณ ๊ธ‰ ๋ผ์šฐํŒ… ํŒจํ„ด

ํŽ˜๋Ÿฌ๋ (๋ณ‘๋ ฌ) ๋ผ์šฐํŠธ

ํ•œ ํ™”๋ฉด์˜ ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ(app/ํ•˜์œ„์˜ ํฌํ•จ๋œ ์ปดํฌ๋„ŒํŠธ๋“ค)๋ฅผ ๋ณ‘๋ ฌ๋กœ ๋ Œ๋”๋ง์‹œ์ผœ์ฃผ๋Š” ํŒจํ„ด

  • ์ ‘๋‘์‚ฌ @ ๋กœ ์‹œ์ž‘ํ•˜๋Š” ํด๋”๋ฅผ ์Šฌ๋กฏ์ด๋ผ ํ•œ๋‹ค.

    • ์Šฌ๋กฏ: ๋ณ‘๋ ฌ๋กœ ๋ Œ๋”๋ง ๋  ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด๊ด€ํ•˜๋Š” ํด๋”

    • URL ๊ฒฝ๋กœ์—๋Š” ์˜ํ–ฅ์„ ๋ผ์น˜์ง€ ์•Š์Œ

    • ์Šฌ๋กฏ์˜ ๊ฐฏ์ˆ˜ ์ œํ•œ์€ ์—†๋‹ค.

  • ๋ถ€๋ชจ ๋ ˆ์ด์•„์›ƒ ์ปดํฌ๋„ŒํŠธ์˜ props๋กœ @abc/page.tsx์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž๋™์œผ๋กœ ์ „๋‹ฌ๋œ๋‹ค. (-> props abc)

  • ์Šฌ๋กฏ ํด๋” ํ•˜์œ„์— ์ƒˆ๋กœ์šด ๊ฒฝ๋กœ ํŽ˜์ด์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ํ•ด๋‹น ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๋ฉด, ๋ ˆ์ด์•„์›ƒ ๊ธฐ์ค€์œผ๋กœ ํ•ด๋‹น ์Šฌ๋กฏ ์˜์—ญ๋งŒ ๋ณ€๊ฒฝ๋จ

    • @abc/other/page.tsx

    • ๋ ˆ์ด์•„์›ƒ์˜ ๋‚˜๋จธ์ง€ ์Šฌ๋กฏ์ด ํ•ด๋‹น ๊ฒฝ๋กœ์™€ ๋งค์นญ๋˜๋Š” ๊ฒฝ๋กœ๊ฐ€ ์—†๋‹ค๋ฉด ๊ธฐ์กด ์Šฌ๋กฏ์€ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•จ,

    • ๊ฐ๊ฐ์˜ ์Šฌ๋กฏ๋“ค์ด ์ด์ „ ํŽ˜์ด์ง€๋ฅผ ์œ ์ง€ํ•˜๋Š”๊ฑด ์˜ค์ง ๋งํฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ CSR๋กœ ์ ‘๊ทผํ• ๋•Œ๋งŒ ์œ ํšจ

      • ์ดˆ๊ธฐ์ ‘์†์€ ์Šฌ๋กฏ์˜ ์ด์ „ํŽ˜์ด์ง€๋ฅผ ๋ชจ๋ฅด๊ธฐ๋•Œ๋ฌธ

      • ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด ์Šฌ๋กฏ๋ณ„๋กœ ํ˜„์žฌ ๋ Œ๋”๋งํ•  ํŽ˜์ด์ง€๊ฐ€ ์—†์„ ๋•Œ ๋Œ€์‹  ๋ Œ๋”๋งํ•  ํŽ˜์ด์ง€ default.tsx ๋ฅผ ์ƒ์„ฑ

์‚ฌ์šฉ์ž๊ฐ€ ํŠน์ • ๊ฒฝ๋กœ์— ์ ‘์†ํ•ด์„œ ํŽ˜์ด์ง€ ์š”์ฒญํ•  ๋•Œ ํŠน์ • ์กฐ๊ฑด์ผ ๋–„ ๊ฐ€๋กœ์ฑ„์„œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ๋Œ€์‹  ๋ Œ๋”๋งํ•˜๋„๋ก ์„ค์ •ํ•˜๋Š” ํŒจํ„ด

  • ์กฐ๊ฑด์€ only ์ดˆ๊ธฐ์ ‘์†

    • ์กฐ๊ฑด์€ ๊ณ ์ • (์„ค์ • ๋ถˆ๊ฐ€๋Šฅ)

  • (.)ํด๋”๋ช…

    • ์ ‘๋‘์‚ฌ (.) ๋Š” ๊ฐ€๋กœ์ฑŒ ํŽ˜์ด์ง€ ํด๋”์˜ ์ƒ๋Œ€ ๊ฒฝ๋กœ๋ฅผ ์˜๋ฏธ

    • (.) : ๋™์ผ ๊ฒฝ๋กœ

    • (..): ์ƒ์œ„ ๊ฒฝ๋กœ (1dep)

    • (..)(..) : ์ƒ์œ„ ๊ฒฝ๋กœ (2dep)

    • (...) : app/ ๋ฐ”๋กœ ํ•˜์œ„ ๊ฒฝ๋กœ

<Image /> Next.js์—์„œ ์ œ๊ณตํ•˜๋Š” ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ ('next/image')

  • webp ํฌ๋งท์œผ๋กœ ์ž๋™ ๋ณ€ํ™˜

  • ๋””๋ฐ”์ด์Šค ์‚ฌ์ด์ฆˆ์— ๋งž๋Š” ์ด๋ฏธ์ง€ ์ตœ์ ํ™”

  • ๋ ˆ์ด์ง€ ๋กœ๋”ฉ ์ ์šฉ

  • ๋ถˆ๋Ÿฌ ์ด๋ฏธ์ง€ ํ™œ์šฉ

  • svg, gif๋Š” ๋”ฐ๋กœ ์ตœ์ ํ™” ํ•ด์ฃผ์ง€ ์•Š์Œ

SEO ์ตœ์ ํ™”

metadata (์ •์ )

export const metadata: Metadata = {
  title: '',
  description: '',
  openGraph: {
    title: '',
    description: '',
    images: [ํผ๋ธ”๋ฆญ ๊ฒฝ๋กœ,],
  },
}
  • ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๋ณ€์ˆ˜์— ์„ค์ •๋œ ๊ฐ’์ด ์ž๋™์œผ๋กœ index ํŽ˜์ด์ง€์˜ metadata๋กœ ์„ค์ •๋จ

  • openGraph๋ฅผ ์„ค์ •ํ•˜๋ฉด og, twitter ์ž๋™ ์ถ”๊ฐ€๋จ

generateMetadata (๋™์ )

export async function generateMetadata({ 
  searchParams }: { 
    searchParams: Promise<{ q?: string}> 
}): Promise<Metadata> {
  const { q } = await searchParams;
  
  return {
    ... 
  }
}
  • ํ˜„์žฌ ํŽ˜์ด์ง€ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ๋™์ ์œผ๋กœ ์ƒ์„ฑ

  • ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ „๋‹ฌ๋ฐ›๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋™์ผํ•˜๊ฒŒ ์ธ์ž๋กœ ๋ฐ›์Œ

Last updated