Next.js ์์ํ๊ธฐ
React๋ฅผ ์์ํ ๋ ๊ผญ ์์์ผ ํ๋ Next.js ํ๋ ์์ํฌ. ์ ๋ฌธ์ ๊ด์ ์ ์ฌ์ด ์ค๋ช ๊ณผ ์ค๋ฌด์๊ฐ ๋ง์กฑํ๋ ์ฌ๋ ๊น์ ๋์ ์๋ฆฌ ์ดํด๊น์ง. Next.js๋ฅผ ํ๋ฐฉ์ ํด๊ฒฐํฉ๋๋ค.

- ๋ฏธํด๊ฒฐ
globals.css๋ฅผ ์ญ์ ํ๋ 404๊ฐ ๋์ต๋๋ค
styles/globals.css์ ๋ด์ฉ์ ์ญ์ ํ๋_app.jsx์์ import ์๋ฌ๊ฐ ์๊ธฐ๊ณ impor
javascriptreactnext.js๊ทํ ๋ถ๋์
ใป
8๋ฌ ์
0
54
1
- ๋ฏธํด๊ฒฐ
ESLint + Prettier ์ค์ ๊ด๋ จํด์ ์ง๋ฌธ์์ต๋๋ค
<img src="https://cdn.inflearn.com/public/files/posts/2a192271-d8bc-490b-ad78-281ccf09637b/cd1b06f5-8fd9-4f7d-b229-c730d5b3fcb4.png" media-type="img"
javascriptreactnext.jsํ์ฒญ
ใป
1
267
2
- ํด๊ฒฐ
EsLint flat config format ์ผ๋ก ๋ง๋ค์ด์ง ๋ ์ฐธ๊ณ
import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslint
javascriptreactnext.jseslintprettierDongmin Kim
ใป
0
306
1
- ๋ฏธํด๊ฒฐ
<img /> ์์ ๋์ <Image /> ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ์ด์ (์ฑ๋ฅ ์ต์ ํ)
์น์ 11์ ์ด๋ฏธ์ง ์ฑ๋ฅ ์ต์ ํ ๊ฐ์์์ Next.js์ ์ด๋ฏธ์ง ์ฑ๋ฅ ์ต์ ํ์ ๋ํด ์ค๋ช ํ์ค ๋์ ๊ฐ์ ์ฝ๋๊ฐ ์ปดํฌ๋ํธ๊ฐ ์๋ ์์์ธ๋ฐ๋ ์ด๋ฏธ์ง ์ฑ๋ฅ ์ต์ ํ๊ฐ ์ ๋๋ ๊ฒ์ ๋ณด์์ต๋๋ค.&nb
javascriptreactnext.jsimgae์ปดํฌ๋ํธ์ฑ๋ฅ์ต์ ํlazyloading์ง์ฐ๋ก๋ฉplay _Er
ใป
0
209
2
- ๋ฏธํด๊ฒฐ
์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋์ด HTML์ด ์์ฑ๋๋ ๊ณณ (getServerSideProps VS useEffect)
์๋ ํ์ธ์ :) ์น์ 9 ๋ถ๋ถ์ ๋ค ๋ฃ๊ณ ๋์ ๋ช ํํ ์ดํด๊ฐ ๊ฐ์ง ์๋ ๋ถ๋ถ์ด ์์ด ์ง๋ฌธ๋๋ฆฝ๋๋ค. getServerSideProps๋ฅผ ์ด์ฉํ์ฌ ํ์ด์ง๋ฅผ ๋ก๋ฉํ ๋๋ "์ปดํฌ๋ํธ๊ฐ ๋
javascriptreactnext.jsplay _Er
ใป
0
202
1
- ํด๊ฒฐ
router๋ฅผ ์ฌ์ฉํ ๋ ์ ํ์ด์ง๊ฐ ๊ฐฑ์ ๋๋์ง์ ๋ํ ์ง๋ฌธ
์๋ ํ์ธ์.๋ฉด์ ์ค๋น์ ๋์์ด ๋ ๊ฑฐ ๊ฐ๊ณ ๊ฐ๋ ์ ์ผ๋ก๋ ๊ถ๊ธํด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.์ฅ๋ฐ๊ตฌ๋์์ ์ญ์ ๋ฅผ ํ๋ฉด ๊ฐฑ์ ๋๋๋ฐ์ ๋์์๋ฆฌ์์ ์ฒ์์ router.replace(router.asPath)
javascriptreactnext.jsys5133
ใป
1
319
2
- ํด๊ฒฐ
Image ์ปดํฌ๋ํธ width, height ์์ฑ
Image ์ปดํฌ๋ํธ์ css ๋ชจ๋ ๋ฐฉ์์ผ๋ก width์ height ๊ฐ์ ์ค์ ํ๋ฉด width, height ์์ฑ์ ๋นผ๋ ๋๋ ์ค ์์๋๋ฐ ๋นผ๋ณด๋๊น width ์์ฑ์ด ํ์ํ๋ค๊ณ ์๋ฌ๊ฐ ๋๋ค์.Image ์ปดํฌ
javascriptreactnext.jsys5133
ใป
1
220
2
- ํด๊ฒฐ
์คํ์ด์ค + ์ปจํธ๋กค ๋๋ฌ๋ ํ์ฑํ ์๋์๋๋ถ ์ฐธ๊ณ ํ์ธ์...
์ธํ ๋ฆฌ์ผ์ค ๋จ์ถํค (Intellisense shortcut)<a target="_blank" rel="noopener noreferrer nofollow" class="headerlink" href="https://
javascriptreactnext.js์ฅ ์์ด
ใป
3
318
3
- ํด๊ฒฐ
ํ์ผ๋ช ๋ช ๋ช ๊ท์น์ ๋ํด์ ๋ฌป๊ณ ์ถ์ต๋๋ค
์๋ ํ์ธ์ ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค.Layout.jsx ์์๋ ๋๋ฌธ์๋ฅผ ์ฌ์ฉํ๊ณ ,pages ์์ ํ์ผ๋ค์ carts.jsx ์๋ฌธ์๋ก ์ฌ์ฉํ๋๊ฒ ๊ฐ์๋ฐ๊ด๋ก์ ๊ทธ๋ฐ๊ฑด์ง ๊ท์น์ด ์๋๊ฑด์ง ๊ถ๊ธํฉ๋๋ค. ๊ฐ์ฌํฉ๋๋ค
javascriptreactnext.jsํ์คํ๊ฐ๋ฐ์
ใป
1
828
2
- ํด๊ฒฐ
getServerSideProps์์ axios ํธ์ถ์
const response = await axios.get(`http://localhost:4000/products/${id}`);๋ก ํธ์ถํ ๋ ํด๋ผ์ด์ธํธ์์๋ ๋ณ๋ค๋ฅธ ์๋ฌ ๋ฉ์์ง๊ฐ ๋์ค์ง ์์ผ๋<
javascriptreactnext.js๋์ฒญํ๊น๋ง๊ท
ใป
1
357
2
- ํด๊ฒฐ
next create-next-app@latest ์ค์น ๋ฌธ์
Aborting installation.Unexpected error. Please report it as a bug: Error: EACCES: permission denied, open '/Users/jeonginn/Libra
javascriptreactnext.js๊ณฐ์ฝ๋
ใป
1
566
2
- ํด๊ฒฐ
bun, biome ์ฌ์ฉ ์ง๋ฌธ
์๋ ํ์ธ์, ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค.React Native ํ๋ก์ ํธ๋ฅผ ์งํํ ๋ Bun์ ์ฌ์ฉํ์ฌ ํจํค์ง ๋งค๋์ง์ ํ์ ๋ ๊ต์ฅํ ๊ฐ๋ฐ ๊ฒฝํ์ด ์พ์ ํ๋ ๊ธฐ์ต์ด ์์ต๋๋ค.๊ทธ๋ฆฌ๊ณ ๋น๊ต์ ์ต๊ทผ ESLint์ Prettier์ ๋จ์ ์
javascriptreactnext.jspopo
ใป
0
327
2
- ํด๊ฒฐ
eslint ์ค๋ฅ..
์์ ๋ด์ฉ์ ๋ฐ๋ผ ์์ฑ ํ๋๋ฐ..์ด์ํ ์ ์ด ์์ด์ ๋ฌธ์ ๋๋ฆฝ๋๋ค.e
javascriptreactnext.js๋ฏผ๊ฒฝ์ธ
ใป
1
604
2
- ๋ฏธํด๊ฒฐ
API Routes๋ฅผ ์ฌ์ฉํ๋ ๊ธฐ์ค๊ณผ ์ฅ/๋จ์ ์ ๋ํด์ ์๊ณ ์ถ์ต๋๋ค!
์๋ ํ์ธ์, ๊ฐ์ฌ๋ ์ข์ ๊ฐ์ ๊ฐ์ฌํฉ๋๋ค!! ์๊ฐ ๊ฐ๋์ง ๋ชจ๋ฅด๊ณ ๋น ๋ฅด๊ฒ ์๊ฐ์ ํ๊ฒ ๋์์ต๋๋ค.API Routes ๋ถ๋ถ์ด ์กฐ๊ธ ํท๊ฐ๋ ค, ์ด ๋ถ๋ถ์ ๋ํ ๊ถ๊ธ์ฆ์ด ์๊ฒจ ์ง๋ฌธ์ ๋จ๊ธฐ๊ฒ ๋์์ต๋๋ค.Next.js๋ฅผ ์ฌ์ฉํ์ฌ API ๋ผ์ฐํธ๋ฅผ ํตํด ํด๋ผ์ด์ธํธ์์ ์๋ฒ๋ก ์ง์ ๋ฐ์ด
javascriptreactnext.js๊น์ฉ๋ฏผ
ใป
1
852
3
- ํด๊ฒฐ
Link ์ปดํฌ๋ํธ์ prefetching ๊ธฐ๋ฅ
์๋ ํ์ธ์! Link ์ปดํฌ๋ํธ์ prefetching ๊ธฐ๋ฅ์ ๋ํด ๊ถ๊ธํ ์ ์ด ์์ด ์ง๋ฌธ ๋จ๊น๋๋ค. ๋ทฐํฌํธ์ ๋ค์ด์ค๋ Link ์์ญ์ ๋ํด ๋ฏธ๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ๋์ด์จ๋ค๊ณ ํ์ จ๋๋ฐ, ์ด๋ ์ ๋ ๋ฒ์๊น์ง ๋ฐ์ดํฐ๋ฅผ ๋์ด์ค๋๊ฑธ๊น์? ๋ง์ฝ ๊ทธ ๋งํฌ๋ก ์ฐ๊ฒฐ๋ ํ์ด์ง๊ฐ ์๋ฒ ์ฌ์ด๋
javascriptreactnext.js์ ์์ธ
ใป
1
254
1






