๋ฅ์คํธ (2) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ [ Next.js ] Next13์ ์ฃผ์ ๊ธฐ๋ฅ์ ๋ํด ์์๋ณด์. Vercelํ์ด Next.js์ 13๋ฒ์ ์ด 2022๋ 10์ 26์ผ Next.js ๊ณต์ ํ์ด์ง์ ์๊ฐ๋์์ง๋ง, ์์ธํ ์ดํด๋ณด์ง๋ฅผ ์์๋๋ฐ ์๋ก ์ด์งํ๊ฒ๋ ํ์ฌ์์ Next13์ผ๋ก ํ๋ก์ ํธ๋ฅผ ์๋ก ์ธํ ํ๊ธฐ๋ก ์ด์ผ๊ธฐ๊ฐ ๋์ด ๊ณต์ ๋ธ๋ก๊ทธ ๋ด์ฉ์ ์ดํด๋ณด์๋ค. ++Next.js 13.4(ํ์ฌ ๊ธฐ์ค ์ต์ ๋ฒ์ )์ ์ฌ์ฉํ๋ ค๋ฉด ์๋์ ๋ช ๋ น์ด๋ฅผ ํตํด ์ค์นํ ์ ์๋ค. npm i next@latest react@latest react-dom@latest eslint-config-next@latest ์ฑ ๋ผ์ฐํ (App Directory) - Next.13.4(ํ์ฌ)๊ธฐ์ค Stable ๊ธฐ์กด์ pages/ ๋๋ ํ ๋ฆฌ์์ ๋ผ์ฐํ ๋๋ ๋ฐฉ์๊ณผ ๋ค๋ฅด๊ฒ, app/ ๋๋ ํ ๋ฆฌ๋ก ๋ผ์ฐํ ํ๋ ๋ฐฉ์์ด ์ถ๊ฐ๋์๋ค. - Tree : ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ .. [ NEXT.JS ] Next.js์ ๋ํด ์์๋ณด๊ธฐ. NEXT.JS๋ ๋ฌด์์ผ๊น? Next.js ๋ ๋น ๋ฅธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค๊ธฐ ์ํ ๋น๋ฉ ๋ธ๋ก์ ์ ๊ณตํ๋ React ํ๋ ์ ์ํฌ๋ก, React์ ํ์ํ ๋๊ตฌ ๋ฐ ๊ตฌ์ฑ์ ์ฒ๋ฆฌํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ํ ์ถ๊ฐ ๊ตฌ์กฐ, ๊ธฐ๋ฅ ๋ฐ ์ต์ ํ๋ฅผ ์ ๊ณตํ๋ค. Next.js๋ SSR(Server-Side-Rendering), ์ ์ ์น ํ์ด์ง ์์ฑ ๋ฑ React ๊ธฐ๋ฐ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ธฐ๋ฅ๋ค์ ๊ฐ๋ฅํ๊ฒ ํ๋ Node.js ์์์ ๋น๋๋ ์คํ ์์ค ์น ํ๋ ์์ํฌ์ด๋ค. React๋ฅผ ์ฌ์ฉํ์ฌ UI๋ฅผ ๊ตฌ์ถํ ๋ค์, Next.js ๊ธฐ๋ฅ์ ์ ์ง์ ์ผ๋ก ์ฑํํ์ฌ ๋ผ์ฐํ , ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ํตํฉ๊ณผ ๊ฐ์ ์ผ๋ฐ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์๊ตฌ ์ฌํญ์ ํด๊ฒฐํ๋ ๋์์ ๊ฐ๋ฐ์ ๋ฐ ์ต์ข ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ ์ ์๋ค. React์ ๊ณต์ ํ์ด์ง์์๋ ์๋์ ๊ฐ์ด ์๊ฐํ๋ค.. ์ด์ 1 ๋ค์