-
보통 component파일에 layout.js를 만들어서 다음과 같은 패턴을 사용한다.
//(_app.js) import Layout from "../components/Layout"; export default function App({Component, pageProps}) { return ( <Layout> <Component {...pageProps} /> </Layout> ); }//(Layout.js) import NavBar from "./NavBar"; export default function Layout({children}) { return ( <> <NavBar></NavBar> <div>{children}</div> </> ); }layout.js의 children prop가 _app.js의 <Component {...pageProps} />가 되는 것이다.
즉, <Layout></Layout>안에 들어가는게 모두 {children}에 나오게 되는 것이다.
그리고 Head라는걸 import해서 사용할 수 있는데
Head는 이렇게 앱의 표지?제목?을 꾸며준다.
index.js, about.js마다
import Head from "next/head"; export default function About() { return ( <div> <Head> <title>Home | Next Movies</title> </Head> <h3>dddd안</h3> </div> ) }이렇게 import해오고 Head태그안에 title태그로 사용할 수 있겠지만,
component폴더에 Seo.js을 만들어서
//(components/Seo.js) import Head from "next/head"; export default function Seo({title}) { return ( <Head> <title>{title} | Next Movies</title> </Head> ); }title을 props로 받아올 수 있게 해주고,
//(index.js) import Head from "next/head"; import Seo from "../components/Seo"; export default function Home() { return ( <div> <Seo title="Home" /> <h3>안녕</h3> </div> ) }//(about.js) import Head from "next/head"; import Seo from "../components/Seo"; export default function About() { return ( <div> <Seo title="About" /> <h3>dddd안</h3> </div> ) }이렇게 페이지마다 다르게 설정해줄 수 있다.
'Next.js' 카테고리의 다른 글
custom app (0) 2022.07.22 Styles JSX (0) 2022.07.22 CSS Modules (0) 2022.07.22 Routing (0) 2022.07.22 pre rendering (0) 2022.07.22