JavaScript26React19TroubleShooting6Web3TypeScript2NodeJS2Git1
๋ธ”๋กœ๊ทธ Pages Router โ†’ App Router ์ „ํ™˜๊ธฐ 2ํŽธ [NextJS]

๋ธ”๋กœ๊ทธ Pages Router โ†’ App Router ์ „ํ™˜๊ธฐ 2ํŽธ [NextJS]

NextJS v12์˜ Page Router ๋ฐฉ์‹์œผ๋กœ ๊ฐœ๋ฐœ๋œ ๊ฐœ์ธ๋ธ”๋กœ๊ทธ๋ฅผ NextJS v13(14)์˜ AppRouter๋กœ ์ „ํ™˜ํ•˜๋ฉด์„œ ์žˆ์—ˆ๋˜ ๊ณผ์ •์— ๋Œ€ํ•ด ์ •๋ฆฌํ•œ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.

  • nextjs
  • rsc
๋ธ”๋กœ๊ทธ Pages Router โ†’ App Router ์ „ํ™˜๊ธฐ 1ํŽธ [NextJS]

๋ธ”๋กœ๊ทธ Pages Router โ†’ App Router ์ „ํ™˜๊ธฐ 1ํŽธ [NextJS]

NextJS v12์˜ Page Router ๋ฐฉ์‹์œผ๋กœ ๊ฐœ๋ฐœ๋œ ๊ฐœ์ธ๋ธ”๋กœ๊ทธ๋ฅผ NextJS v13(14)์˜ AppRouter๋กœ ์ „ํ™˜ํ•˜๋ฉด์„œ ์žˆ์—ˆ๋˜ ๊ณผ์ •์— ๋Œ€ํ•ด ์ •๋ฆฌํ•œ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.

  • nextjs
  • rsc
NextJS ํ”„๋กœ์ ํŠธ์—์„œ QueryString ๊ฒ€์ฆํ•˜๊ธฐ

NextJS ํ”„๋กœ์ ํŠธ์—์„œ QueryString ๊ฒ€์ฆํ•˜๊ธฐ

ServerSide์™€ ClientSide์—์„œ QueryString์„ ๊ฒ€์ฆํ•˜๋Š” ์—ฌ๋Ÿฌ ํŒจํ„ด๊ณผ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋‹ค๋ฃฌ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.

  • nextjs
  • hoc
  • custom hooks
NextJS ํ”„๋กœ์ ํŠธ ํ…Œ์ŠคํŠธ ์ž‘์„ฑํ•˜๊ธฐ (feat: useRouter)

NextJS ํ”„๋กœ์ ํŠธ ํ…Œ์ŠคํŠธ ์ž‘์„ฑํ•˜๊ธฐ (feat: useRouter)

NextJS๋กœ ๋งŒ๋“  ๋ธ”๋กœ๊ทธ์— ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์…‹์—… ๊ณผ์ •๊ณผ useRouter๋ฅผ ๋ชจํ‚นํ•˜๋Š” ๊ณผ์ • ๊ทธ๋ฆฌ๊ณ  ๊ฐ„๋‹จํ•œ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ํ…Œ์ŠคํŠธ์ฝ”๋“œ ์ž‘์„ฑ์„ ๋‹ค๋ฃฌ ํฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.

  • nextjs
  • jest
  • react testing library