티스토리 뷰
이전 공부까지 1차 Next js 의 기본적인 구조를 알아보았습니다.
지금부터는 노마드코더분의 강의를 보며 영화 앱을 만들면서 Next js 공부를 진행해보려합니다.
Layout Pattern
많은 사람들이 Next js 를 사용할 때 쓰는 패턴이 있다고합니다.
custom app component에서 layout 패턴이라는것을 사용한다고합니다.
파일 생성하기
우선 components 폴더에 Layout.js 라는 파일을 생성하고 내부는 다음과 같이 코드를 작성합니다.
Layout 컴포넌트의 children props를 받아서 자식 컴포넌트를 Layout 내부에 렌더링을 해주고
마찬가지로 NavBar을 같이 넣어줍니다.
// Layout.js
import NavBar from "./NavBar";
export default function Layout({ children }) {
return (
<>
<NavBar />
<div>{children}</div>
</>
);
}다음으로 _app.js 파일은 Layout 컴포넌트로 감쌉니다.
이로써 Component들은 Layout 자식요소로 렌더링이 됩니다.
//_app.js
import Layout from "../components/Layout";
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
Next js Head 사용하기
Next js 는 head를 동적으로 넣기위해 Head 컴포넌트를 제공해주고있습니다.
head를 잘 설정하는것은 검색엔진 최적화 Seo설정을 위해 아주 중요한 사항입니다.
Next js 에서 head를 사용하려면 다음과 같이 next의 head로부터 import 해오면 됩니다.
import Head from "next/head";
그리고 세부적인 Seo 세팅은 건너뛰고 title 변경만 관여할 수 있도록 코드를 작성해봅니다.
components 폴더에 Seo.js 파일을 생성해줍니다.
그리고 컴포넌트 구조는 다음과 같이 props 로 title네임을 받아올 수 있도록 작성해주고,
// Seo.js
import Head from "next/head";
export default function Seo({ title }) {
return (
<Head>
<title>{title} | Next Movies</title>
</Head>
);
}
pages 폴더의 index.js, about.js에 다음과 같이 각각 Seo를 import 해와서 title을 적절히 넣어줍니다.
// index.js
import Seo from "../components/Seo";
export default function Home() {
return (
<div>
<Seo title="Home" />
<h1>hello</h1>
</div>
);
}
// about.js
import Seo from "../components/Seo";
export default function About() {
return (
<div>
<Seo title="About" />
<h1>About</h1>
</div>
);
}
위와 같이 코드를 작성했다면,
아래와 같이 페이지 마다의 head title이 다르게 적용이 되는것을 확인할 수 있습니다.
'Next.js > 기초 공부 시작( 겉핥기 )' 카테고리의 다른 글
| Next js ( Redirect / Rewrite ) , Rewrite 로 API key를 숨기자 (0) | 2022.04.10 |
|---|---|
| Next js Fetching Data / public 경로 (1) | 2022.04.10 |
| Next js Custom App , global style, _app.js (0) | 2022.04.09 |
| Next js Styles JSX로 스타일링 하기 (0) | 2022.04.09 |
| Next js CSS Module (0) | 2022.02.13 |