Next.js - Built-in CSS Support

Adding Global StyleSheet

만약에 stylesheet를 내 애플리케이션에 추가하고 싶다면 'pages/_app.js'에 css파일을 추가해야 한다.

이는 Next.js가 JavaScript의 import를 확장했기 때문에 가능한 일이다.

// style.css

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// pages/_app.js

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

이 style.css는 모든 컴포넌트에 적용될 것이다. global의 근본적인 충돌 방지 문제 때문에 오직 'pages/_app.js'안에다가만 import해주어야 한다.

 

또한 개발환경에서 이처럼 style을 기술하는 것은 핫 리로딩을 지원하게 한다. 이는 내가 어플리케이션 스타일링을 하는데 도움을 준다.

 

프로덕션 환경에서는 모든 CSS파일이 하나로 번들링된다 .css의 확장명을 가진

 

Import styles from 'node_modules'

node_modules안에서 style을 가져오는 것 또한 가능하다.

 

만약 전역 stylesheet인 'bootstrap'이나 'nprogress'을 사용하려면 위와 같이 'pages/_app.js'안에 넣어주어야 한다.

// pages/_app.js

import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

또한 서드파티 css를 사용할 컴포넌트 안에 주입시켜 사용 하는 것 또한 가능하다.

// components/ExampleDialog.js

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

Adding Component-Level CSS

또한 Next.js는 CSS Module을 사용한 전통적 방식의 [name].module.css 파일을 사용하는 것을 허용한다.

 

CSS Module은 지역적인 자기만의 스코프를 가지며 자동적으로 스코프만의 클래스 이름을 짖는다. 이는 우리에게 다른 파일에서 같은 이름의 클래스명을 써도 충돌하는 것을 방지해 준다.

 

이러한 습관은 CSS Module이 컴포넌트 레벨에서 css를 import하는 최상의 방법이 된다. CSS Module은 애플리케이션 어디에서나 import가능되어 진다.

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS Module은 옵셔널한 특징을 가지며 .module.css으로 끝나는 확장자만 적용된다.

 

Sass Support

Next.js는 또한 .scss, .sass로 끝나는 확장자에 Sass를 적용가능하게 한다. 또한 .module.scss, .module.sass에서 CSS Module을 적용 가능하게 한다.

 

Customiiong Sass Options

next.config.js에 sassOption을 주어서 커스터마이징도 할 수 있다.

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass Variables

// scss-styles/variables.module.scss

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// scss-styles/global.scss

div {
  height: 100px;
}

// scss-styles/ExampleDialog.module.scss

.DialogContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

// pages/_app.js

import "../styles/globals.css";
import "../scss-styles/global.scss";
import variables from "../scss-styles/variables.module.scss";
import AppLayout from "../components/AppLayout";

function MyApp({ Component, pageProps }) {
  return (
    <AppLayout color={variables.primaryColor}>
      <Component {...pageProps} />
    </AppLayout>
  );
}

export default MyApp;

// components/AppLayout.js

import React from "react";

const AppLayout = ({ children, color }) => {
  return <div style={{ backgroundColor: color }}>{children}</div>;
};

export default AppLayout;

// next.config.js

/** @type {import('next').NextConfig} */
const path = require("path");

const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "scss-styles")],
  },
};

module.exports = nextConfig;