페이지 레이아웃 생성

0. 시작하기 전..

- 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기)

1. 페이지 레이아웃 생성

- 페이지 레이아웃을 생성해봅시다!

- #1. 생성하기 전에 먼저 다음과 같은 코드를 VScode의 터미널에 입력해, 시맨틱 UI react를 설치해줍니다.

→ 이를 이용해서 레이아웃을 작업할 예정입니다.

npm install semantic-ui-react semantic-ui-css

- #2. 그 후, 만들었던 next 폴더에 src 폴더를 생성한 뒤, 그 폴더 안에 component 폴더를 더 생성합니다.

- #3. component 폴더 안에 Top.js 파일과 Footer.js 파일을 생성합니다.

- #4. Top.js 파일에 다음과 같이 입력해줍니다.

import { Header } from "semantic-ui-react";

export default function Top() {
  return (
    <div>
      <img src="../images/logo.png" alt="logo"></img>
      <Header as="h1">NewBean</Header>
    </div>
  );
}

- #5. 그 다음, Footer.js에 들어가 다음과 같이 입력해줍니다.

export default function Footer() {
  return <div>Copyright @NewBean. All rights reserved.</div>;
}

- #6. 입력했으면, app.js 파일로 들어가 Top.js와 Footer.js를 넣어줍니다.

※ _app.js를 사용하는 이유

- 페이지 전환 시, 레이아웃을 유지할 수 있습니다.

- 페이지 전환 시, 상태값을 유지할 수 있습니다.

- componentDIdCatch를 이용해서 커스텀 에러 핸들링을 할 수 있습니다.

- 추가적인 데이터를 페이지로 주입시켜주는 것이 가능합니다

- 글로벌 CSS를 이 곳에 선언합니다.

import "../styles/globals.css";
import "semantic-ui-css/semantic.min.css";
import Top from "@/src/component/Top";
import Footer from "@/src/component/Footer";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Top />
      <Component {...pageProps} />
      <Footer />
    </div>
  );
}

export default MyApp;

- #7. 터미널에 npm run dev를 입력하여, 실행해봅시다!

→ 브라우저를 보면, 제대로 실행되었음을 확인할 수 있습니다.

- #8. 그러면 이제 component 폴더에 Gnb 파일을 생성하고 다음과 같이 입력해줍니다.

→ Menu는 시맨틱 ui react를 이용하였습니다. (바로가기)

import { Menu } from "semantic-ui-react";

export default function Gnb() {
  const activeItem = "home";
  return (
    <Menu inverted>
      <Menu.Item
        name="home"
        active={activeItem === "home"}
        // onClick={this.handleItemClick}
      />
      <Menu.Item
        name="messages"
        active={activeItem === "messages"}
        // onClick={this.handleItemClick}
      />
      <Menu.Item
        name="friends"
        active={activeItem === "friends"}
        // onClick={this.handleItemClick}
      />
    </Menu>
  );
}

- #9. 그 다음 Top.js에 Gnb를 추가해줍니다.

→ 그러면, 브라우저에 메뉴도 같이 나타나게 됩니다!

import { Header } from "semantic-ui-react";
import Gnb from "./Gnb";

export default function Top() {
  return (
    <div>
      <img src="../images/logo.png" alt="logo"></img>
      <Header as="h1">NewBean</Header>
      <Gnb />
    </div>
  );
}

- #10. 이번엔 page 폴더에 _document 파일을 생성하고 다음과 같이 입력해줍니다. (Next.js 사이트의 document)

※ html or head or body 부분을 만들 때에는 _document 파일이 필요합니다.

※ _document 파일은 서버에서만 렌더링되기 때문에, 레이아웃의 수정들은 _app.js에서 작업하어야 합니다.

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head lang="ko" />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

- #11. 이제 마지막으로 index.js에 다음과 같이 입력 후, 브라우저를 확인해봅시다.

import Head from "next/head";
import styles from "@/styles/Home.module.css";

export default function Home() {
  return (
    <div>
      <Head>
        <title>NewBean</title>
      </Head>
      안녕하세요! NewBean의 Next.js 공부입니다!
    </div>
  );
}

2. 정리하며

- 지금까지 Next.js로 페이지 레이아웃을 생성해 보았습니다.

※ 참고 깃 주소 : https://github.com/NewBean0312/nextjs-study/commit/4655bf901fead59c54d424fe2f7b90b1197bf625

next.js 레이아웃 작업 · NewBean0312/nextjs-study@4655bf9

NewBean0312 committed Dec 1, 2023

github.com

'Front-End Study > Next.js' 카테고리의 다른 글

에러 페이지와 환경 변수 (0)	2023.12.13
서버사이드 렌더링 (0)	2023.12.12
Dynamic Routes (0)	2023.12.11
Next.js 설치 (0)	2023.12.01
Next.js (0)	2023.12.01

페이지 레이아웃 생성

'Front-End Study > Next.js' 카테고리의 다른 글

티스토리툴바