[Next.js] 이미지 최적화

프론트엔드에서 최적화 1순위는이미지 최적화 입니다. 웹 개발에 있어서 이미지 최적화는 사용자 경험과 성능 향상에 필수적입니다. 특히 모던 웹에서는 이미지 로딩 속도가 페이지 로딩 시간에 큰 영향을 미치므로, 이를 효율적으로 관리하는 것이 중요합니다.  다행히도 Next.js 에서는 자체적으로 Image 라는 컴포넌트를 제공함으로써코드 몇줄만으로 이미지를 최적화 시켜줄 수 있습니다. 다음 그림과 같이 일반적인 Tag 와 Tag 를 비교해 봐도 확연하게 차이가 나는 것을 보실 수 있습니다. 기본적인 형식Image 컴포넌트는 아래와 같은 properties 가 필수적으로 들어가야 합니다.import Image from 'next/image' export default function Page() { re..

• format_list_bulleted Next
• · 2024. 9. 22.
• textsms

[Next.js] 배포시 console 지우기

Next.js 을 이용해 production 환경에서 console 을 지우는 방법을 알아보겠습니다.Next.js 에서 사용하기기본 사용법Next.js는 빌드 후 결과물에 console 이 뜨지 않도록 하는 기능을 자체적으로 제공하고 있습니다.next.config.js 파일의 compiler에 아래와 같이 removeConsole 옵션을 주면 간단하게 해결됩니다.만약 removeConsole 을 조건 없이(process.env.NODE_ENV 없이 ) 그냥 true값으로 주면, 개발환경에서도 콘솔이 뜨지 않게 됩니다.  특정 console 예외 방법만약 모든 console 을 제거하는 게 아닌, 특정 console ( error, warn ) 은 띄어주고 싶다면 아래와 같이 작성하시면 됩니다. 혹시 배포..

• format_list_bulleted Next
• · 2024. 9. 20.
• textsms

Next.js MetaData 심화

metadata 를 간단하게 사용하고 있다가 다양하게 사용할 수 있는 걸 알게 되어 정리해 보았습니다.  설명metadata 를 모른다면 개인적으로 조금 공부하고 오거나 제 블로그에 next.js 소개 part 부분을 읽어 보시면 좋습니다. 기본적인 metadata 활용은 아래처럼 사용 할 수 있습니다.export const metadata = { title: "next.js", description: "hello next.js"} 하지만 항상 페이지별로 metadata 를 적용하고 설명하고 추가하고 하는것은 귀찮을 수 있기 때문에 동적으로 만들 수도 있습니다.import { Metadata } from 'next';export const metadata:Metadata = { title: { t..

• format_list_bulleted Next
• · 2024. 7. 30.
• textsms

Next.js - 경로

usePathnameusePathname 은 현재 URL 경로를 가져와 주는 기능 입니다.usePathname 을 사용하려면 클라이언트 컴포넌트 이기 때문에 "use client" 를 사용하셔야 합니다."use client"import React from 'react'import Link from 'next/link'import { usePathname } from 'next/navigation'import '@/styles/styles.css'const Navigater = () => { const path = usePathname(); return ( Home About )}export default Navigater // 똑같습니다. 원하는 형식에 맞춰서 사용하..

• format_list_bulleted Next
• · 2024. 5. 21.
• textsms

Next.js

Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 페이지 생성을 지원하여 성능을 향상시키고, 개발자들이 간편하게 웹 애플리케이션을 구축할 수 있도록 도와줍니다.시작하기npx create-next-app@latest 위에 명령어를 입력하면 이러한 문구가 보이실 것입니다. 이때 자기가 원하는 기능에 맞춰 No / Yes 를 누르시면 됩니다.파란색으로 칠한 건 제가 원하는 기능에 맞춰 고른 부분이라 신경쓰지 않으셔도 됩니다.What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwin..

• format_list_bulleted Next
• · 2024. 5. 21.
• textsms