๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Front-End/Next.js

Next 13์—์„œ ๋ณ€๊ฒฝ๋œ ์‚ฌํ•ญ๋“ค

by sharekim 2023. 10. 13.

https://abangpa1ace.tistory.com/entry/Nextjs-Nextjs-13-%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD

 

[Next.js] Next.js 13 ๋ณ€๊ฒฝ์‚ฌํ•ญ

๐Ÿค Next.js 13 Next.js 12๋ฒ„์ „๋„ 2021๋…„ ์ค‘์ˆœ ์—…๋ฐ์ดํŠธ ๋œ ๊ฒƒ์œผ๋กœ ๊ธฐ์–ตํ•˜๋Š”๋ฐ, Next.js 13์ด 2022๋…„ 10์›”์— ์ปจํผ๋Ÿฐ์Šค์—์„œ ๋‹ค์‹œ ๋ฐœํ‘œ๋ฌ๋‹ค. ์ฒด๊ฐ์ƒ ๊ฐ€์žฅ ํฐ ๋ณ€ํ™”๋ฅผ ๋Š๋‚„ ๊ฒƒ ๊ฐ™์€ ๋ฒ„์ „ ์ฒด์ธ์ง€์ด๋‹ค. (๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ

abangpa1ace.tistory.com

 

ํŠนํžˆ opengraphy vercel/og ๊ฐ€ ๋งค์šฐ ์ธ์ƒ๊นŠ๊ณ , SSR ์„ ๊ธฐ๋ณธ์œผ๋กœ ํ•˜๋ฉด์„œ getServersideProps ๋“ฑ์ด cache ๋กœ ๋ฐ”๋€ ์ ๋„ ์ธ์ƒ๊นŠ๋‹ค.

 

์œ„ ๋ธ”๋กœ๊ทธ์—์„œ ๋ณ€๊ฒฝ์‚ฌํ•ญ ์š”์•ฝ์„ ๊ฐ„๋‹จํžˆ ๊ธฐ์žฌํ•˜๋ฉด,

 

8. ์ฃผ์š” ๋ณ€๊ฒฝ์‚ฌํ•ญ

  • ์ตœ์†Œ ์š”๊ตฌ React ๋ฒ„์ „์ด 17.0.2 โ–บ 18.2.0์œผ๋กœ ์ƒํ–ฅ
  • 12.X ๋ฒ„์ „ ์ง€์›์ด ์ข…๋ฃŒ๋˜๋ฉฐ, ์ตœ์†Œ ์š”๊ตฌ Node.js ๋ฒ„์ „์ด 12.22.0 โ–บ 14.6.0 ์ƒํ–ฅ
  • swcMinify ์„ค์ • ๊ธฐ๋ณธ๊ฐ’์ด false โ–ถ๏ธŽ true ๋ณ€๊ฒฝ
  • next/image โ–บ next/legacy/image, next/future/image โ–บ next/image ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
  • next/link๊ฐ€ <a> ํƒœ๊ทธ๋ฅผ ์ž์‹์œผ๋กœ ๊ฐ€์งˆ ์ˆ˜ ์—†์Œ. legacyBehavior ์˜ต์…˜์œผ๋กœ ๊ธฐ์กด์ฝ”๋“œ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์œผ๋‚˜, ์ปค๋ฉ˜๋“œ๋กœ ์—…๋ฐ์ดํŠธ ๊ถŒ์žฅ
  • User-Agent ๊ฐ€ ๋ด‡์ด๋ฉด ๋” ์ด์ƒ ๊ฒฝ๋กœ๋“ค์„ prefetch ํ•˜์ง€ ์•Š์Œ
  • ์ง€์› ์ข…๋ฃŒ๋œ target ์˜ต์…˜(MiddlewareInServerlessTarget)์ด next.config.js ์—์„œ ์ œ๊ฑฐ
  • ์ง€์› ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ณ€๊ฒฝ : Chrome 64+, Edge 79+, Firefox 67+, Opera 51+, Safari 12+, IE(์ง€์›์ข…๋ฃŒ)

 

์ถœ์ฒ˜ : ttang_99's ๊ฐœ๋ฐœ์˜ ํ”์ ๋“ค

'Front-End > Next.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Next 13 ์—์„œ์˜ Data fetching  (0) 2023.10.19
@next/font ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ตฌ๊ธ€ ํฐํŠธ ์ ์šฉํ•˜๊ธฐ  (0) 2023.01.11
front-matter  (0) 2022.11.01

๋Œ“๊ธ€