[Next.js] 빌드 중 경고 메시지 : Warning: A font-display parameter is missing (adding `&display=optional` is recommended)

2023년 11월 03일 10시 47분 10초에 업로드 된 글입니다.

작성자: DandyNow

728x90

1. 빌드 중 `&display=optional`를 추가하라는 경고를 받았는데...

"npm run build" 명령을 내렸다. 빌드 중 몇 가지 경고 메시지를 받았는데 그중 아래의 경고를 조치하고자 하였다.

./src/app/layout.tsx
22:9 Warning: A font-display parameter is missing (adding `&display=optional` is recommended). See: https://nextjs.org/docs/messages/google-font-display @next/next/google-font-display

2. 결론은 "Let it be!"

2.1. 구글 머트리얼 아이콘

프로젝트의 아이콘으로 구글 머트리얼 아이콘을 적용하였다. 구글 머트리얼 아이콘은 layout.tsx 컨포넌트의 RootLayout()에 구글에서 제공하는 Link 요소만 추가하면-간편하게-적용된다.

// layout.tsx
// (생략)
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
      	{/* 구글 머트리얼 아이콘 추가 */}
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
        />
      </head>
      <body className={inter.className}>
        <div className="app-container">
          <main className="app-contents">{children}</main>
          // (생략)
        </div>
      </body>
    </html>
  );
}

경고 메시지에 대한 조치를 하기위해 아래와 같이 &display=optional 매개 변수를 추가하였다.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
&display=optional
" />

위와 같은 조치로 빌드 중 관련 경고 메시지는 사라졌다. 하지만 애플리케이션을 실행하였더니 아이콘이 렌더링 되지 않는 문제가 발생했다. 페이지 새로고침을 시도하면 그려지긴 했지만 실행 직후 렌더링은 되지 않았다. 그래서 결론은 "Let it be!"

728x90

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

'언어·프레임워크 > Next.js' 카테고리의 다른 글

[Next.js] 제로초 Next.js 동영상 강의 #1 정리 : App Router 이용 X.com 클론코딩 (0)	2023.11.05
[Next.js] 외부 라이브러리 없이 파일 업로드 구현(No Multer) (0)	2023.11.04
[Next.js] "Can't resolve 'encoding'..." 경고 : encoding 의존성 설치로 간단 해결! (0)	2023.10.31
[Next.js] Vercel에서 Next.js 프로젝트 배포 도중에 만난 에러 : No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies" (0)	2023.10.30
[Next.js] AR 물고기 두마리가 겹쳐 보이는 현상?! useEffect 2번 호출 문제! (1)	2023.10.25

다음글이 없습니다.

이전글이 없습니다.

1. 빌드 중 `&display=optional`를 추가하라는 경고를 받았는데...

2. 결론은 "Let it be!"

'언어·프레임워크 > Next.js' 카테고리의 다른 글

티스토리툴바