next.js - hochan222/Everything-in-JavaScript GitHub Wiki

Next.js

  • Zeit์—์„œ ๋งŒ๋“  React Framework ์ด๋‹ค.
    • Netflix, Github, Twitch, Hulu, Uber, Docker๋“ฑ๋“ฑ ์—์„œ ์‚ฌ์šฉ.
  • React๋Š” UI๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค.

ํ•ต์‹ฌ์ ์ธ ๊ธฐ๋Šฅ๋งŒ ์ œ๊ณตํ•˜๊ณ  ๊ทธ ์™ธ์˜ ๊ธฐ๋Šฅ์€ ๋ณ„๋„์˜ 3rd party ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์ œ๊ณตํ•œ๋‹ค.

Next.js ๋Š” React๋กœ FrontEnd๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์œ ์šฉํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค.

  • SSR(Server Side Rendering)
    • ๊นœ๋นก์ธ ์—†๊ณ  ํ™”๋ฉด ๋ Œ๋”๋ง ์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค.
    • SEO๋ฅผ ์ ์šฉํ•˜๊ธฐ ์œ ๋ฆฌํ•˜๋‹ค.
      • dynamic meta tags
  • File System ๊ธฐ๋ฐ˜ Routing
    • /about -> about.js
  • Customizing
    • webpack configuration
    • babel configuration
  • Code Splitting
    • Code Splitting์€ ์›นํŒฉ์˜ ๊ฐ€์žฅ ๋งค๋ ฅ์ ์ธ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ด๋‹ค. JavaScript ๋ฒˆ๋“ค์€ ์‚ฌ์šฉ์ž๊ฐ€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„๋กœ๋“œ ํ•  ๋•Œ ์ดˆ๊ธฐ ๊ฒฝ๋กœ์— ํ•„์š”ํ•œ ์ฝ”๋“œ ๋งŒ ์ „์†กํ•˜๋„๋ก ๋ถ„ํ• ๋œ๋‹ค. ์ด๋ ‡๊ฒŒํ•˜๋ฉด ๊ตฌ๋ฌธ ๋ถ„์„ ๋ฐ ์ปดํŒŒ์ผํ•ด์•ผํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ์˜ ์–‘์ด ์ตœ์†Œํ™”๋˜์–ด ํŽ˜์ด์ง€๋กœ๋“œ ์‹œ๊ฐ„์ด ๋นจ๋ผ์ง„๋‹ค.
    • Next.js ๋Š” ๋ณ„๋„์˜ ๊ฒฝ๋กœ๋ฅผ ๊ฐ–๋Š” ๊ธฐ๋ณธ ์„ค๊ณ„๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„์ ์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฑฐ์น˜์ง€ ์•Š๊ณ ๋„ ์ž๋™ ์ฝ”๋“œ ๋ถ„ํ•  ์„ ์ œ๊ณต ํ•œ๋‹ค.
  • Google Chrome ํŒ€๊ณผ ํ˜‘๋ ฅํ•˜์—ฌ ์ตœ์ ํ™”