Next.jsใๅงใใ
Reactใๅงใใ้ใซๅฟ ใ็ฅใฃใฆใใในใNext.jsใใฌใผใ ใฏใผใฏใๅๅฟ่ ็ฎ็ทใฎใใใใใใ่ชฌๆใใใๅฎๅ่ ใๆบ่ถณใใๅฅฅๆทฑใๅไฝๅ็ใฎ็่งฃใพใงใNext.jsใไธๆฐใซ่งฃๆฑบใใพใใ
ๅ่ฌ็ 841ๅ
้ฃๆๅบฆ ๅ็ด
ๅ่ฌๆ้ ็กๅถ้

- ๆช่งฃๆฑบ
globals.css๋ฅผ ์ญ์ ํ๋ 404๊ฐ ๋์ต๋๋ค
styles/globals.css์ ๋ด์ฉ์ ์ญ์ ํ๋_app.jsx์์ import ์๋ฌ๊ฐ ์๊ธฐ๊ณ impor
javascriptreactnext.jssirubom12032826
ใป
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.jsbluea
ใป
1
267
2
- ่งฃๆฑบ
EsLint flat config format ์ผ๋ก ๋ง๋ค์ด์ง ๋ ์ฐธ๊ณ
import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslint
javascriptreactnext.jseslintprettieremthrology
ใป
0
306
1
- ๆช่งฃๆฑบ
<img /> ์์ ๋์ <Image /> ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ์ด์ (์ฑ๋ฅ ์ต์ ํ)
์น์ 11์ ์ด๋ฏธ์ง ์ฑ๋ฅ ์ต์ ํ ๊ฐ์์์ Next.js์ ์ด๋ฏธ์ง ์ฑ๋ฅ ์ต์ ํ์ ๋ํด ์ค๋ช ํ์ค ๋์ ๊ฐ์ ์ฝ๋๊ฐ ์ปดํฌ๋ํธ๊ฐ ์๋ ์์์ธ๋ฐ๋ ์ด๋ฏธ์ง ์ฑ๋ฅ ์ต์ ํ๊ฐ ์ ๋๋ ๊ฒ์ ๋ณด์์ต๋๋ค.&nb
javascriptreactnext.jsimgae์ปดํฌ๋ํธ์ฑ๋ฅ์ต์ ํlazyloading์ง์ฐ๋ก๋ฉkdhahtks0876
ใป
0
209
2
- ๆช่งฃๆฑบ
์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋์ด HTML์ด ์์ฑ๋๋ ๊ณณ (getServerSideProps VS useEffect)
์๋ ํ์ธ์ :) ์น์ 9 ๋ถ๋ถ์ ๋ค ๋ฃ๊ณ ๋์ ๋ช ํํ ์ดํด๊ฐ ๊ฐ์ง ์๋ ๋ถ๋ถ์ด ์์ด ์ง๋ฌธ๋๋ฆฝ๋๋ค. getServerSideProps๋ฅผ ์ด์ฉํ์ฌ ํ์ด์ง๋ฅผ ๋ก๋ฉํ ๋๋ "์ปดํฌ๋ํธ๊ฐ ๋
javascriptreactnext.jskdhahtks0876
ใป
0
202
1
- ่งฃๆฑบ
router๋ฅผ ์ฌ์ฉํ ๋ ์ ํ์ด์ง๊ฐ ๊ฐฑ์ ๋๋์ง์ ๋ํ ์ง๋ฌธ
์๋ ํ์ธ์.๋ฉด์ ์ค๋น์ ๋์์ด ๋ ๊ฑฐ ๊ฐ๊ณ ๊ฐ๋ ์ ์ผ๋ก๋ ๊ถ๊ธํด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.์ฅ๋ฐ๊ตฌ๋์์ ์ญ์ ๋ฅผ ํ๋ฉด ๊ฐฑ์ ๋๋๋ฐ์ ๋์์๋ฆฌ์์ ์ฒ์์ router.replace(router.asPath)
javascriptreactnext.jsys51332839
ใป
1
319
2
- ่งฃๆฑบ
Image ์ปดํฌ๋ํธ width, height ์์ฑ
Image ์ปดํฌ๋ํธ์ css ๋ชจ๋ ๋ฐฉ์์ผ๋ก width์ height ๊ฐ์ ์ค์ ํ๋ฉด width, height ์์ฑ์ ๋นผ๋ ๋๋ ์ค ์์๋๋ฐ ๋นผ๋ณด๋๊น width ์์ฑ์ด ํ์ํ๋ค๊ณ ์๋ฌ๊ฐ ๋๋ค์.Image ์ปดํฌ
javascriptreactnext.jsys51332839
ใป
1
220
2
- ่งฃๆฑบ
์คํ์ด์ค + ์ปจํธ๋กค ๋๋ฌ๋ ํ์ฑํ ์๋์๋๋ถ ์ฐธ๊ณ ํ์ธ์...
์ธํ ๋ฆฌ์ผ์ค ๋จ์ถํค (Intellisense shortcut)<a target="_blank" rel="noopener noreferrer nofollow" class="headerlink" href="https://
javascriptreactnext.jsseeeun
ใป
3
318
3
- ่งฃๆฑบ
ํ์ผ๋ช ๋ช ๋ช ๊ท์น์ ๋ํด์ ๋ฌป๊ณ ์ถ์ต๋๋ค
์๋ ํ์ธ์ ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค.Layout.jsx ์์๋ ๋๋ฌธ์๋ฅผ ์ฌ์ฉํ๊ณ ,pages ์์ ํ์ผ๋ค์ carts.jsx ์๋ฌธ์๋ก ์ฌ์ฉํ๋๊ฒ ๊ฐ์๋ฐ๊ด๋ก์ ๊ทธ๋ฐ๊ฑด์ง ๊ท์น์ด ์๋๊ฑด์ง ๊ถ๊ธํฉ๋๋ค. ๊ฐ์ฌํฉ๋๋ค
javascriptreactnext.js820410
ใป
1
828
2
- ่งฃๆฑบ
getServerSideProps์์ axios ํธ์ถ์
const response = await axios.get(`http://localhost:4000/products/${id}`);๋ก ํธ์ถํ ๋ ํด๋ผ์ด์ธํธ์์๋ ๋ณ๋ค๋ฅธ ์๋ฌ ๋ฉ์์ง๊ฐ ๋์ค์ง ์์ผ๋<
javascriptreactnext.jsdaengcheongcrow
ใป
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.jswinzzone2
ใป
1
566
2
- ่งฃๆฑบ
bun, biome ์ฌ์ฉ ์ง๋ฌธ
์๋ ํ์ธ์, ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค.React Native ํ๋ก์ ํธ๋ฅผ ์งํํ ๋ Bun์ ์ฌ์ฉํ์ฌ ํจํค์ง ๋งค๋์ง์ ํ์ ๋ ๊ต์ฅํ ๊ฐ๋ฐ ๊ฒฝํ์ด ์พ์ ํ๋ ๊ธฐ์ต์ด ์์ต๋๋ค.๊ทธ๋ฆฌ๊ณ ๋น๊ต์ ์ต๊ทผ ESLint์ Prettier์ ๋จ์ ์
javascriptreactnext.jsjusthighway
ใป
0
327
2
- ่งฃๆฑบ
eslint ์ค๋ฅ..
์์ ๋ด์ฉ์ ๋ฐ๋ผ ์์ฑ ํ๋๋ฐ..์ด์ํ ์ ์ด ์์ด์ ๋ฌธ์ ๋๋ฆฝ๋๋ค.e
javascriptreactnext.jsnataek2159
ใป
1
604
2
- ๆช่งฃๆฑบ
API Routes๋ฅผ ์ฌ์ฉํ๋ ๊ธฐ์ค๊ณผ ์ฅ/๋จ์ ์ ๋ํด์ ์๊ณ ์ถ์ต๋๋ค!
์๋ ํ์ธ์, ๊ฐ์ฌ๋ ์ข์ ๊ฐ์ ๊ฐ์ฌํฉ๋๋ค!! ์๊ฐ ๊ฐ๋์ง ๋ชจ๋ฅด๊ณ ๋น ๋ฅด๊ฒ ์๊ฐ์ ํ๊ฒ ๋์์ต๋๋ค.API Routes ๋ถ๋ถ์ด ์กฐ๊ธ ํท๊ฐ๋ ค, ์ด ๋ถ๋ถ์ ๋ํ ๊ถ๊ธ์ฆ์ด ์๊ฒจ ์ง๋ฌธ์ ๋จ๊ธฐ๊ฒ ๋์์ต๋๋ค.Next.js๋ฅผ ์ฌ์ฉํ์ฌ API ๋ผ์ฐํธ๋ฅผ ํตํด ํด๋ผ์ด์ธํธ์์ ์๋ฒ๋ก ์ง์ ๋ฐ์ด
javascriptreactnext.jsmin997155003
ใป
1
852
3
- ่งฃๆฑบ
Link ์ปดํฌ๋ํธ์ prefetching ๊ธฐ๋ฅ
์๋ ํ์ธ์! Link ์ปดํฌ๋ํธ์ prefetching ๊ธฐ๋ฅ์ ๋ํด ๊ถ๊ธํ ์ ์ด ์์ด ์ง๋ฌธ ๋จ๊น๋๋ค. ๋ทฐํฌํธ์ ๋ค์ด์ค๋ Link ์์ญ์ ๋ํด ๋ฏธ๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ๋์ด์จ๋ค๊ณ ํ์ จ๋๋ฐ, ์ด๋ ์ ๋ ๋ฒ์๊น์ง ๋ฐ์ดํฐ๋ฅผ ๋์ด์ค๋๊ฑธ๊น์? ๋ง์ฝ ๊ทธ ๋งํฌ๋ก ์ฐ๊ฒฐ๋ ํ์ด์ง๊ฐ ์๋ฒ ์ฌ์ด๋
javascriptreactnext.jswonse
ใป
1
254
1

