페이지 레이아웃 생성
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 |
