$ npm run dev 로 실행
about.js와 view 안의 [id].js 내부의 import와 내용을 똑같이 해주게 되면 아래와 같이 이상한 경로에도 작성한 화면이 에러없이 뜨게됨
semantic UI 사용하기 위한 설치
$ npm install semantic-ui-react semantic-ui-css_app.js 만들어주고 아래와 같은 내용 입력
// import "./styles/globals.css";
import "semantic-ui-css/semantic.min.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp;🐶 _app.js 사용 특징
- 페이지 전환 시 레이아웃 유지 가능
- 페이지 전환 시 상태값 유지 가능
- componentDidCatch 이용해 커스텀 에러 핸들링 가능
- 추가적인 데이터 페이지로 주입시키는 것 가능
- 글로벌 CSS 이곳에 선언
_document.js 만들어주고 아래와 같이 입력 ( 하단 next.js 공식문서 참고 )
//Document가 불러와지지 않아 발생한 에러때문에 import 옆에 Document 추가함
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
// export default function Document() {
render(){
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;🐱 app과 document의 역할은 다름
- app은 글로벌 css 적용 및 레이아웃 적용
- document는 서버에서만 렌더링되고 onClick과 같은 이벤트 핸들러나 css 적용 안됨
- app과 document의 헤드도 서로 다른 역할을 해줌
최종 library와 코드 내용
_app.js
// import "./styles/globals.css";
import "semantic-ui-css/semantic.min.css";
import Footer from "../src/component/Footer";
import Top from "../src/component/Top";
function MyApp({ Component, pageProps }) {
return (
<div style= {{ width: 1000, margin: "0 auto" }}>
<Top />
<Component {...pageProps} />;
<Footer />
</div>
);
}
export default MyApp;_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
// export default function Document() {
render(){
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;index.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div>
<Head>
<title>Home | uminida</title>
</Head>
</div>
)
}public/images안에는 poui.JPG라는 아래와 같은 이미지
src/component/Footer.js
export default function Footer() {
return <div>Copyright © uminida. All rights reserved.</div>;
}src/component/Gnb.js
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>
)
}src/component/Top.js
import { Header } from "semantic-ui-react";
import Gnb from "./Gnb";
export default function Top() {
return (
<div>
<div style={{ display: "flex", paddingTop: 20 }}>
<div style={{ flex: "100px 0 0" }}>
<img
src="/images/poui.JPG"
alt="logo"
style={{display: "block", width: 80 }}
/>
</div>
<Header as="h1">uminida</Header>
</div>
{/* Gnb 불러옴 */}
<Gnb />
</div>
);
}
next.js 페이지들은 공식문서를 통해서 필요한 menu나 이런 양식들을 받아와서 코드를 짤 수가 있음
https://nextjs.org/docs
Docs | Next.js
Using App Router Features available in /app
nextjs.org
🐸겪었던 우여곡절
- style에 분명히 width랑 margin을 줬는데 안먹어서 보니까 창크기 조절 안해줘서 그런거였음;
- Gnb 메뉴바가 안떠서 미치는 줄 알았는데 return을 빼먹어서 그런거였음;
- _document에서 자꾸 에러나길래 뭐가 문젠가 싶었는데 Document가 불러와지지 않아서 import에 Document를 따로 추가해주면 됬음;
이상.
'개발 > next.js' 카테고리의 다른 글
| [next.js] 블로그 앱 만들기 5강 (0) | 2023.07.12 |
|---|---|
| [next.js] 블로그 앱 만들기 4강 (0) | 2023.07.11 |
| [next.js] 블로그 앱 만들기 3강 (0) | 2023.07.05 |
| [next.js] 블로그 앱 만들기 2강 (0) | 2023.06.29 |
| [next.js] 라우팅 (0) | 2023.06.27 |