Image
next.js의 Image 컴포넌트는 다음과 같은 특징을 갖는다.
- Resizing (responsive 사이즈)
- Lazy Load (뷰포트에 들어오면 로드)
- 그 외의 최적화 (크롬인 경우 파일 형식을 webp로 변환)
Head
next.js의 Head 컴포넌트는 다음과 같은 정보들을 담을 수 있다.
- title, image, description, og 태그 등
- icon, 파비콘 등등
- third-party script(ex. 구글 애널리틱스)
Layout
공통 컴포넌트를 만들고, CSS 모듈을 만들 수 있다.
그리고 모듈에 작성한 것 중, 선언되어진 것만 가져와서 적용된다.
// layout.module.css
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}// Layout.js
import styles from './layout.module.css'
export default function Layout({children}) {
return <div className={styles.container}>{children}</div>
}
// first-post.js
import Head from "next/head";
import Layout from "../../components/Layout";
export default function FirstPost() {
return (
<Layout> // css가 적용된 상태
<>
<Head>
<title>첫번째 글</title>
</Head>
<h1>첫번째 글</h1>
</>
</Layout>
);
}
그렇다면 반대로 전역 스타일링은 어떻게 해야 할까?
먼저 styles 폴더를 생성하고 global.css 파일을 생성하고, 그 파일에 원하는 css 스타일을 작성한다.
html,
body {
padding: 0;
margin: 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
...그리고 pages 폴더 안에 모든 페이지를 감싸는 컴포넌트인 _app.js를 선언하여 모든 페이지를 매핑하도록 한다.
// _app.js
import '../styles/globals.css'
export default function App({Component, pageProps}) {
return <Component {...pageProps}/>
}그러면 아래와 같이 적용된 것을 볼 수 있다.
개발자를 향해 달리는 사람