Next.js - 공통 페이지 만들기(_app)

next pages는 폴더 구조를 이용하여 경로를 설정해 줍니다. 이 안에서 특별한 역할을 하는 파일들이 몇 가지 있는데 그 중 _app 파일에 대해서 알아봅시다.

1. _app파일

App 컴포넌트는 모든 페이지의 공통 페이지 역할을 합니다. App 컴포넌트를 이용하여 모든 페이지들을 초기화하여 다음과 같은 역할을 할 수 있습니다.

1. 페이지들의 공통된 레이아웃
2. 페이지를 탐색할 때 상태 유지
3. 추가 데이터를 페이지에 주입
4. 글로벌 CSS 추가

_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;

• App 컴포넌트가 받는 Component props는 pages/index.jsx 입니다.
• Component는 pageProps를 props로 받는데, 이는 pages 안의 파일에서 getServerSideProps, getStaticProps 혹은 getInitialProps로 페이지에 전달해주는 props 입니다.

2. 공통 헤더 만들기

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 검색을 할 수 있습니다.