์์ ์ต๋ Next.js - ๊ณต์ ๋ฌธ์ ํ์ด๋ณด๊ธฐ
๊ณต์ ๋ฌธ์๋ก ์ต์ Next.js๋ฅผ ๋ฐฐ์๋ด ๋๋ค. ๋ฌธ์ ํด๊ฒฐ์ ๋๊ตฌ๋ก์จ Next.js๊ฐ ํ์ํ ์ด์ ๋ฅผ ์ดํดํ์ค ์ ์์ด์!
์๊ฐ์ 735๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ํด๊ฒฐ
์๋ ํ์ธ์! ์๋น์ค ๋ฐฐํฌ๋ฅผ ํ๋๋ฐ ์๋ฌ๊ฐ ์๊ฒจ์ ๋ฌธ์๋๋ฆฝ๋๋ค!
์๋ ํ์ธ์! ๊ฐ์๋ฅผ ์ญ ๋ฃ๊ณ , ๋ฐฐํฌ ๋จ๊ณ๊น์ง ์๋๋ฐ ์๋ฌ๊ฐ ์๊ฒจ์ ์งํ์ด ์๋์ด ๋ฌธ์๋๋ฆฝ๋๋ค!vercel์์ ์๋ฌ๋<img src="https://cdn.inflearn.com/public/files/posts/9287505a-b09
reacttypescriptnext.jsnext.js13ssi02014
ใป
1
513
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์ generateStaticParams ๊ดํด์ ์ง๋ฌธ
<img src="https://cdn.inflearn.com/public/files/posts/b818da1e-2e15-4933-870c-d938ef3066ba/01648391-36b1-4dda-9236-28e94eef06a1.png" media-type="img"
reacttypescriptnext.jsnext.js13dev
ใป
0
343
2
- ํด๊ฒฐ
next/image์ ๋ํ ์ง๋ฌธ
์ง๋ฌธ 1. next/image๋ (Image์ปดํฌ๋ํธ) ์น์ฌ์ดํธ์ ๋ก๋ฉ ์ฑ๋ฅ์ ๋ง์ ์ํฅ์ ๋ฏธ์น๋ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ง์ผ๋ก๋ ํฐ ๊ฐ์ ์ ๋ณผ ์ ์๋๋ก ํด์ฃผ๋ ์ปดํฌ๋ํธ์ด๋ผ์ ๋น์ฉ์ด ๋น์ธ๋ค๊ณ ํ๋๋ฐ ๊ทธ๋ ๋ค๋ฉด AWS๋ก ๋ฐฐํฌํ์ ๋ next/image ๋๋ฌธ
reacttypescriptnext.jsnext.js13yho79555
ใป
1
246
1
- ํด๊ฒฐ
๋ฐ์ดํฐ ์ฌ๊ฒ์ฆ ๋ฐฉ๋ฒ
๊ฐ์์์ ๋ฐ์ดํฐ๋ฅผ ์ฌ๊ฒ์ฆํ๋ ๋ฐฉ๋ฒ์ผ๋ก route handler๋ฅผ ์์ฑํ๊ณ ๊ทธ ์์์ revalidateTag ํจ์๋ฅผ ํธ์ถํด์ ์บ์๋ฅผ ์ง์ฐ๋ ๋ฐฉ๋ฒ์ ์๊ฐํด์ฃผ์ จ๋๋ฐ์! ๊ทธ์ ๊ด๋ จํด์ ๊ถ๊ธํ๊ฒ ์ธ๊ฐ์ง ์์ด์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.๋ฒํผ๊ณผ ๊ฐ์ ํด๋ผ์ด์ธ
reacttypescriptnext.jsnext.js13jojeon4515
ใป
1
251
2
- ํด๊ฒฐ
next.js ์์ ์๋ฒ ์ปดํฌ๋ํธ ๋น์ค์ ๋๋ฆฌ๋ ์ด์
1. ๊ฐ์ฌ๋๊ป์ ์ฌ๋ ค์ฃผ์ ๋ต๋ณ๋ค์ ๋ดค์ต๋๋ค. "๊ณต์ ๋ฌธ์์์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ํธ๋ฆฌ์ ๋์ ๋ณด๋ด๋ผ๊ณ ๊ถํ๋ค. ์๋ฒ ์ปดํฌ๋ํธ๋ฅผ ์ต๋ํ ํ์ฉํ๊ธฐ ์ํ ๊ถ์ฅ ์ฌํญ์ด๋ผ๊ณ ์ดํดํ์๋ฉด ์ข๋ค."์ด๋ผ๊ณ ๋ดค๋๋ฐ ํ๋ก์ ํธ๋ฅผ ์๋ฒ ์ปดํฌ๋ํธ์
reacttypescriptnext.jsnext.js13yho79555
ใป
1
312
1
- ํด๊ฒฐ
route.ts์ async ํค์๋๊ฐ ํ์ํ๊ฐ์?
/app/api/revalidate/route.ts ํ์ผ ๋ด POST ํจ์๊ฐ async๋ก ์ ์ธ๋์ด ์์ต๋๋ค. ๋ณธ๋ฌธ์ await์ด ์๋๋ฐ async๋ก ์ ์ธ๋์ด์ผ ํ๋์?
reacttypescriptnext.jsnext.js13yjkim325
ใป
1
169
1
- ํด๊ฒฐ
import ์ ๋๊ฒฝ๋ก ์ค์ ๋ฐฉ๋ฒ ์ง๋ฌธ ๋๋ฆฝ๋๋ค!
์กฐ์๋ ์๋ ํ์ธ์ ๐ ๊ฐ์ ์ ๋ณด์์ต๋๋ค!๊ฐ์๋ฅผ ๋ณด๋ค๊ฐ ๋ฌธ๋ ๊ถ๊ธํ ์ ์ด ์๋๋ฐ์! import ๋ฌธ ํตํด์ ์ ๋๊ฒฝ๋ก๋ก ํ์ผ์
reacttypescriptnext.jsnext.js13killyou18
ใป
0
287
1
- ํด๊ฒฐ
VSCode ํ์ฅํ๋ก๊ทธ๋จ์ ์ด๋ค ๊ฒ์ ์ฌ์ฉํ์ จ๋์?
์๋ ํ์ธ์ ๊ฐ์ ์ ๋ค์์ต๋๋ค. ํน์ VSCode์ ์ด๋ค ํ์ฅํ๋ก๊ทธ๋จ๋ค์ ์ฌ์ฉํ์ จ๋์ง๊ถ๊ธํฉ๋๋ค.๊ฐ์ ๋ฃ๋ค๋ณด๋ฉด, ์๋์์ฑ ๋๋ ๋ถ๋ถ๋ค์ด ์๋๋ฐ,์ ํ๊ฒฝ์์๋ ๊ทธ๋ฐ VSCode UI๊ฐ ์๋จ๋๋ผ๊ตฌ์
reacttypescriptnext.jsnext.js13์ฝ๋ฉ๊ฐ์ฌ
ใป
0
314
1
- ํด๊ฒฐ
ํ๊ฒฝ๋ณ์ ์ค๋ฅ
<img src="https://cdn.inflearn.com/public/files/posts/9f0cce8d-9fc9-48b1-a34b-2d00d1ff6389/แแ ณแแ ณแ แ ตแซแแ ฃแบ2024-03-07แแ ฉแแ ฎ5.02.53.png" alt="แแ ณแแ ณแ แ ตแซแแ ฃแบ 202
reacttypescriptnext.jsnext.js13์์ฑ์ ์์
ใป
1
229
1
- ํด๊ฒฐ
ํ์ด๋๋ ์ด์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค
CSR์์ ๋น์ด์๋ HTML์ ํ์ฑํ ๋ id="root" ์๋ฆฌ๋จผํธ๋ฅผ ๋ง๋๋ฉด ๋ฆฌ์กํธ ์ฑ์ ๋ง์ดํธ(JS ์คํ)ํ๋ ๊ฒ๊ณผSSR์์ ์๋ฒ์์ pre-render๋์ด ์์ฑ๋ HTML์ JS์ ์ฐ๊ฒฐํ๋ ๊ณผ์ ์ธ ํ์ด๋๋ ์ด์ ์ ์ด๋ค ์ฐจ์ด๊ฐ ์๋๊ฑด๊ฐ์?
reacttypescriptnext.jsnext.js13๋ฐ์ง๋ฐ์งํ ๋๋์ง
ใป
2
298
2
- ํด๊ฒฐ
ํ๋ก ํธ์๋๊ฐ Next๋ฅผ ์ด์ฉํ์ฌ API ๋ง๋๋ ์ด์ ๊ฐ ๊ถ๊ธํฉ๋๋ค~!
์๋ ํ์ธ์ ์ ์๋~!์ผ๋จ ๋จผ์ ใ ใ ... ์ง๋ฌธ์ด ๋๋ฌด ๋ง์์ ์ฃ์กํฉ๋๋ค ใ ใ ใ ...! ์ ๊ฐ ์์ง ์ฃผ๋์ด์ฌ์ ๋ฉ์ธ ํ์ ๊ฐ๋ฐ์ ์ ๋ฐฐ๋์ ๋ณด์กฐํ์ฌ,๋ง๋ค์ด์ง ๋ค์ํ ๋ชจ๋์ด๋ ๋น์ฆ๋์ค ๋ก์ง ๋ฑ์ ์ด์ฉํ์ฌ ๋ฐ์ดํฐ
reacttypescriptnext.jsnext.js13๋ฐํฌํฐ
ใป
3
714
1
- ํด๊ฒฐ
generateStaticParams์ ๋ํ์ฌ ์ง๋ฌธ ๋๋ฆฝ๋๋ค~!
์๋ ํ์ธ์ ์ ์๋ ์ข์ ๊ฐ์ ์ ๋ง ๊ฐ์ฌํฉ๋๋ค. ๋ค๋ฆ์ด ์๋๋ผ, ๊ฐ์ ์ค์์ generateStaticParams์ ๊ดํ์ฌ ๋ค๋ฃจ์ง ์๋ ๊ฒ ๊ฐ์์ํผ์์ ๊ณต๋ถ์ค์ธ
reacttypescriptnext.jsnext.js13๋ฐํฌํฐ
ใป
2
847
1
- ํด๊ฒฐ
์ ์๋ ํน์ Next.js 13์์์ React-query๋ ์ด๋ป๊ฒ ์๊ฐํ์ค๊น์?
์๋ ํ์ธ์ ์ ์๋!์ข์ ๊ฐ์ ์ ๋ง ๊ฐ์ฌํ๊ฒ ๋ฃ๊ณ ์์ต๋๋ค.์ ์๋์ ๊ฐ์๋ฅผ ๋ฃ๋ค๋ณด๋, Next.js 13์ Data Fetching ๋ฐฉ๋ฒ์ด React Query๊ณผ ์ ์ฌํจ์ ๋๊ผ์ต๋๋ค.(์ฃผ๋์ด๋ผ
reactnext.jsnext.js13react-query๋ฐํฌํฐ
ใป
2
1,914
3
- ํด๊ฒฐ
ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ SSG? SSR?
์ด์ ์ง๋ฌธ๊ธ์ ๋ต๊ธ์ ๋จ๊ฒผ๋๋ฐ, ํ์ธํ๊ธฐ ํ๋์ค ๊ฒ ๊ฐ์ ์ง๋ฌธ์ ์๋ก ์์ฑํฉ๋๋ค. ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ ๊ธฐ์กด Next12์ฒ๋ผ Pre-Rendering์ผ๋ก ์ ๊ณต๋๋ค๊ณ ์๊ณ ์๋๋ฐ, ์ด๋ ๊ธฐ๋ณธ์ ์ผ๋ก S
reacttypescriptnext.jsnext.js13985
ใป
2
836
2
- ํด๊ฒฐ
SSR๊ณผ RSC์ ์ฐจ์ด์ ์ ๊ดํ์ฌ ์ง๋ฌธ์ด ์์ต๋๋ค.
๊ธฐ์กด์ Server Side Rendering(SSR)๊ณผ ๋ค๋ฅธ ์ ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํ์๋ฉด SSR์ ์๋ฒ์์ ํ์ด์ง ๋จ์๋ก ์ ์ ์ธ ๋ฆฌ์์ค๋ฅผ ์์ฑํ์ง๋ง RSC๋ ์ปดํฌ๋ํธ ๋จ์๋ก ์ ์ ์ธ ๋ฆฌ์์ค๋ฅผ ์์ฑํ ์ ์๋ค๋ ์ ์ ๋๋ค.์ฌ๊ธฐ์ RSC์
reacttypescriptnext.jsnext.js13985
ใป
1
1,236
1
- ํด๊ฒฐ
nextjs์ 14๋ฒ์ ์์ data fetch
fetch๊ฐ next.js์์๋ ํ์ฅ๋ ๋ฒ์ ์ ์ ๊ณตํ๋ค๊ณ ํ๋๋ฐ์ด๋๊ฐ ์ด๋ป๊ฒ ํ์ฅ๋์๋์ง๊ฐ ๊ถ๊ธํฉ๋๋ค!๊ทธ๋ฆฌ๊ณ 13๋ฒ์ ์ด์ ์๋ fetch์์ ์บ์ฑ์ด ๋์ง ์์๋ ๊ฒ์ผ๊น์?์ฐจ๋ณํ๋ ์ด์ ์ธ์ง ๊ถ๊ธํฉ๋๋ค!
reacttypescriptnext.jsnext.js13์งํ
ใป
1
1,402
1
- ํด๊ฒฐ
๋น๋๊ธฐ ํธ์ถ, fetch, ๋ผ์ฐํธ ํธ๋ค๋ฌ ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค.
์๋ ํ์ธ์! revalidateTag ํจ์ ๊ด๋ จ ์ฝ๋๋ฅผ ๋ณด๋ค๊ฐ ๊ถ๊ธํ ์ ์ด ์๊ฒจ์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค!์ฐ์ fetch๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋ ๋น๋๊ธฐ ํธ์ถ์ ์๋ฒ ์ปดํฌ๋ํธ์์๋ง ํธ์ถํ ์ ์๋ค๊ณ ํด์ ๋ ์จAPI
reacttypescriptnext.jsnext.js13revalidatetagdawn
ใป
1
408
1
- ํด๊ฒฐ
revalidate ์ง๋ฌธ
์๋ ํ์ธ์ ์ ์๋๊ฐ์ ๋ด์ฉ์ค์ revalite ์ ๋ฐฉ์์ด๋๊ฐ์ง๊ฐ ์๋ค๊ณ ํ์ จ๊ณ ๊ทธ์ค ํ๋์ธtime ๋ฐฉ์์ ์๋ฅผ๋ค์ด 10์ด๋ก ์ค์ ํ์๋ค๋ฉด10์ดํ์ ๋๊ตฐ๊ฐ๊ฐ ์์ฒญ์ํ๋ฉด์ฒซ๋ฒ์งธ ์์ฒญ์๋ ์ด์ ๊ฐ์ ๋ฐ๊ณ
reacttypescriptnext.jsnext.js13๊ฐ์ค๋ผ์ดํ ์์ ์
ใป
1
462
1
- ํด๊ฒฐ
์น์ 3. ๋ ์จ ์ฌ๊ฒ์ฆํ๊ธฐ NextRequest ์ง๋ฌธ์ ๋๋ค.
์ฝ์๋ก๊ทธ ๊ฒฐ๊ณผ<img src="https://cdn.in
reacttypescriptnext.jsnext.js13๊ฐ์ค๋ผ์ดํ ์์ ์
ใป
1
316
1
- ํด๊ฒฐ
๋ฉํ๋ฐ์ดํฐ ๊ด๋ จ ์ง๋ฌธ
๋์ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ์ฉํ๋ ค๊ณ ํฉ๋๋ค.๋ฉํ๋ฐ์ดํฐ๊ฐ ์์นํด์ผํ๋๊ณณ์ ๋ํด์ ๊ถ๊ธํ๋ฐ์generateMetadata ํจ์๋layout ํน์ page.tsx ์๋ง ์์นํด์ผ ํ๋์?page.tsx ์์์ import ํ ์ปด
reacttypescriptnext.jsnext.js13๊ฐ์ค๋ผ์ดํ ์์ ์
ใป
0
199
1







