next pages는 폴더 구조를 이용하여 경로를 설정해 줍니다. 이 안에서 특별한 역할을 하는 파일들이 몇 가지 있는데 그 중
_app
파일에 대해서 알아봅시다.
App 컴포넌트는 모든 페이지의 공통 페이지 역할을 합니다. App 컴포넌트를 이용하여 모든 페이지들을 초기화하여 다음과 같은 역할을 할 수 있습니다.
_app
파일을 통해 앞서 만든 gitbub repositories에 공통 App 컴포넌트로 헤더를 추가하고, 리액트 기본 앱의 body에 들어 있는 margin 값을 글로벌 css로 없애보도록 하겠습니다.
> pages/_app.jsx
const MyApp = ({ Component, pageProps }) => {
return (
<>
<Component {...pageProps} />
<style jsx global>
{`
body {
margin: 0;
}
`}
</style>
</>
);
};
export default MyApp;
Component
props는 pages/index.jsx
입니다.Component
는 pageProps
를 props로 받는데, 이는 pages 안의 파일에서 getServerSideProps
, getStaticProps
혹은 getInitialProps
로 페이지에 전달해주는 props 입니다.App 컴포넌트는 모든 페이지의 기본 틀 역할을 하고 있습니다. 이곳에 헤더 컴포넌트를 만들어 추가하여 모든 페이지에서 헤더가 출력되도록 하겠습니다.
> components/Header.jsx
import React, { useState } from "react";
import css from "styled-jsx/css";
import { IoLogoGithub } from "react-icons/io";
const HeaderCss = css`
.header-wrapper {
padding: 14px 14px;
background-color: #24292e;
line-height: 0;
display: flex;
align-items: center;
}
.header-search-form input {
margin: 0px 16px;
background-color: hsla(0, 0%, 100%, 0.125);
width: 300px;
height: 28px;
border: none;
border-radius: 5px;
outline: none;
color: white;
padding: 0px 12px;
font-size: 14px;
font-weight: bold;
}
.header-navigations a {
color: white;
margin-right: 16px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
`;
const Header = () => {
const [username, setUsername] = useState("");
return (
<div>
<div className="header-wrapper">
<IoLogoGithub color="white" size={36} />
<form className="header-search-form">
<input
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</form>
<nav className="header-navigations">
<a href="https://github.com/pulls">Pull requests</a>
<a href="https://github.com/issues">Issues</a>
<a href="https://github.com/marketplace">Margetplace</a>
<a href="https://github.com/explore">Explore</a>
</nav>
</div>
<style jsx>{HeaderCss}</style>
</div>
);
};
export default Header;
Header
컴포넌트를 _app.jsx
에서 import 하고 적용시키면 브라우저 상단에 header 컴포넌트가 출력되는 것을 확인할 수 있습니다.
header에서 세팅한 input에서도 유저 이름을 검색할 수 있도록 코드를 수정해 줍니다.
> components/Header.jsx
import {useRouter} from 'next/router';
...
const router = useRouter();
const onSubmit = (e) => {
e.preventDefault();
router.push(`users/${username}`);
setUsername("");
};
...
<form className="header-search-form" onSubmit={onSubmit} />
...
설정 후 header의 input에서도 유저 이름을 통해 repositories 검색을 할 수 있습니다.