twitter card, 또는 sns에 웹페이지를 공유 할때 미리보기 기능이 제공된다.
이것을지원 하기 위해서는 CSR에서는 방법을 찾지 못하였다. 플랫폼에서 자바스크립트 로딩을 지원하지 않기 때문이다.
nextjs 13에서는 head를 사용 하는 방법이 변경 되었다. head에서 데이터를 로드해 필요한 내용을 출력할수 있다.
In the pages directory, the next/head React component is used to manage <head> HTML elements such as title and meta . In the app directory, next/head is replaced with a new head.js special file.
Before:
pages/index.tsx
import Head from 'next/head'
export default function Page() {
return (
<>
<Head>
<title>My page title</title>
</Head>
</>
)
}
After:
app/head.tsx
export default function Head() {
return (
<>
<title>My Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</>
)
}'Program > React' 카테고리의 다른 글
| [next.js] version 13, head.js (1) | 2023.01.02 |
|---|---|
| [next.js]An error occurred in the Server Components render. (0) | 2023.01.02 |
| react-intersection-observer for loading more data(스크롤 데이터 로딩) (0) | 2022.12.22 |
| yarn create next-app --typescript , antd (0) | 2022.07.07 |
| Typescript + Router (0) | 2022.07.05 |
댓글