반응형
💡 Next.js에서 Head 설정하기
우선 아래와 같이 import 시켜준다.
import Head from "next/head";
전체적으로 이름을 정해주려면 우선 _app.js파일로 가서 아래와 같이 지정해준다.
메타태그 또한 같이 지정가능하다.
메타태그는 검색엔진을 검색할 때 중요한 태그가 되니 되도록이면 넣어주도록 하자.
<Head>
<title>Next Events</title>
<meta name='description' content='NextJS Events' />
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
</Head>
그러나 페이지마다 다른 Head title 설정이 가능하다.
import Head from "next/head";
import { getFeaturedEvents } from '../helpers/api-util';
import EventList from '../components/events/event-list';
function HomePage(props) {
return (
<div>
<Head>
<title>헹구네 홈페이지</title>
<meta name="description" content="Find a lot of great events that allow you to evolve..."/>
</Head>
<EventList items={props.events} />
</div>
);
}
function AllPostsPage(props) {
return(
<>
<Head>
<title>All Posts</title>
<meta
name="description"
content = "A list of all programming-related tutorials and posts"
/>
</Head>
<AllPosts posts={props.posts}/>
</>
)
또한 Dynamic Segment 즉 [id].js 파일의 형식에도 Head를 사용할 수 있다.
아래와 같이 props로 받아온 데이터로도 이름 설정이 가능하기 때문에 알아두면 유용하다.
function PostDetailPage(props) {
return (
<Fragment>
<Head>
<title>{props.post.title}</title>
<meta name='description' content={props.post.excerpt} />
</Head>
<PostContent post={props.post} />
</Fragment>
);
}
반응형
'React > Next.js' 카테고리의 다른 글
| [Next.js] Next.js + Redux + TypeScript 사용중 state값 proxy로 나올때 해결법 (0) | 2022.02.17 |
|---|---|
| Next.js + TypeScript 사용하기 ! (0) | 2022.02.10 |
| useSWR 사용하기. (0) | 2022.01.17 |
| [Next.js] Pre-Rendering (0) | 2022.01.12 |
| [Next.js] 파일 기반 라우팅 (0) | 2022.01.07 |
댓글