[ Vercel ] Next.js 프로젝트에 Speed Insights를 설정해보자
·
Front-end/Vercel
목표Speed Insights를 설정하는 방법에 대해 알아보고 정리합니다.  공식문서 Speed Insights OverviewThis page lists out and explains all the performance metrics provided by Vercel's Speed Insights feature.vercel.com Speed Insights란 무엇인가?공식문서에서는 Speed Insights를 다음과 같이 소개하고 있습니다.Vercel Speed Insights provides you with a detailed view of your website's performance metrics, based on Core Web Vitals, enabling you to make data-dr..
[ Next.js ] 구글폰트로 폰트 적용하기
·
Front-end/Next.js
목표Next.js 프로젝트에서 구글폰트를 사용하여 폰트를 적용하는 방법에 대해 알아보고 학습한다.  적용 방법1. 원하는 폰트를 선택하기적용하고자하는 폰트를 google fonts에서 검색하여 font-family를 알아둡니다. 2. 폰트 및 추가속성 적용예시const inter = Inter({ subsets: ['latin'], weight: ['400', '700'], display: 'swap', fallback: ['Arial', 'sans-serif'], variable: '--inter-font'})위와 같은 형식으로 폰트정보를 입력하여 적용할 수 있습니다.세부적인 코드 및 추가속성을 정리하자면 다음과 같습니다.Inter : next/font/google에서 제공하는 Inter 폰트..