nextjs 14 metadata favicon title

by

nextjs 14에서 동적으로 title이나 favicon을 관리하기 위해서 가장 최상위에 config 폴더를 만들고 site.ts 파일을 만들어서 정보를 등록합니다.

/config/site.ts

export const siteConfig = {
  name: "Taskify",
  description: "Collaborate, manage projects, and reach new productivity peaks"
}

동적으로 설정하는 아이콘이 파비콘으로 나오게 하려면 /app 폴더 안에 favicon.ico파일이 없어야 합니다. favicon.ico 파일을 삭제해주세요.

설정한 site.ts 내용을 layout.tsx 에서 설정하세요.

/app/layout.tsx

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import { siteConfig } from '@/config/site'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s | ${siteConfig.name}`
  },
  description: siteConfig.description,
  icons: {
    icon: [
      {
        media: '(prefers-color-scheme: light)',
        url: '/logo.svg',
        href: '/logo.svg'
      },
      {
        media: '(prefers-color-scheme: dark)',
        url: '/logo.svg',
        href: '/logo.svg'
      }
    ]
  }
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ko">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

다크모드인 경우와 아닌 경우 다른 아이콘이 보이도록 설정 할 수 있습니다.

Leave a Comment