fonts 관리

Next.js

by 폴리프레임 2024. 5. 13. 04:55

Next.js Tutorial에서 사용한 방법이 매우 이상적이여서, fonts 관리는 고민 없이 아래처럼 분리해 두는 것이 좋습니다..

//app>ui>fonts.ts
import { Inter, Lusitana } from 'next/font/google'

export const inter = Inter({ subsets: ['latin'] })
export const lusitana = Lusitana({ 
    weight: ['400','700'],
    subsets: ['latin'], 
})

//+++++++
// app>layout.tsx
import '@/app/ui/global.css' // 별도 ui 폴더 관리도 괜찮을 듯
import {inter} from '@/app/ui/fonts'

<html lang="en">
  <body className={`${inter.className} antialiased`}>{children}</body>
</html>

//+++++++
// app>page.tsx
import { lusitana } from '@/app/ui/fonts';

<p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
  Next.js Learn Course
</p>

저작자표시 비영리 변경금지 (새창열림)

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

defaultValue 와 vlaue - input (0)	2024.05.13
useSearchParams, usePathname, useRouter - next.js (0)	2024.05.13
export default (0)	2024.04.28
Next.js 14 App Router - 2024.03.28 (1)	2024.03.28
next.js <Image /> 관련하여 layout shift 란 (0)	2023.10.31