next 파일 구성
CSS 스타일링
📌 애플리케이션에 전역 CSS 파일 추가하는 방법
/app/ui폴더 안을 살펴보면 global.css. 이 파일을 사용하여 CSS 재설정 규칙, 링크와 같은 HTML 요소에 대한 사이트 전체 스타일 등과 같은 CSS 규칙을 애플리케이션의 모든 경로 에 추가할 수 있다
애플리케이션의 모든 구성 요소를 가져올 수 global.css있지만 일반적으로 최상위 구성 요소에 추가하는 것이 좋다. Next.js에서 이는 루트 레이아웃이다
📌 라이브러리를 사용하여 clsx 클래스 이름 전환
상태나 다른 조선에 따라 요소의 스타일을 조건부로 지정해야 하는 경우 clsx 클래스 이름을 쉽게 전환할 수 있는 라이브러리
글꼴 및 이미지 최적화
📌 글꼴 최적화하는 이유
글꼴을 사용하면 브라우저가 처음에 대체 글꼴이나 시스템 글꼴로 텍스트를 렌더링 한 다음 로드된 후 사용자가 지정 글꼴로 교체할 때 레이아웃 변경이 발생한다.
이 교체로 인해서 텍스트 크기, 간격 또는 레이아웃이 변경되고 그 주위의 요소가 이동될 수도 있다.
Next.js는 모듈을 사용할 때 애플리케이션의 글꼴을 자동으로 최적화한다 next/font. 빌드 시 글꼴 파일을 다운로드하고 다른 정적 자산과 함께 호스팅합니다.
이는 사용자가 애플리케이션을 방문할 때 성능에 영향을 미칠 수 있는 글꼴에 대한 추가 네트워크 요청이 없음을 의미한다
📌 기본 글꼴 추가
/app/ui폴더에fonts.ts파일을 생성 - 이 파일을 사용하여 애플리케이션 전체에서 사용될 글꼴을 유지하게 된다.
next/font/google모듈에서 Inter 글꼴을 가져오면 이 글꼴이 기본 글꼴이 된다. 그런 다음 로드할 하위 집합을 지정한다.
이 경우 '라틴어'로 설정된다.
마지막으로 /app/layout.tsx의 <body>요소에 글꼴을 추가한다.
<body>요소에 Inter를 추가하면 글꼴이 애플리케이션 전체에 적용됩니다. 여기에는 글꼴을 부드럽게 처리하는 Tailwind 안티앨리어싱 클래스도 추가합니다. 이 클래스를 반드시 사용할 필요는 없지만 멋진 터치를 추가합니다.
브라우저로 이동하여 개발 도구를 열고 본문 요소를 선택합니다. 이제 Inter 및 Inter_Fallback이 스타일 아래에 적용된 것을 볼 수 있습니다.
진주링딩동🎵