레이아웃 및 헤드 구성 요소를 사용하여 React/NextJs의 여러 페이지에 페이지 제목을 추가하는 방법에 대한 궁극적인 가이드입니다.
이 기사에서는 Layout 및 Head 구성 요소를 사용하여 Reactjs/Nextjs 앱의 다른 페이지에 페이지 제목을 추가하는 방법을 보여줍니다.
각 페이지에 제목을 추가하는 방법을 보여드리는 동안 편안히 앉아 즐기십시오.
이런!, 당신은 이미 이것을 하는 방법을 알고 있지만 어떻게 하는지 다시 봅시다. 먼저 터미널을 열고 이 프로젝트를 만들려는 폴더로 이동합니다.
C:\Users\AdminUser>cd projects
C:\Users\AdminUser\Projects>npx create-next-app@latest title-test
"projects"폴더는 내 컴퓨터에 있는 폴더이므로 왜 사용하는지 걱정하지 마십시오. 앱을 만들고자 하는 폴더를 연 후 터미널에 명령의 두 번째 줄을 입력하여 nextjs 앱을 만듭니다.
이제 nextjs 앱을 만든 후. 루트 폴더에 구성 요소 폴더를 생성해 보겠습니다. 생성한 후 다음과 같이 됩니다.
이제 구성 요소 폴더에 Layout.js 구성 요소를 만들어 보겠습니다. 만든 후 첫 번째 구성 요소에 코드를 작성해 보겠습니다.
첫 번째 단계
Layout.js 구성 요소에 다음 코드를 작성합니다. 좋아, 움직여 보자!
export default function Layout () {
return (
<>
<header>
<nav>
Navigation goes here
</nav>
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</>
)
}
두번째 단계
Layout.js 구성 요소에 자식 및 제목 소품을 추가해 보겠습니다. children 소품은 레이아웃이 다른 구성 요소를 자식으로 가져갈 수 있도록 하고 title 소품은 앱의 모든 페이지 제목을 변경하는 역할을 합니다.
import Link from 'next/link'
export default function Layout ({ title, children }) {
return (
<>
<header>
<nav>
<Link href='test'> <a>Goto second Page</Link>
</nav>
</header>
<main>
{children}
</main>
<footer>
Footer
</footer>
</>
)
}
세 번째 단계
next/head에서 헤드 구성 요소를 가져오고 제목 소품에 페이지의 모든 제목을 변경할 수 있는 강력한 기능을 제공하는 코드를 작성해 보겠습니다. 코드는 다음과 같아야 합니다.
import Link from 'next/link'
import head from 'next/head'
export default function Layout ({ title, children }) {
return (
<>
<Head>
<title>{title ? title + ' - Hello world!' : 'Hello world!'}</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<header>
<nav>
<Link href='test'> <a>Goto second Page</Link>
</nav>
</header>
<main>
{children}
</main>
<footer>
Footer
</footer>
</>
)
}
"test.js"라는 이름으로 페이지 폴더에 새 페이지를 만들어 보겠습니다. 우리는 세상을 바꾸러 온 것이 아니기 때문에 이 페이지에 몇 가지 코드만 작성하겠습니다...ㅋㅋㅋ
첫 번째 단계
Layout 구성 요소에서 Layout.js를 테스트 페이지로 가져오고 Link from next/link를 가져와 사용자를 앱의 홈 페이지로 안내합니다.
import Layout from '.components/Layout';
import Link from 'next/link';
export default function Test () {
return (
<Layout>
<div>
<h1>Welcome</h1>
<p>This is a test page</p>
<Link href="/"> <a>Back home</a> </Link>
</div>
</Layout>
)
}
두번째 단계
레이아웃 구성 요소에서 내보낸 레이아웃 구성 요소를 일부 변경해 보겠습니다. 이동하는 페이지에 따라 제목 변경을 활성화하기 위해 레이아웃 구성 요소 태그에 초기에 전달한 제목 소품을 추가합니다.
import Layout from '.components/Layout';
import Link from 'next/link';
export default function Test () {
return (
<Layout title="Test Page">
<div>
<h1>Welcome</h1>
<p>This is a test page</p>
<Link href="/"> <a>Back home</a> </Link>
</div>
</Layout>
)
}
이제 index.js 파일로 이동하여 앱의 다른 페이지로 이동한 후 페이지 제목이 표시되는 방식을 변경해 보겠습니다. 자, 여기서 정리를 해보자!
import Layout from '.components/Layout';
import Link from 'next/link';
export default function Home () {
return (
<Layout title="Home Page">
<div>
<h1>Welcome to the home page</h1>
<p>I hope you like the guide? </p>
</div>
</Layout>
)
}
이봐, 이걸 읽는데 지치지 않았으면 좋겠어?. 자, 터미널에서 몇 가지 명령을 실행하여 최종적으로 무엇을 갖게 되었는지 살펴보겠습니다.
코드 편집기에서 터미널을 열고 "npm run dev"라고 쓰고 Enter 키를 누릅니다. 당신은 나중에 무엇을 해야할지 알고 어!.
이 기사를 읽어 주셔서 감사합니다. 다음 프로젝트에 도움이 되었으면 합니다.
프론트엔드 개발자,
압둘라 아마드.
Reference
이 문제에 관하여(레이아웃 및 헤드 구성 요소를 사용하여 React/NextJs의 여러 페이지에 페이지 제목을 추가하는 방법에 대한 궁극적인 가이드입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/abdull600/ultimate-guide-using-layout-and-head-components-to-add-page-title-for-different-pages-in-reactnextjs-28do텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
