ํด๋น ๋ธ๋ก๊ทธ ์๋ฆฌ์ฆ๋ ์ ์งํ๊ฒ ๋ฐฐ์๋ณด๋ 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. ๊ทธ๋ฆฌ๊ณ ๋์ ๋ผ์ฐํ
- pages
- url ๊ตฌ์กฐ
- dynamic routing(๋์ ๋ผ์ฐํ
)
๋ฒ์ธ Next js์ Dynamic Routing๊ณผ Link๋ฅผ ์ด์ฉํด ๊ฐ๋จํ ๊ฒ์ํ์ ๋ง๋ค์ด๋ณด์.
3. ํ์ด์ง๋ฅผ ์ฐ๊ฒฐํ๊ธฐ ์ํ Link-Component ๊ทธ๋ฆฌ๊ณ Pre-Fetch
- Link
- Linking with Dynamic Routing
- Code Splitting & Pre-Fetching
4. Next.js์์ head ํ๊ทธ๋ฅผ ์กฐ์ํ๋ ๋ฉ์ง ๋ฐฉ๋ฒ
<Head>
_document.js
(๋ฒ์ธ & ์ค์ต)์ด๋ฏธ์ง์ ๋์์์ ์ ์ฅํ๊ณ ์ฌ์ฉํด๋ณด์.
5. ์น์ ๋ฐ์ ๊ณผ์ ์ผ๋ก ๋ณด๋ SSG์ SSR
- ์ต์ด์ ๋ ๋๋ง
- ajax์ CSR
- SSR์ ์งํ SSG
- ๊ทธ๋ผ ์ธ์ ๋ญ ์จ์ผํ ๊น?
6. next์ ๋ ๋ฒ์งธ ํต์ฌ Pre-Rendering
- Pre-Rendering์ 2๊ฐ์ง ๋จ๊ณ
- Pre-Rendering์ SSG์ SSR
7. SSG๋ก ๊ฒ์ ์์ง ์ต์ ํ ๋ ธ๋ฆฌ๊ธฐ
getStaticProps
๋?getStaticPaths
๋?
๋๊ธ