⚫ Layout pattern
[Layout.js]
import NavBar from "./NavBar";
export default function Layout({ children }) {
return (
<>
<NavBar />
<div>{children}</div>
</>
);
}children은 Layout component를 사용한 곳에서 자식 컴포넌트로 들어오는 컴포넌트가 들어오게 된다.
[_app.js]
import Layout from "../components/Layout";
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}페이지가 렌더링 될 때 가장 먼저 실행되는 _app.js에서 Layout component를 사용하면 된다.
⚫ Head component
[Seo.js]
import Head from "next/head";
export default function Seo({ title }) {
return (
<Head>
<title>{title} | Next Movies</title>
</Head>
);
}head에 정보를 넣고 싶으면 react-helmet 같은 걸 사용할 필요없이 next.js에서 제공해주는 Head component를 이용하면 된다.
'♠️ Next.js 12' 카테고리의 다른 글
| Next.js 12 - getServerSideProps (0) | 2025.03.10 |
|---|---|
| Next.js 12 - public dir, API key 숨기기(redirects, rewrites) (0) | 2025.03.10 |
| Next.js 12 - Global Style (0) | 2025.03.07 |
| Next.js 12 - Styled JSX, unknown property jsx found (0) | 2025.03.04 |
| Next.js 12 - CSS Modules (0) | 2025.03.01 |