[Next.js] tailwind CSS 로컬 폰트 적용 (feat. Type '{ children: Element[]; className: string; }' is not assignable to type)

next.js + tailwind CSS프로젝트에서 글씨체를 적용 하는 방법
해당 게시글은 다음 기술 스택을 기반으로 합니다.
- next.js v15 pages-router
- react v19
- typescript
- tailwindCSS
- shadcnUI

프로젝트에서 사용하는 pretendard를 예시로 작성합니다.

Optimizing: Fonts | Next.js

Optimize your application's web fonts with the built-in `next/font` loaders.

nextjs.org

Pretendard 파일을 다운로드 합니다.
- https://cactus.tistory.com/306
- 해당 프로젝트에서는 폰트 경량화를 위해 .woff2 확장자 파일을 다운로드 했습니다.
다음 경로에 글꼴을 위치 시킵니다.
- ROOT/public/fonts/PretendardVariable.woff2
pages/_app.tsx 에 pretendard 글꼴을 정의합니다.

//pages/_app.tsx
import '@/styles/globals.css';
import type { AppProps } from 'next/app';

// next.js의 font-local 사용
**import localFont from 'next/font/local';**
**export const pretendard = localFont({
  src: '../public/fonts/PretendardVariable.woff2', // 경로 주의!!
  display: 'swap',
  weight: '45 920',
  variable: '--font-pretendard',
});**

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

4. styles/global.css에서 body 값의 font-family를 지정합니다.

//styles/global.css
body {
  font-family: var(--font-pretendard); //localFont로 불러올 때 지정한 variable 값 입력
}

5. tailwind.config.ts에 fontFamily 속성을 추가합니다.

//tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        pretendard: ['var(--font-pretendard)'], //localFont로 불러올 때 지정한 variable 값 입력
      },
    },
  },
}

6. _document.tsx에서 localFont로 불러온 pretendard를 className을 통해 적용합니다.

//pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
import { pretendard } from './_app';

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body className={pretendard.variable}>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

className을 통해 pretendard를 지정할 때, Html 태그와 body 태그 둘 중 하나를 선택하여 지정

Html 태그와 body 태그 지정 어떤 차이가 있나?

적용 위치	적용 범위	스타일 상속	추천하는 경우
<html className="pretendard">	전체 문서	모든 요소가 폰트 상속	✅ 모든 텍스트에 같은 폰트를 적용하려면 <html>에 적용
<body className="pretendard">	body 내부 요소만	html 스타일에 영향을 받을 수 있음	✅ 특정 스타일을 body만 적용하려면 <body>에 적용

🚨 Trouble Shooting

Type '{ children: Element[]; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'className' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

해당 프로젝트의 페이지 최상위인 document 파일의 확장자는 tsx 로 className을 적용시 해당 문구로 빌드가 불가 하다.

기존 사내 서비스의 경우 javascript 기반의 프로젝트라 localFont를 className으로 지정시 오류가 발생하지 않았으나, 이번 프로젝트는 typescipt로 개발하면서 해당 오류를 만나게 되었다. 검색 시 나오던 대부분의 해결 방법은 app router를 활용한 next.js에서의 해결 방법이었다. 하지만 아래 링크의 글을 참고하여 수정할 수 있었다.

How to Use class instead of className with Preact and TypeScript

Bottom Line Up Front If you are using TypeScript with Preact aliased as React, you can add...

dev.to

✨오류 해결

타입 선언을 통해 해결

오류 메시지에서도 확인할 수 있듯이 HTMLAttributes에 className 속성이 없어 발생한 타입오류이다.

따라서, 위에서 언급한 링크에서 답을 얻어 다음과 같이 진행하였다.

1. root 경로에 타입 선언 파일 추가 ( 이름.d.ts )
- 파일의 용도를 직관적으로 하기 위해 className.d.ts 로 명명했다.
2. 타입 선언

/**
* declare - TypeScript에게 타입 정보만 제공하는 선언임을 알림
* namespace - 특정 타입들을 그룹화하여 네임스페이스로 관리
* interface -	객체의 구조를 정의하고 확장 가능하게 만듦
*/
declare namespace React {
  interface HTMLAttributes {
    className?: string;
  }
}

🥲들여다 보기..

하지만 HTMLAttributes에 className이 실제로 없는건지 궁금했다.

//_app.tsx
type TestProps = React.HTMLAttributes<HTMLDivElement>;
const testProps: TestProps = {
  className: 'test-class',
};

console.log(testProps); // { className: 'test-class' }

해당 로그에서는 className이 찍혔다.

className 이 HTMLAttributes<T> 내부에 포함되어 있는지 검색하였고 존재하고 있음을 확인했다.

추가적으로, 해당 값이 HTMLAttributes에 존재하는 것인지 확인하였다.

//pages/test.tsx
import { cn } from '@/lib/utils';

const MyComponent = ({ className }: React.HTMLAttributes<HTMLDivElement>) => {
  console.log('className:', className); // undefined
  return <div className={cn('base-class', className)}>Hello</div>;
};

export default MyComponent;

하지만 해당 로그에서 undefined로 변경되었다.

tw?: string; 속성이 추가되었지만, 기존 className?: string;이 대체 되었을 가능성이 생겼다.

shadcnUI를 설치하면서 추가했던 utils의 코드에서 react 내부에서 HTMLAttributes<T>가 재정의 된 것으로 보인다.

Manual Installation

Add dependencies to your project manually.

ui.shadcn.com

// @/lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

해당 파일의 역할은 아래 블로그에 잘 정리되어 있었다.

clsx, twMerge, cn, shadcn-ui

shadcn-ui 라이브러리를 사용하면 자주 만나고, 필수 요소 중 하나인 cn 함수를 자세히 들어다 보려고 합니다. 그러면 이해도가 높아지고 기억에도 도움이 됩니다. shadcn-ui@latest init 으로 설치하면, l

polyframe.tistory.com

shadcn UI를 사용하면서 tailwind CSS의 className을 병합시켜주기 위한 코드로 요약되는데, shadcnUI의 install Manual에 적혀 추가되는 파일이라 해당 파일은 꼭 필요할 거 같다. 따라서 위의 방법을 통해 type error를 해결하는 방향으로 일단은 마무리 하였다.

저작자표시 비영리 변경금지

'Development > Next.js' 카테고리의 다른 글

[Next.js] node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기 (0)	2024.12.23
[Next.js] Next.js의 기본 메모리 관리 구조 - node.js v8 (0)	2024.12.22
[Next.js] SWC를 활용하여 빌드 시간 단축하기 (3)	2024.11.01

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

𝘭𝘶𝘮𝘪𝘯𝘰𝘶𝘴

[Next.js] tailwind CSS 로컬 폰트 적용 (feat. Type '{ children: Element[]; className: string; }' is not assignable to type)

🚨 Trouble Shooting

✨오류 해결

🥲들여다 보기..

'Development > Next.js' 카테고리의 다른 글

댓글

티스토리툴바

[Next.js] tailwind CSS 로컬 폰트 적용 (feat. Type '{ children: Element[]; className: string; }' is not assignable to type)

🚨 Trouble Shooting

✨오류 해결

🥲들여다 보기..

'Development > Next.js' 카테고리의 다른 글

관련글

댓글

티스토리툴바