Nextjs 14. how to add unsupported metadata

개발 기록

Nextjs 14. how to add unsupported metadata

neunggu 2024. 1. 12. 00:27

728x90

nextjs 14.0.4로 개발 하던중 <meta http-equiv=...>을 추가해야할 일이 생겼다.

nextjs 14에서 메타 태그를 추가하는 방법은 layout.js나 page.js에 아래와 같은 방법으로 매타 데이터를 추가해주면 된다.

// layout.js | page.js

import { Metadata } from 'next'
 
export const metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

하지만! 현재 지원하지 않는 태그들도 있다.

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#unsupported-metadata

Functions: generateMetadata | Next.js

Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.

nextjs.org

이것들은 어떻게 추가할 수 있을까?

해결 방법

The following metadata types do not currently have built-in support. However, they can still be rendered in the layout or page itself.

nextjs에서 지원은 하지 않지만 layout이나 page에서 렌더링은 된다고 한다.

그렇다면 직접 추가해준다!!

`<head><meta /></head>`

// layout.js

import { Inter } from 'next/font/google'
import './globals.css'

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

export const metadata = {
  title: '...',
  description: '...',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests" />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

728x90