-
[next.js] CSS - 레이아웃, 모듈, 전역 CSSReact/next.js 2023. 3. 22. 17:01
next.js Css
Next.js에서 지원 하는 스타일 지정 방법
- CSS 모듈
- styled-jsx
- 사스
styled-components는 지원하지 않는다.
레이아웃 구성 요소
먼저 모든 페이지에서 공유할 레이아웃 구성 요소를 만들어 보겠습니다 .
- component 폴더와 Layout.js 파일을 생성합니다.
export default function Layout({ children }) { return <div>{children}</div>; }그런 다음 를 열고 구성 요소 pages/posts/first-post.js에 대한 가져오기를 추가 Layout하고 가장 바깥쪽 구성 요소로 만듭니다.
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 추가
이제 구성 요소에 몇 가지 스타일을 추가해 보겠습니다 Layout.
이를 위해 CSS 모듈을 사용하여 React 구성 요소에서 CSS 파일을 가져올 수 있습니다.
components/layout.module.css 파일을 생성한다.
.container { max-width: 36rem; padding: 0 1rem; margin: 3rem auto 6rem; background-color: azure; }중요: CSS 모듈을 사용하려면 CSS 파일 이름이 .module.css 이여야 한다.
내용을 열고 components/layout.js다음으로 바꿉니다.
import styles from './layout.module.css'; export default function Layout({ children }) { return <div className={styles.container}>{children}</div>; }그럼 아래처럼 CSS가 적용된 것을 볼 수 있다.
글로벌 스타일 (전역 CSS)
CSS 모듈은 구성 요소 수준 스타일에 유용합니다. 그러나 모든 페이지 에서 일부 CSS를 로드하려는 경우 Next.js도 이를 지원합니다.
전역 CSS를 애플리케이션에 로드하는 방법
1. 최상위 styles디렉터리와 global.css파일을 만듭니다.
- 아래 문장을 추가한다.
a:hover { text-decoration: underline; }2. pages/_app.js다음 콘텐츠로 호출되는 파일을 만듭니다.
// `pages/_app.js` import '../styles/global.css'; export default function App({ Component, pageProps }) { return <Component {...pageProps} />; }의 기본 내보내기는 _app.js애플리케이션의 모든 페이지를 래핑하는 최상위 수준의 React 구성 요소입니다. 이 구성 요소를 사용하여 페이지 간을 탐색할 때 상태를 유지하거나 여기에서 수행하는 것처럼 전역 스타일을 추가할 수 있습니다. 파일 에 대해 자세히 알아보세요_app.js .
그러면 이렇게 적용된다.
'React > next.js' 카테고리의 다른 글
[next.js] 개발진스 프로젝트 생성하기 (0) 2023.03.22 [next.js] 메타데이터 - title, script (0) 2023.03.22 [next.js] next.js 사진 (0) 2023.03.22 [next.js] 메뉴얼 - 설치, 세팅, 라우팅 (0) 2023.03.22 [next.js] 적용 방식 - 컴파일, 축소, 번들링, 빌드, 코드분할, 런타임, 렌더링 (0) 2023.03.22