ํด๋น ๋ธ๋ก๊ทธ ์๋ฆฌ์ฆ๋ ์ ์งํ๊ฒ ๋ฐฐ์๋ณด๋ Next js ์๋ฆฌ์ฆ๋ก์จ ์ด 8๋ถ์์ผ๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค.
Next.js๊ณต์ ํํ์ด์ง์์ ์ด์ผ๊ธฐํ๋ ๋ด์ฉ์ ์ต๋ํ ์ดํดํ๊ธฐ ์ฝ๊ณ ์ง๊ด์ ์ด๊ฒ ๊ตฌ์ฑํ์์ต๋๋ค.
0. ๋ชฉ์ฐจ
1. create-next-app์ผ๋ก next ๊ฐ๋ฐ ํ๊ฒฝ ์ธํ ํ๊ธฐ
2. create-next-app์์ ๋ง๋ ์ฒซ ๋ฒ์งธ ํต์ฌ pages. ๊ทธ๋ฆฌ๊ณ ๋์ ๋ผ์ฐํ
3. ํ์ด์ง๋ฅผ ์ฐ๊ฒฐํ๊ธฐ ์ํ Link-Component ๊ทธ๋ฆฌ๊ณ Pre-Fetch
Dynamic Routing๊ณผ Link๋ฅผ ์ด์ฉํด ๊ฐ๋จํ ๊ฒ์ํ์ ๋ง๋ค์ด๋ณด์.
4. Next.js์์ head ํ๊ทธ๋ฅผ ์กฐ์ํ๋ ๋ฉ์ง ๋ฐฉ๋ฒ
๋ฒ์ธ & ์ค์ต) ์ด๋ฏธ์ง์ ๋์์์ ์ ์ฅํ๊ณ ์ฌ์ฉํด๋ณด์.
5. ์น์ ๋ฐ์ ๊ณผ์ ์ผ๋ก ๋ณด๋ SSG์ SSR
6. next์ ๋ ๋ฒ์งธ ํต์ฌ Pre-Rendering
7. SSG๋ก ๊ฒ์ ์์ง ์ต์ ํ ๋ ธ๋ฆฌ๊ธฐ
8. ์ ์งํ๊ฒ ๋ฐฐ์๋ณด๋ Next.js ์๋ฆฌ์ฆ๋ฅผ ๋ง์น๋ฉฐ..
์ ์งํ๊ฒ ๋ฐฐ์๋ณด๋ Next.js ์๋ฆฌ์ฆ๋ฅผ ์งํํ๋ฉฐ ์ฐธ ๋ง์ ๊ฒ๋ค์ ๋ค์ ๋ณด๊ฒ ๋์๊ณ ์๊ฒ ๋์๋ค.
๊ฐ์ธ์ ์ผ๋ก Next.js๋ฅผ ํฌํจํ ๋ชจ๋ ๋ถ์ผ์ ์๋ก์ด ๊ฒ์ ๋ฐ์๋ค์ด๊ธฐ ์ํด์๋ ๋ค์์ ์์์ผ ํ๋ค๊ณ ์๊ฐํ๋ค.
๋ด๊ฐ ์ง๊ธ ๋ฐฐ์ฐ๊ณ ์๋๊ฒ ์ด๋ค ๊ฒ์ ํด๊ฒฐํ ๊น?
๋ด๊ฐ ์ง๊ธ ๋ณด๊ณ ์๋ ๊ฒ์ ์ด๋์ ์ฌ์ฉํ ์ ์์๊น?
์ฌ์ค ์์ ๊ฒ๋ค์ ๋ ์๋ก ํ์ฌ๊ธ ์ถฉ๋ถํ ์ ๋๊ปด์ง๊ฒ ํ๋์ง๋ ๋๋ ์์ ์๊ฒ ๋ง์ ํ ์ ์๋ค.
๋๋ฅผ ํฌํจํ ๋ง์ ์ฌ๋๋ค์ด ๋ณผ ๊ธ์ด๋ ์ต๋ํ ๊ณต์ ๋ฌธ์์ ๋ฐฉํฅ์ ํํธ๋ฆฌ์ง ์์ผ๋ ค๊ณ ๋ ธ๋ ฅํ๊ณ ๊ทธ๋ ๋ค ๋ณด๋ ์ด์ฉ๋ฉด ๊ณต์ ๋ฌธ์์ ์๋ ๋ด์ฉ์ ๊ทธ๋๋ก CnP ํ๋ค๊ณ ๋๊ปด์ง ์๋ ์๋ค.
๋ํ ์ด๋ฐ ์๋ฆฌ์ฆ ๊ธ์ ์ฐ๋ ๊ฒ์ด ์ฒ์์ด๊ธฐ๋ ํ๋ฉฐ ๋ด๊ฐ ์๊ฐํ๋ ๊ฒ๋ค์ ์๋ ค์ฃผ๊ณ ์ถ์๋ฐ ์ด๋ป๊ฒ ์ ๋ฆฌํด์ผํ ์ง ๋ชจ๋ฅด๊ฒ ๋ ๋ง๋งํจ ๋๋ฌธ์ ์์ง์ ๊ธ์ด ๋์ค์ง ์์๋ค๊ณ ์๊ฐํ๋ค.
ํ์ง๋ง ์ด๋ฒ ์๋ฆฌ์ฆ๋ฅผ ์์์ผ๋ก ๋ฐ์ ํผ๋๋ฐฑ์ผ๋ก ์ฑ์ฅํด ์์ผ๋ก๋ ๋ค์ํ๊ณ ๋ง์ ์๋ฆฌ์ฆ๋ฅผ ๋ง๋ค์ด๋ด๋ฉฐ Next ํน์ ๋ค๋ฅธ ๊ฒ๋ค์ ์๋ก ์๋ํ๋ ์ฌ๋๋ค์๊ฒ ์กฐ๊ธ ๋ ๋์์ด ๋์์ผ๋ฉด ์ข๊ฒ ๋ค.
์๋ฆฌ์ฆ๋ ๊ธฐ์ด ์ด๋ก ๋ฟ ์๋๋ผ ์ค์ ํ๋ก์ ํธ๋ฅผ ์งํํด๋ณด๊ธฐ๋ ํ๋ฉฐ ๋ค์ํ ๊ฒ๋ค์ ์๋ํ ๊ฒ์ด๋ค.
๋๊ธ