Next.js의 스타일링 방법 비교

게시 됨: 2022-03-10
빠른 요약 ↬ 무엇보다도 Next.js는 스스로 를 정적 웹사이트를 위한 React Framework 라고 불렀습니다. 그러나 일반적이고 중복되는 작업을 추상화하여 중요한 것을 구축하는 것을 목표로 하는 다른 모든 프레임워크와 마찬가지로 새롭고 독창적인 것을 배워야 하는 경우가 많습니다. Next.js를 사용할 때 알아야 할 사항 중 하나는 다양한 CSS 메서드를 해당 API와 통합하는 방법이며 이것이 이 튜토리얼의 초점입니다.

아시다시피 CSS-in-JS에는 다양한 관점이 있으며 우리 모두는 프레임워크 작성자의 의견과 상당히 다를 수 있는 어떤 방식으로든 주제에 대한 의견을 가지고 있습니다.

Next.js 는 새로운 React 앱을 만들 때 권장되는 도구 모음 중 하나입니다. Next와 같은 도구는 React 앱을 작성할 때 일반적으로 중복되는 작업을 추상화하는 단순한 목표를 가지고 있습니다. 이를 통해 개발자는 바퀴를 재발명하는 것보다 코드 작성에 더 집중할 수 있습니다. 이것은 일반적으로 좋은 일이지만 시작하는 것이 약간 지루할 수도 있습니다. 하나는 추상화에 대해 배우면서 넘어야 할 장애물이 있고 Next(Routing, Data Fetching…)에 많은 것이 있지만 종종 간과되는 것 중 하나는 Styling입니다.

더 많은 청중에게 서비스를 제공하기 위해 Next.js는 구성 요소의 스타일을 지정하는 수많은 방법을 지원합니다. 당신이 유틸리티 퍼스트 파티에 속하든 CSS-in-JS 파티에 속하든 Next의 관심사는 당신이 선택한 것을 API에 주입하는 방법입니다.

이 문서의 목표는 Next 앱에서 스타일을 설정하는 방법을 이해하는 데 도움이 되는 것입니다. 우리는 비교를 처리하기 위해 다른 방법을 사용할 것입니다. 내가 설정한 책 애플리케이션에서 다양한 유형의 스타일을 구현할 것입니다. 우리가 살펴볼 스타일링 방법은 다음과 같습니다:

  1. 글로벌 CSS,
  2. SASS/SCSS,
  3. 구성 요소 수준 SASS/SCSS,
  4. 구성 요소 수준 CSS(CSS 모듈),
  5. 스타일 구성 요소,
  6. 스타일 JSX,
  7. 감정.

전제 조건

스타일링 투어를 시작하기 전에 숙지해야 할 다음 뉘앙스가 있습니다.

  1. _app.js
    이것은 페이지 폴더에 있는 사용자 정의 구성 요소입니다. Next.js는 이 구성 요소를 사용하여 페이지를 초기화합니다.
  2. _document.js
    _app.js 와 마찬가지로 _document.js 는 Next.js가 애플리케이션의 <html> 및 <body> 태그를 보강하는 데 사용하는 사용자 지정 구성 요소입니다. 이것은 Next.js 페이지가 주변 문서의 마크업 정의를 건너뛰기 때문에 필요합니다.
  3. _.babelrc
    존재하는 경우 Next.js는 이 파일을 일부 내부 구성에 대한 단일 정보 소스로 사용하고 이를 확장할 수 있는 권한을 부여합니다.

_app.js 파일을 추가하기 전에 서버를 실행 중인 경우 다시 시작해야 합니다.

점프 후 더! 아래에서 계속 읽기 ↓

create-next-app 다음 앱 만들기

create-next-app 을 사용하여 다음 앱을 만드는 것은 다음 단계에 따라 간단합니다.

  • create-next-app 전역적으로 설치합니다.
 yarn global add create-next-app // Installs create-next-app globally
  • style-in-next 라는 새 Next 앱을 만듭니다.
 create-next-app styling-in-next // Creates a new Next app named styling-in-next
  • 디렉토리를 새 사이트로 변경하십시오.
 cd styling-in-next // Switch directory into the new Next app
  • 사이트를 실행합니다.
 yarn dev -p 3000 // Instruct Next to run on port 3000

Next 앱 생성 및 실행에 대한 자세한 내용은 설명서를 참조하세요.

이제 앱이 https://localhost:3000 에서 실행 중이어야 합니다.

Next.js 기본 시작 색인 페이지의 스크린샷
Next.js 기본 시작 색인 페이지. (큰 미리보기)

데모 리포지토리

계속 진행하면서 각 책 에 다른 스타일 방법을 적용하여 인위적인 책장 을 만들 것입니다. 최종 결과는 다음과 같습니다.

Bookshelf 스타일의 최종 데모 스크린샷
최종 스타일 책장. (큰 미리보기)

위의 이미지는 6권의 책을 보여줍니다. 각 책에는 고유한 구성 요소가 있을 것입니다. 그런 다음 각 특정 책에 특정 스타일 유형을 적용합니다. 즉, 책 1은 전역 스타일을 사용하고 책 2는 다른 스타일을 사용합니다. 이렇게 하면 이러한 각 스타일의 작동 방식과 사용 방법을 확인할 수 있습니다. 이것은 어떤 옵션을 선택할지 더 나은 결정을 내리는 데 도움이 될 것입니다.

일을 간단하게 하기 위해 여러분이 따라할 수 있도록 GitHub 리포지토리를 스캐폴딩했습니다. 여기에서 잡을 수 있습니다.

create-next-app 에 의해 생성된 기본 스타터도 일부 변경되었습니다. 감정 , global , modules , styled-components 등과 같은 폴더가 해당 styles 파일과 함께 여러 구성 요소가 있는 components 디렉토리에 추가되었습니다.

데모 리포지토리 스타일 및 구성 요소 디렉터리에 대한 초기 변경 사항의 스크린샷
스타일 및 구성 요소 폴더에 대한 변경 사항. (큰 미리보기)

index.js 파일은 필요한 components 를 import 및 render 하도록 수정되었으며, 각 컴포넌트는 아래 이미지와 같은 유사한 구조를 가지고 있습니다.

BookTwo.js, BookOne.js 및 index.js에 대한 초기 변경 사항의 스크린샷
개별 구성 요소 및 색인 파일에 대한 변경 사항. (큰 미리보기)

데모 리포지토리를 복제하고 실행한 경우 페이지는 다음과 같아야 합니다.

데모 리포지토리의 기본 인덱스 페이지 스크린샷
데모 리포지토리의 기본 인덱스 페이지입니다. (큰 미리보기)

모든 것을 막고 스타일링을 해보자.

글로벌 스타일

새 웹 프로젝트를 시작할 때 일반적으로 수행하는 일반적인 작업 중 하나는 CSS를 재설정하거나 정규화하여 브라우저 간에 시작 위치가 균일하도록 하는 것입니다. 이것은 범위 지정에 대해 걱정하지 않고 Global CSS를 사용하는 완벽한 예입니다.

  • 이 확장된 최소 CSS 재설정으로 styles/global/globals.css 를 업데이트하십시오.
 /* styles/global/globals.css */ html { box-sizing: border-box; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } *, *:before, *:after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } ol, ul { list-style: none; } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; }
  • pages/_app.js 의 CSS 재설정 styles/global/globals.css /global/globals.css를 가져옵니다.
 // pages/_app.js import "../styles/global/globals.css"; function MyApp({Component, pageProps}) { return <Component {...pageProps} />; } export default MyApp;

전역 스타일은 pages/_app.js 에서만 가져올 수 있습니다 . 이러한 스타일은 가져오는 위치에 관계없이 응용 프로그램의 모든 pages 와 components 에 적용되기 때문에 직접적으로 논리적입니다. 잘못된.

이 시점에서 우리는 정규화 만 변경했기 때문에 Bookshelf 에 많은 시각적 변경 사항이 없습니다. 한 가지 눈에 띄는 것은 글꼴과 간격 변경입니다.

CSS 재설정을 추가한 후 데모 Bookshelf에 대한 변경 사항의 스크린샷
CSS 재설정을 추가한 후 색인 페이지에 대한 변경 사항입니다. (큰 미리보기)

SASS/SCSS

Next.js는 또한 .sass 또는 .scss 확장자를 사용하여 SASS로 스타일을 지정할 수 있습니다. Sass를 설치해야 합니다. 전역 스타일과 마찬가지로 pages/_app.js 에서만 가져올 수 있습니다.

  • Sass 패키지를 설치합니다.
 yarn add sass
  • styles/scss/bookshelf.scss 업데이트합니다.
 // styles/scss/bookshelf.scss .the-bookshelf { width: 100vw; height: 100vh; background-color: #e3e3e3; display: flex; justify-content: center; align-items: center; .bookshelf-wrap { > .bookshelf { box-shadow: inset 0 -20px #7b5019; padding-bottom: 20px; display: flex; align-items: flex-end; } [class*="book"] { font-size: 32px; letter-spacing: -0.045em; display: flex; transition: 0.2s; &:hover { transform: none; } } .book-info { text-transform: uppercase; writing-mode: sideways-rl; display: flex; justify-content: space-around; flex: 1; align-items: center; font-weight: bold; padding: 16px 0; .title { font-weight: inherit; font-size: 20px; } .author { font-weight: inherit; font-size: 15px; } } } }
  • 또한 다음과 같이 styles/ styles/sass/bookone.sass 및 styles/sass/booktwo.sass booktwo.sass를 업데이트하십시오.
 // styles/sass/bookone.sass .book-one color: #f00 width: 78px height: 350px transform: rotate(-4deg) margin-left: 16px margin-right: 23px background-color: black
 // styles/sass/booktwo.sass .book-two color: #781e0b width: 38px height: 448px margin-right: 23px background-color: #ffab44

SASS( .sass )는 들여쓰기를 기반으로 합니다. 포맷을 더 쉽게 하기 위해 SASS 파일 지원을 위한 이 VSCode 확장 을 설치할 수 있습니다 (포맷, 구문 강조…)

  • 세 가지 스타일 파일( styles/scss/bookshelf.scss , styles/sass/bookone.sass 및 styles/sass/booktwo.sass )을 pages/_app.js 에 가져옵니다.
 // pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass"; function MyApp({Component, pageProps}) { return ; } export default MyApp; // pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass"; function MyApp({Component, pageProps}) { return ; } export default MyApp;

우리 책장이 형태를 갖추기 시작했습니다. 스타일을 적용하면 첫 번째 책과 두 번째 책의 스타일이 지정되고 의도한 대로 표시되어야 합니다.

SASS로 첫 번째 책과 두 번째 책을 스타일링한 후 데모 Bookshelf로 변경한 스크린샷
BookOne 및 BookTwo는 SASS로 스타일이 지정되었습니다. (큰 미리보기)

CSS 모듈

CSS 모듈은 구성 요소 수준 CSS로, Next와 함께 기본 제공되며 .module.css 확장자로 스타일 파일의 이름을 지정하여 활성화할 수 있습니다. .module.sass 또는 .module.scss 확장자가 있는 SASS/SCSS와 함께 CSS 모듈을 사용할 수도 있습니다.

components/BookThree.js 구성 요소의 스타일을 지정해 보겠습니다.

  • styles/modules/BookThree.module.css 를 업데이트합니다.
 /* styles/modules/BookThree.module.css */ .book-three { color: #df66c3; width: 106px; height: 448px; margin-right: 23px; background-color: #153086; transform: rotate(-4deg); }
  • components/BookThree.js styles/modules/BookThree.module.css 를 가져 .book-three 클래스를 적용합니다.
 // components/BookThree.js import BookThreeStyles from "../styles/modules/BookThree.module.css"; export default function BookThree() { return ( <div className={BookThreeStyles["book-three"]}> <div className="book-info"> <p className="title">the revolt of the public</p> <p className="author">Martin Gurri</p> </div> </div> ); }

CSS 모듈에서 클래스 이름에 액세스하는 것은 점 또는 대괄호 표기법을 사용하는 JavaScript의 속성 접근자와 유사합니다. 여기에서 BookThreeStyles 를 가져온 다음 대괄호 표기법을 사용하여 styles/modules/BookThree.module.css 파일에 있는 스타일을 적용합니다.

선택기(이 경우 클래스 이름)에 제대로 액세스했다면 세 번째 책의 스타일을 지금 지정해야 합니다.

CSS 모듈로 세 번째 책을 스타일링한 후 데모 Bookshelf로 변경한 스크린샷
CSS 모듈로 스타일이 지정된 BookThree. (큰 미리보기)

감정

감정은 CSS-in-JS 라이브러리이며 다른 CSS-in-JS와 마찬가지로 JavaScript로 CSS 스타일을 작성할 수 있습니다.

components/BookFour.js 구성 요소의 스타일을 지정해 보겠습니다.

  • @emotion/core , @emotion/styled , emotion , emotion-server 패키지를 설치합니다.
 yarn add @emotion/core @emotion/styled emotion emotion-server
  • styles/emotion/StyledBookFour.js 를 업데이트합니다.
 // styles/emotion/StyledBookFour.js import styled from "@emotion/styled"; export const StyledBookFour = styled.div` color: white; width: 38px; height: 400px; margin-left: 20px; margin-right: 10px; background-color: #2faad2; transform: rotate(4deg); `;

@emotion/styled styled 를 가져온 후 StyledBookFour 스타일 구성 요소 를 내보냅니다(다른 CSS-in-JS Styled 구성 요소와 혼동하지 않도록). styled.div 에서와 같이 styled 감정 메서드로 강화되었습니다. 그런 다음 아래의 다음 단계에서와 같이 <StyledBookFour/> 를 사용할 수 있습니다.

감정의 스타일 기능에 대해 자세히 알아보세요.

  • <StyledBookFour/> 를 사용하는 것은 다른 React 구성 요소를 사용하는 방법과 유사합니다. components/BookFour.js styles/emotion/StyledBookFour.js 를 가져 StyledBookFour 구성 요소를 적용합니다.
 // components/BookFour.js import {StyledBookFour} from "../styles/emotion/StyledBookFour"; export default function BookFour() { return ( <StyledBookFour className="book-four"> <div className="book-info"> <p className="title">the man died</p> <p className="author">wole soyinka</p> </div> </StyledBookFour> ); }

충분한 양의 감정 으로 네 번째 책은 이렇게 스타일이 지정되어야 합니다.

네 번째 책을 Emotion으로 스타일링한 후 데모 Bookshelf로 변경한 스크린샷
감성으로 스타일링한 BookFour. (큰 미리보기)

스타일이 지정된 JSX

Global CSS 및 CSS-Modules와 마찬가지로 Styled-JSX는 추가 설정 없이 Next.js와 함께 작동합니다. 도움이 된다면 Styled-JSX는 Next.js를 만든 것과 동일한 구성 요소 기반 CSS를 제공하는 Vercel의 제품이기도 합니다.

components/BookFive.js 구성 요소의 스타일을 지정해 보겠습니다.

일을 단순하게 유지하기 위해 여기서는 styled-jsx의 내부 모드를 사용합니다. jsx prop을 <style/> 구성 요소에 전달하면 .book-five 에서 했던 것처럼 원하는 만큼 CSS를 작성할 수 있으며 스타일이 <BookFive/> 구성 요소에 현지화된다는 추가 이점이 있습니다.

 // components/BookFive.js export default function BookFive() { return ( <div className="book-five"> <div className="book-info"> <p className="title">there was a country</p> <p className="author">Chinua Achebe</p> </div> <style jsx>{` .book-five { color: #fff; width: 106px; height: 448px; margin-right: 23px; background-color: #000; transform: rotate(4deg); } `}</style> </div> ); }

그리고 그렇게 다섯 번째 책은 스타일을 취합니다.

Styled JSX로 다섯 번째 책을 스타일링한 후 데모 Bookshelf로 변경한 스크린샷
Styled JSX로 스타일이 지정된 BookFive. (큰 미리보기)

스타일이 지정된 구성 요소

Styled-Component는 Emotion과 마찬가지로 JavaScript로 CSS 스타일을 작성할 수 있는 CSS-in-JS 라이브러리입니다. 그것을 설정하는 것은 약간의 관련이 있습니다.

  • 먼저 babel-plugin-styled-components 및 styled-components 를 설치합니다.
 yarn add babel-plugin-styled-components styled-components
  • 앱의 루트에 .babelrc 파일을 생성하고, 아래 before(left), after(right) 이미지와 같이 pages/_document.js 파일을 생성합니다.
두 개의 새 파일(<code>_.document.js</code> 및 <code>.babelrc</code>)을 추가한 후 데모 Bookshelf에 대한 변경 사항의 스크린샷
새 파일이 추가되었습니다: _document.js 및 .babelrc . (큰 미리보기)
  • next/babel 사전 설정을 포함하도록 .babelrc 파일을 업데이트하고 서버 측 렌더링(ssr)이 활성화된 styled-components 플러그인을 포함합니다.
 // .babelrc { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true } ] ] }
  • 서버 측 렌더링 스타일을 <head> 에 주입하여 pages/_document.js 를 업데이트합니다.

아래 스니펫( pages/_document.js )은 스타일이 지정된 구성 요소가 Next.js와 함께 작동하는 데 필요한 논리입니다. styled-components 문서에서 지적한 대로 로직을 복사하는 것 외에는 거의 아무것도 하지 않아도 됩니다.

 // pages/_document.js import Document from "next/document"; import {ServerStyleSheet} from "styled-components"; export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } } }

.babelrc 및 pages/_document.js 업데이트 후 이제 styled-components를 사용할 수 있습니다.

  • styles/styled-components/StyledBookSix.js 업데이트.

styled 는 JavaScript의 스타일을 실제 CSS로 변환하는 내부 유틸리티 메서드입니다. <StyledBookSix/> 는 다른 React 구성 요소로 사용할 수 있습니다.

 // styles/StyledBookSix.js import styled from "styled-components"; const StyledBookSix = styled.div` color: #fff; width: 106px; height: 448px; margin-right: 23px; background-color: rebeccapurple; `; export default StyledBookSix;

React에서 Styled-Components를 사용하는 방법에 대해 자세히 알아보세요.

  • 가져온 styled-components <StyledBookSix/> 를 사용하여 components/BookSix.js /BookSix.js 에서 styles/styled-components/StyledBookSix.js 를 가져옵니다.
 // components/BookSix.js import StyledBookSix from "../styles/styled-components/StyledBookSix"; export default function BookSix() { return ( <StyledBookSix className="book-six"> <div className="book-info"> <p className="title">purple hibiscus</p> <p className="author">chimamanda ngozi adichie</p> </div> </StyledBookSix> ); }

첫 번째에서 여섯 번째 단계가 완료되면 여섯 번째에 스타일이 지정되고 Bookshelf가 완료됩니다.

Styled Components로 여섯 번째 책을 스타일링한 후 데모 Bookshelf로 변경한 스크린샷
Styled Components로 스타일이 지정된 BookSix. (큰 미리보기)

그게 다야

모든 것이 잘 되었다면, 당신은 읽기를 기다리고 있는 책들이 있는 완전한 책장을 갖게 될 것입니다.

  • GitHub에서 전체 코드를 얻을 수 있습니다 →

결론

Next.js를 사용하는 경우에는 전역 스타일과 styled-components로 충분했습니다. 그러나 이러한 모든 방법에는 장단점이 있다는 데는 의심의 여지가 없습니다. 그리고 어떤 방법을 사용할지 결정할 때 명심하십시오. 결국 모든 것이 CSS입니다. 이 시점에서 다음 프로젝트에서 어떤 패턴이 가장 적합한지 파악할 수 있다고 생각합니다.

자원

Next.js로 스타일 지정 방법을 설정하는 방법을 배우려면 공식 문서보다 더 좋은 곳이 없습니다.

그러나 다양한 스타일링 방법을 위한 특정 저장소도 있습니다. 시크릿 모드로 변경될 수 있으므로 다양한 저장소를 통해 자세히 알아보거나 업데이트를 확인할 수 있습니다.

  1. Tailwind CSS
  2. CSS 모듈
  3. 더 적은
  4. 첨필
  5. 감성이 있는 Tailwind CSS
  6. 스타일트론
  7. 마법
  8. CXS
  9. 아프로디테
  10. 펠라
  11. Styled-JSX