레이아웃 컴포넌트(Layout Component)
먼저, 모든 페이지에서 공유될 Layout 컴포넌트를 만들어 봅시다.
components라는 상위 디렉토리를 생성하세요.components디렉토리 내부에layout.js라는 파일을 생성하고 다음 내용을 추가하세요.
export default function Layout({ children }) {
return <div>{children}</div>;
}그런 다음, pages/posts/first-post.js 파일을 열고 Layout 컴포넌트를 가져오는 import 구문을 추가하고 가장 바깥에 위치하도록 만들어주세요.
import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';
export default function FirstPost() {
return (
<Layout>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</Layout>
);
}CSS 추가하기(Adding CSS)
이제 Layout 컴포넌트에 스타일을 추가해 보겠습니다. 이를 위해 React 컴포넌트에서 CSS 파일을 가져올 수 있는 CSS Modules를 사용할 것입니다.
components/layout.module.css라는 파일을 생성하고 다음 내용을 추가하세요.
중요한 점: CSS Modules를 사용하려면 CSS 파일 이름이
.module.css로 끝나야 합니다.
components/layout.js 파일 내부에서 이 container 클래스를 사용하려면 다음 단계를 따르셔야 합니다:
- CSS 파일을 가져와서 styles와 같은 이름으로 할당합니다.
- styles.container를 className으로 사용합니다.
components/layout.js 파일을 열고 다음 내용으로 바꿔주세요.
import styles from './layout.module.css';
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}지금 http://localhost:3000/posts/first-post 로 이동하시면 텍스트가 가운데 정렬된 컨테이너 내에 있음을 확인하실 수 있어야 합니다.
자동으로 고유한 클래스 이름을 생성합니다(Automatically Generates Unique Class Names)
이제 브라우저의 개발자 도구에서 HTML을 확인해 보시면, Layout 컴포넌트에서 렌더링된 div 요소의 클래스 이름이 layout_container__...와 같이 보일 것입니다.
이것이 CSS Modules의 역할입니다: 자동으로 고유한 클래스 이름을 생성합니다. CSS Modules를 사용하는 한 클래스 이름 충돌에 대해 걱정할 필요가 없습니다.
게다가 Next.js의 코드 분할 기능은 CSS Modules에도 작동합니다. 이를 통해 각 페이지에 최소한의 CSS만 로드되도록 보장됩니다. 이로 인해 번들 크기가 작아집니다.
CSS Modules는 빌드 시점에서 JavaScript 번들에서 추출되고 자동으로 로드되는 .css 파일을 생성합니다.
출처: https://nextjs.org/learn/basics/assets-metadata-css/layout-component
