Next.js: 정적 λ¦¬μ†ŒμŠ€κ°€ 잘λͺ»λœ μœ„μΉ˜(μ‚¬μš©μž 지정 μ„œλ²„)μ—μ„œ λ Œλ”λ§λ˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2016λ…„ 12μ›” 27일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: vercel/next.js

μ‚¬μš©μž μ •μ˜ μ„œλ²„(2.0.0 λ² νƒ€μ—μ„œ)λ₯Ό μ‚¬μš©ν•  λ•Œ 정적 λ¦¬μ†ŒμŠ€λ‘œ μ΄μƒν•œ(λ‚΄ μƒκ°μ—λŠ” 잘λͺ»λœ) λ™μž‘μ΄ λ°œμƒν•©λ‹ˆλ‹€.
예λ₯Ό λ“€μ–΄ λ‚΄ μ‚¬μš©μž 지정 μ„œλ²„κ°€ "/blog/:id"둜 μš”μ²­μ„ λ³΄λ‚΄λŠ” 경우 정적 λ¦¬μ†ŒμŠ€λŠ” "./blog/static/image.jpg"μ—μ„œ μ‘°νšŒλ©λ‹ˆλ‹€.

μ‰½κ²Œ μž¬ν˜„ν•  수 μžˆλ„λ‘ "parameterized-routing"μ—μ„œ "blog"의 λ Œλ”λ§ 방법을 νŽΈμ§‘ν–ˆμŠ΅λ‹ˆλ‹€.

return <div>
      <h1>My {this.props.id} blog post</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <img src="./static/x.jpg" />
    </div>

λ¬Όλ‘  "정적" 폴더에 "x.jpg"λΌλŠ” 이미지λ₯Ό μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€.

"../static/x.jpg"에 μžˆλŠ” νŒŒμΌμ„ μ°Ύμ•„ 문제λ₯Ό ν•΄κ²°ν•  수 μžˆμ§€λ§Œ λΈ”λ‘œκ·Έκ°€ index.js μ•„λž˜μ— μžˆμ§€ μ•Šλ‹€λŠ” 사싀을 μ•…μš©ν•˜κΈ° λ•Œλ¬Έμ— 이것은 잘λͺ»λœ κ²ƒμž…λ‹ˆλ‹€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

<img src="/static/x.jpg" /> ( ./ μ—†μŒ ) 이어야 ν•˜μ§€ μ•ŠμŠ΅λ‹ˆκΉŒ?
νŽ˜μ΄μ§€κ°€ /blog/id 에 μ œκ³΅λœλ‹€κ³  κ°€μ •ν–ˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  3 λŒ“κΈ€

@DvirSh μƒ˜ν”Œ 리포지토리λ₯Ό 보내주싀 수 μžˆμŠ΅λ‹ˆκΉŒ?
κ·Έλž˜μ„œ μš°λ¦¬λŠ” 이것을 더 κ°€κΉŒμ΄μ—μ„œ λ³Ό 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

<img src="/static/x.jpg" /> ( ./ μ—†μŒ ) 이어야 ν•˜μ§€ μ•ŠμŠ΅λ‹ˆκΉŒ?
νŽ˜μ΄μ§€κ°€ /blog/id 에 μ œκ³΅λœλ‹€κ³  κ°€μ •ν–ˆμŠ΅λ‹ˆλ‹€.

@nkzawa λ§žμŠ΅λ‹ˆλ‹€!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰