๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- React, Next.js

์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

by Wonit 2020. 12. 31.

ํ•ด๋‹น ๋ธ”๋กœ๊ทธ ์‹œ๋ฆฌ์ฆˆ๋Š” ์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next js ์‹œ๋ฆฌ์ฆˆ๋กœ์จ ์ด 8๋ถ€์ž‘์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
Next.js๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„œ ์ด์•ผ๊ธฐํ•˜๋Š” ๋‚ด์šฉ์„ ์ตœ๋Œ€ํ•œ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ณ  ์ง๊ด€์ ์ด๊ฒŒ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”!

 

์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ์žฅ์›์ต์ž…๋‹ˆ๋‹ค.

 

์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

 

๋ณธ ๋‚ด์šฉ์€ ๊ณต์‹ ๋ฌธ์„œ์˜ ๊ต์œก ๋ฐฉํ–ฅ์„ ์ตœ๋Œ€ํ•œ ์ง€ํ‚ค๋ ค ๋…ธ๋ ฅํ–ˆ์œผ๋ฉฐ Next๋ฅผ ๋ฐฐ์šฐ๊ณ ์‹ถ์–ดํ•˜๋Š” ๋ชจ๋“  ์ดˆ๋ณด์ž๋“ค์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ๊ธ€์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

 

๋Œ€์ƒ ๋…์ž

Next.js๋ฅผ ๋ฐฐ์›Œ๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ.

 

SEO ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ์ •๋ณด๋ฅผ ์ฐพ๊ณ ์žˆ๋Š” ์‚ฌ๋žŒ.

 

SSR๊ณผ SSG๋ฅผ ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ.

 

ํ•„์š” ์—ญ๋Ÿ‰

React ๊ฐœ๋ฐœ ๊ฒฝํ—˜

styled-components ๊ฐœ๋ฐœ ๊ฒฝํ—˜ (Optional)

 

ํ•„์š” ์—ญ๋Ÿ‰์€ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ์žˆ์œผ์‹  ๋…์ž๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.

 

ํ•ด๋‹น ์‹ค์Šต ๋‚ด์šฉ์—์„œ๋Š” ๋ฆฌ์•กํŠธ๋ฅผ ์ด์šฉํ•œ ์ฝ”๋“œ๊ฐ€ ๋“ฑ์žฅํ•ฉ๋‹ˆ๋‹ค.

 

๋˜ํ•œ ํ•„์ˆ˜ ์‚ฌํ•ญ์€ ์•„๋‹ˆ์ง€๋งŒ Css-In-Js ๋ฐฉ์‹์˜ ์Šคํƒ€์ผ๋ง ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ styled-components ๋ฅผ ๊ฐ„ํ˜น ์ด์šฉํ•˜๊ธด ํ•˜๋‚˜ ํ•„์ˆ˜ ์‚ฌํ•ญ์€ ์•„๋‹™๋‹ˆ๋‹ค.

 

๋ชฉ์ฐจ

1. create-next-app์œผ๋กœ next ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…ํ•˜๊ธฐ

  • create-next-app ๋กœ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ
  • ์ง์ ‘ npm dependencies ์ถ”๊ฐ€ํ•˜์—ฌ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ

2. create-next-app์—์„œ ๋งŒ๋‚œ ์ฒซ ๋ฒˆ์งธ ํ•ต์‹ฌ pages. ๊ทธ๋ฆฌ๊ณ  ๋™์  ๋ผ์šฐํŒ…

3. ํŽ˜์ด์ง€๋ฅผ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ Link-Component ๊ทธ๋ฆฌ๊ณ  Pre-Fetch

  • Link
  • Linking with Dynamic Routing
  • Code Splitting & Pre-Fetching

4. Next.js์—์„œ head ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฉ‹์ง„ ๋ฐฉ๋ฒ•

5. ์›น์˜ ๋ฐœ์ „ ๊ณผ์ •์œผ๋กœ ๋ณด๋Š” SSG์™€ SSR

  • ์ตœ์ดˆ์˜ ๋ Œ๋”๋ง
  • ajax์™€ CSR
  • SSR์˜ ์ง„ํ™” SSG
  • ๊ทธ๋Ÿผ ์–ธ์ œ ๋ญ˜ ์จ์•ผํ• ๊นŒ?

6. next์˜ ๋‘ ๋ฒˆ์งธ ํ•ต์‹ฌ Pre-Rendering

  • Pre-Rendering์˜ 2๊ฐ€์ง€ ๋‹จ๊ณ„
  • Pre-Rendering์˜ SSG์™€ SSR

7. SSG๋กœ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™” ๋…ธ๋ฆฌ๊ธฐ

  • getStaticProps ๋ž€?
  • getStaticPaths ๋ž€?

8. ์ •์งํ•˜๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” Next.js ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋งˆ์น˜๋ฉฐ..

๋Œ“๊ธ€