Next.js를 이용해 포트폴리오 사이트 만들기 - Header 만들기(2)

여러 웹사이트들을 가보면 위에 메뉴들이 여기저기 페이지를 옮겨 다녀도 그대로 계속 있는 것을 보실 수 있습니다.

그 메뉴들을 Header 즉, 공유된 컴포넌트라고 합니다.

Next.js에서는 이 Header를 매우 쉽고 간단하게 만들 수 있습니다.

 

index.js를 아래 사진과 같이 바꿔주세요.

export default function Home() {
  return (
    <div>
      <h1>Home 페이지입니다.</h1>
    </div>
  );
}

그리고 pages폴더 안에 about.js 파일을 추가해주세요.

about.js도 다음과 같이 바꿔주세요.

export default function about() {
  return (
    <div>
      <h1>About 페이지입니다.</h1>
    </div>
  );
}

이제 새로운 폴더 하나를 만들 겁니다.

components라는 폴더를 하나 만들어주세요.

components폴더 안에 Header.js라는 파일을 생성해주세요.

그리고 다음과 같이 코드를 짜도록 하겠습니다.

import Link from "next/link";

export default function Header() {
  return (
    <div>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

이렇게 작성된 Header.js파일을 저희는 pages폴더 안에 있는 _app.js파일에서 import 시켜서 사용할 것입니다.

_app.js파일을 다음과 같이 작성해주세요.

import "../styles/globals.css";
import Header from "../components/Header";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Header></Header>
      <Component {...pageProps}></Component>
    </>
  );
}

export default MyApp;

여기서 이 _app.js는 5가지의 역할을 합니다.

• 페이지의 변경 간 레이아웃 유지
• 페이지를 탐색할 때 상태 유지
• ComponentDidCatch를 사용한 사용자 지정 오류 처리
• 페이지에 추가 데이터 삽입
• Global CSS 추가

_app.js의 첫 번째 역할, 페이지의 변경 간 레이아웃 유지의 역할 때문에 저희는 이 _app.js 파일에서 공통 컴포넌트를 작성할 수 있게 되었습니다.

 

이렇게 코드를 짜면 결과는 이렇습니다.

위쪽에 Home About이라고 생겼습니다.

이제 About이라고 새겨진 문구를 한 번 클릭해보겠습니다.

그러면 이렇게 About.js에 썼던 "About 페이지입니다."가 보여지는 것을 알 수 있습니다.

그리고 위에 Home About은 여전히 있구요.

이게 간단한 Header를 작성하는 방법입니다.

근데 이제 문제라고 하면 너무 안 예쁘다는점..

 

이 Header를 css를 이용해서 다음과 같이 작성하도록 하겠습니다.

Header.js

return (
    <nav className="container">
      <h2>이기현의 포트폴리오</h2>
      <ul className="nav_menu">
        <li>
          <h4
            className="hLink"
            style={{ fontWeight: "normal" }}
          >
            나의 작업물들
          </h4>
        </li>
        <li>
          <h4
            className="hLink"
            style={{ fontWeight: "normal" }}
          >
            나에 대해서
          </h4>
        </li>
        <li>
          <h4
            className="hLink"
            style={{ fontWeight: "normal" }}
          >
            나의 기술
          </h4>
        </li>
      </ul>
    </nav>
  );

global.css (styles 폴더 안에 있습니다.)

@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
  color: #000;
  box-sizing: border-box;
  font-family: "Jua", sans-serif;
}

.container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: white;
  padding: 8px 12px;
}

.container > h2 {
  margin-left: 20px;
}

.nav_menu {
  display: flex;
  padding-left: 0;
}

.nav_menu > li {
  font-size: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.nav_menu > li:hover {
  color: blue;
  border-radius: 10px;
}

.hLink {
  cursor: pointer;
}

.hLink:hover {
  color: blue;
}

Link를 사용하지 않는 이유는 클릭시 이벤트로 원하는 곳에 스크롤 될 수 있게 사이트를 짤 것이기 때문에 사용하지 않았습니다.

결과는

요렇게 나옵니다.

 

이제 다음에는 나의 작업물들을 알려주는 것을 만들도록 하겠습니다. 감사합니다.