NextJS 및 Styled Components 설정하기💅

앱 만들기

npx create-next-app@latest example-blog && 
cd example-blog

이것은...

example-blog라는 이름의 폴더에 NextJS 앱을 만듭니다.

방금 만든 폴더 안에 넣습니다

.

스타일이 지정된 구성 요소 설치

npm i --save styled-components &&
npm i --save-dev babel-plugin-styled-components

이것은...

styled-components를 example-blog 폴더

에 설치합니다.

브라우저에서 클래스 이름을 볼 수 있는 babel 플러그인을 설치합니다(추가 작업 예정)

.

이제 사용하는 편집기를 엽니다. 저는 Visual Studio Code를 사용하고 pages/index.js 파일을 엽니다.
이를 수행하는 쉬운 방법은 콘솔로 돌아가서 code .를 입력하여 VSC에서 폴더를 여는 것입니다.

babel 플러그인이 무엇을 하는지 설명하기 위해 이 페이지에 대한 스타일 구성 요소를 만들겠습니다.
이미 존재하는 가져오기 아래에 이 코드를 추가합니다.

import styled from 'styled-components';

const Container = styled.div`
  background-color: black;
  color: white;
`

이것이 하는 일은...

구성 요소를 만드는 기능 가져오기styled 구성 요소

스타일이 지정된 변수Container라고 선언하는 div라는 변수를 만듭니다.

Container 변수

에 일반 CSS 할당

다음으로 요소를 새Container div로 교체하겠습니다. 가장 바깥쪽 div 옆에 있는 화살표를 클릭하여 접습니다.



그런 다음 그 두 줄을 이것으로 바꿀 것입니다 ...



이제 콘솔로 이동하여 다음을 입력하면

npm run dev

기본 NextJS 홈페이지가 표시되지만 스타일이 지정된 구성 요소에 할당한 검은색 배경과 흰색 텍스트가 표시됩니다.



하지만 문제가 있습니다. 이제 생성한 div에는 클래스 이름에 대한 임의의 숫자와 문자만 있습니다. 요소가 스타일을 가져오는 위치를 알아낼 방법이 없습니다. 이것은 babel 플러그인이 작동하는 곳입니다.

루트 폴더에서 파일 이름을 만듭니다.babelrc.
그리고 그 파일 안에 이 코드를 추가합니다.

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "displayName": true }]]
}

이제 콘솔에서 ctrl-c를 눌러 서버를 중지하고 npm run dev를 다시 입력하십시오.

이번에는 콘솔에서 이제 div에 styled component가 있는 폴더(페이지)와 해당 구성 요소의 이름(컨테이너)을 알려주는 클래스 이름이 있음을 확인할 수 있습니다.

봄맞이 대청소

프로젝트를 약간 정리하기 위해 이 가이드에서 사용하지 않을 파일을 제거할 것입니다.
pages/api 폴더를 삭제할 수 있음styles/Home.modules.css 파일을 삭제할 수 있음
또한 계속해서 'Poppins' 글꼴을 가져와서 본문이 모든 것에 적용할 수 있도록 globals.css 파일 안에 배치할 것입니다.

index.js에서 이러한 스타일을 사용하기 때문에 이렇게 하면 앱이 중단됩니다.

이 문제를 해결하려면 반품에서 모든 항목을 제거하고 추가<h1>Hello</h1>하거나 원하는 항목(곧 이 파일에 콘텐츠를 추가할 예정임)

을 추가하면 됩니다.