π μΉμμλ νμΈμ΄ κ°λ₯ν©λλ€.
μΊλ μ€νλμ€
κΈ°κ° |
23.11 ~ 24.03 |
λ΄λΉ |
νλ‘ νΈμλ κ°λ°μ |
κΈ°μ |
Next.js, Typescript, Tanstack Query, Tailwind CSS, shadcn/ui |
κΈ°μ¬λ |
νλ‘ νΈμλ 100% |
μΊλ μ€νλμ€λ μ€μ μΈλ¬Ό μ΄λ―Έμ§λ₯Ό AI μΈν루μΈμ μ΄λ―Έμ§λ‘ λ³ννλ B2B μλΉμ€μ
λλ€. λν, λ°±μ€νΌμ€λ μ¬μ©μκ° μΈμ€νκ·Έλ¨ κ³μ μ μ°λνμ¬ ν¬μ€ν
μ μμ½ λ° μ
λ‘λνκ³ , μΈν루μΈμ κ²μμΌλ‘ λ§μΌν
μ νμν 30λ§ κ±΄μ μΈν루μΈμλ₯Ό κ²μν μ μλλ‘ μ§μν©λλ€.
μ μ¬μ
νμ ν©λ₯ν μ΄ν, μ΄κΈ° κ°λ°λΆν° λμμΈ, λ°°ν¬κΉμ§ νλ‘ νΈμλ κ°λ°μ λ¨λ
μΌλ‘ λ΄λΉνμ΅λλ€.
πΒ μ΄κΈ° νμ΄μ§ λ‘λ© μλ κ°μ
λ¬Έμ λ°μ μν©
- μ΄κΈ° νλ©΄μ λ€μμ κ³ ν΄μλ μ΄λ―Έμ§λ₯Ό ν¬ν¨νμ¬ νμ΄μ§ λ‘λ μκ°μ΄ νμ ν λλ €μ§λ λ¬Έμ κ° λ°μνμμ΅λλ€. μ΄λ μ¬μ©μ κ²½νμ μ ν΄νκ³ , μ΄ν κ°λ₯μ±μ λμ΄λ μμΈμ΄λμμ΅λλ€.
ν΄κ²° λ°©λ²
-
μ΄ λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν΄, λ€μκ³Ό κ°μ μ λ΅μ λμ
νμμ΅λλ€.
- μ΄λ―Έμ§ μ»΄ν¬λνΈλ₯Ό νμ©νμ¬ μ΄λ―Έμ§λ₯Ό λμ μΌλ‘ λ‘λνκ³ , λΈλΌμ°μ κ° μ§μνλ μ΅μ μ νμμΈ AVIF, WebPμ κ°μ μ΅μ μ΄λ―Έμ§ νμμ μ°μ μ μΌλ‘ μ¬μ©νμ¬ νμΌ ν¬κΈ°λ₯Ό κ°μμν€κ³ , μ΄λ―Έμ§ λ‘λ μκ°μ λ¨μΆμμΌ°μ΅λλ€.
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
},
};
- μ΄λ―Έμ§ μ»΄ν¬λνΈμ Lazy loading μ΅μ
μ μ μ©νμ¬, μ¬μ©μκ° μ€μ λ‘ ν΄λΉ μ΄λ―Έμ§κ° ν¬ν¨λ νλ©΄μ λλ¬νμ λ λ‘λλλλ‘ κ΅¬ννμμ΅λλ€. μ΄λ κ² νμ¬ μ΄κΈ° νμ΄μ§ λ‘λ© μκ°μ λ¨μΆνμμ΅λλ€.
- LCP(Largest Contentful Paint) μμκ° λ μ΄λ―Έμ§μ
priority
μμ±μ μΆκ°νμ¬ ν΄λΉ μ΄λ―Έμ§μ λ‘λ μ°μ μμλ₯Ό λμ¬ μ¬μ©μκ° νμ΄μ§λ₯Ό λ λΉ λ₯΄κ² λ‘λνκ³ μ£Όμ 컨ν
μΈ μ λΉ λ₯΄κ² μ κ·Όν μ μλλ‘ νμμ΅λλ€.
μ±κ³Ό

μ΅μ ν μ

μ΅μ ν ν
- μ΅μ νλ₯Ό ν΅ν΄ νμ΄μ§ 첫 λ‘λ μκ°μ μ΄μ μ μ½ 4sμμ 0.97sκΉμ§ λ¨μΆνμμ΅λλ€. μ΄λ‘ μΈν΄ μ¬μ©μλ€μ΄ νμ΄μ§μ λ 빨리 μ κ·Όν μ μκ² λμ΄, μ¬μ©μ λ§μ‘±λμ νμ΄μ§ μ΄νλ₯ κ°μμ κΈ°μ¬νμμ΅λλ€.
Next.js μ΄λ―Έμ§ μ΅μ ν | Ju4n_Devlog
πΒ μκ°μ΄ μ€λ걸리λ AI μ΄λ―Έμ§ μμ± μ μ¬μ©μ κ²½ν κ°μ




λ¬Έμ λ°μ μν©