반응형
1. 라이브러리 설치
yarn add antd @ant-design/icons // ant design
yarn add dayjs // 날짜 변환 라이브러리2. pages/_app.js 파일에 반영 -> 전체 적용
import 'antd/dist/antd.css' //<- 추가
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
3. Roboto 적용을 위한 /pages/_document.js 파일 생성
참고문서 경로: https://nextjs.org/docs/advanced-features/custom-document
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
{/* 구글 웹폰트 Roboto 링크 추가 */}
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
4. styles/globals.css 파일에서 적용 폰트 삭제 및 수정
html,
body {
padding: 0;
margin: 0;
/* 아래부분 수정 */
font-family: Roboto, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
5. styles/Home.module.css 파일에서 .container 클래스 수정
.container {
width: 1024px;
margin-left: auto;
margin-right: auto;
}6. pages/index.js
첫번째로 Header 컴포넌트를 가져오고, 추후 만들어지는 컴포넌트를 계속 추가해주면 됩니다.
import styles from '../styles/Home.module.css';
import SanityService from '../services/SanityService';
import { Col, Row } from 'antd';
import Link from 'next/link'
import { CodeOutlined } from '@ant-design/icons'
import Header from '../components/Header';
export default function Home({home, posts}) {
const mainPost = posts.find(p => p.slug === home.mainPostUrl);
const otherPosts = posts.filter(p => p.slug !== home.mainPostUrl);
console.log(mainPost);
console.log(otherPosts);
return (
<div className={styles.container}>
<Header />
</div>
)
}
export async function getStaticProps() {
const sanityService = new SanityService();
const home = await sanityService.getHome();
const posts = await sanityService.getPosts();
return {
props: {
home,
posts,
}
}
}7. 컴포넌트 작성 (/components/Header.jsx)
/* eslint-disable react/no-unescaped-entities */
import { Row, Col } from 'antd';
import { CodeOutlined } from '@ant-design/icons'
import Link from 'next/link'
const Header = () => {
return (
<Row
align="middle"
style={{
height: 64,
}}
>
<Col span={24}>
<Link href="/">
<a>
<div
style={{
fontSize: 20,
fontWeight: 'bold',
}}>
<CodeOutlined />Willy's Blog
</div>
</a>
</Link>
</Col>
</Row>
);
};
export default Header;8. 결과
반응형
'Programming > React' 카테고리의 다른 글
| Next.js 시작하기4 - 설정파일 (0) | 2021.06.20 |
|---|---|
| Next.js 시작하기3 - 스타일링 (0) | 2021.06.20 |
| Next.js 시작하기 (Sanity Blog 작성 완료된 경우) (0) | 2021.06.20 |
| Recoil 따라하기 - TodoList (0) | 2021.05.28 |
| Nodejs V14 ESM 문법 적용하기 - 리액트를 다루는 기술 backend 주의점 (0) | 2021.04.10 |
