/components
에 Layout.js
파일을 생성한다Layout
컴포넌트에 { children }
을 매개변수로 지정한다.Layout
컴포넌트의 코드 예시는 아래와 같다// /components/Layout.js
import NavBar from "./NavBar";
export default function Layout({ children }) {
return (
<>
<NavBar />
<div>{children}</div>
</>
);
}
_app.js
에서 Layout
컴포넌트를 아래와 같이 사용한다.// /pages/_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
컴포넌트로 분리한다._app.js
에는 레이아웃을 제외해도 추가될 것들이 많다.index.js
에 작성한다.Head
컴포넌트를 사용한다.import Head from "next/head";
index.js
파일 컴포넌트 Fragment(<></>) 안에 <Head>
컴포넌트를 위치시킵니다.<Head>
컴포넌트 안에 들어가는 모든 것들이 우리의 html 의 head 안에 보여진다.// /pages/index.js
import Head from "next/head";
export default function Home() {
return (
<>
<Head>
<title>Home | Next Movie</title>
</Head>
<h1>Hello World!</h1>
</>
);
}
index.js
파일에 <Head>
태그를 작성하면 우리는 모든 페이지에 <Head>
태그와 내용을 수동으로 작성해줘야 한다./components
폴더에 <Head>
태그와 head 내용을 관리하는 컴포넌트를 만들어 관리한다./components/Seo.js
생성하고 Seo
컴포넌트의 prop 으로 title
을 받는다title
prop 외에 더 많은 prop 을 넣어서 SEO(head) 컴포넌트를 개인화 할수 있다.// /components/Seo.js
import Head from "next/head";
export default function Seo({ title }) {
return (
<>
<Head>
<title>{title} | Next Movies</title>
</Head>
</>
);
}
// /pages/index.js
import Seo from "../components/Seo";
export default function Home() {
return (
<>
<Seo title="Home" />
<h1>Hello World!</h1>
</>
);
}
노마드코더 NextJS 시작하기