티스토리 뷰
중복되는 소스를 피하기 위해 NavBars 안의 내용을 더 나누려고 합니다. components 안의 Layout.js 파일을 생성합니다.
import NavBar from "./NavBars"
export default function Layout({children}) {
return (
<>
<NavBar></NavBar>
<div>{children}</div>
</>
)
}그리고 이 부분을 각각 about.js 와 index.js 파일안에 넣게 됩니다.
여기서 우리의 홈페이지 타이틀을 수정하기 위해 하나 더 추가할 것이 있는데요, 바로 Head 태그입니다.
Head
next js 에서 기본적으로 제공하는 컴포넌트로 여기에는 우리가 html 코드에서 사용할 법한 title 태그와 meta 태그, node js 에서 helmet 이라고 불리우는 보안성 향상 모듈 등을 포괄하고 있습니다. 사용 방법은 import Head from "next/head" 로 사용 가능합니다.
그렇게 하여 수정된 Layout 코드는 아래와 같습니다.
import NavBar from "./NavBars"
import Head from "next/head"
export default function Layout({children}) {
return (
<>
<Head>
<title>Hello</title>
</Head>
<NavBar></NavBar>
<div>{children}</div>
</>
)
}하지만 이렇게 작성하게 되면 페이지를 이동할 때 (index.js -> about.js ) Layout 의 파라미터를 하나 더 받고 그 내용을 title에 뿌려주기 어렵기 때문에 이를 쉽게 하기 위해 Seo.js 파일을 하나 더 생성합니다.
import Head from "next/head"
export default function Seo({title}) {
return <Head>
<title>{title} | Next Test App</title>
</Head>
}그리고 about.js 를 아래와 같이 바꾸어줍니다.
import Seo from "../components/Seo"
export default function AboutPage() {
return (
<div>
<Seo title="About" />
<h1>About</h1>
</div>
)
}소스 : https://github.com/jyp90/nextjs-intro/commit/ec751b0a3f4b022421e4fc922e08563dc5095e9c
Using next/head · jyp90/nextjs-intro@ec751b0
Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Browse files Using next/head Loading branch information Showing 5 changed files with 32 additions and 13 deletions. +15 −0 compone
github.com
'Client' 카테고리의 다른 글
| DataTable.js 의 애프터 렌더링 이벤트 적용하기 (0) | 2022.09.06 |
|---|---|
| [Next.js] Rewrite 사용하기 (0) | 2022.01.12 |
| [Next.js] Redirect 사용하기 (0) | 2022.01.10 |
| [Next.js] Global App.tsx 만들기 (0) | 2022.01.08 |
| [Next.js] JSX 사용하기 (1) | 2022.01.07 |
| [Next.js] CSS Module 사용하기 (1) | 2022.01.04 |