Nextjs 설치부터 환경 세팅까지
Nextjs에서 css로 vanilla-extact을 사용하려 했다.
설치부터 언제 문제가 생겼는지를 기록하려고 한다.
Nextjs 설치
npx create-next-app@latest
터미널에 다음과 같이 입력을 위하면, 위와같은 이미지로 내가 원하는 설정을 할 수 있다.
나는 다음과 같이 작업을 진행했다.
폴더 경로 바꿔주기
src라는 폴더를 사용할 예정이기 때문에, 기존 src/app 폴더를 지우고 pages안에
다음과같이 만들 예정이다.
_App 페이지
_app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페어지에 적용할 공통 레이아웃의 역할을 합니다.
주요 사용 목적으로는 모든 컴포넌트에 공통으로 적용할 속성을 관리합니다.
import { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
_Document 페이지
_document는 _app 다음에 실행되며, 공통적으로 활용할 <head> (Ex. 메타 태그)나 <body> 태그 안에 들어갈 내용들을 커스텀할때 활용합니다.
import { Head, Html, Main, NextScript } from 'next/document';
import React from 'react';
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
index.tsx
import React from 'react';
const App = () => {
return (
<div>
<div>App</div>
</div>
);
};
vanilla-extact 설치하기
https://vanilla-extract.style/
vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
Zero-runtime Stylesheets-in-TypeScript.
vanilla-extract.style
vanilla-extact 공식 홈페이지에서 제공하는 방법을 토대로 설치를 진행할 예정이다.
홈페이지에 들어가면 OVERVIEW -> Getting Started에 들어가보면 다음과 같이 설치하라고 나와 있다.
나는 yarn을 사용할 예정이기 때문에 yarn을 쓸사람들은 아래와 같이 하면된다.
yarn add @vanilla-extract/cssNextjs에서 vanilla-extact을 설정하려면 plugin을 하나 다운받아야되는데,
홈페이지 INTERGRATIONS -> Next.js에 들어가면 다음과 같은 내용이 있다.
yarn add -D @vanilla-extract/next-pluginSetup
위 이미지 아래로 내려보면 다음과 같이 setup을 설정하라고 나오는데, next 13 version 부터는 next.config.js라는 파일이 있을 것이다.
그러면 여기에 다음과 같은 내용을 입력하면된다.
const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = withVanillaExtract(nextConfig);다음과같이 설정을 다 해놓고 테스트를 진행하면,
다음과 같은 에러가 뜨는데.... 와 이거때문에 이틀은 버린 느낌이다. 구글링이던 뭐던 열심히 찾아봤는데 찾지 못했던 내용을
github 이슈에서 찾아버렸다.. .다음은 꼭 issue먼저 확인해야지;;;
vanilla-extaact-css 공식 github에 들어가서 원인이 되는 말을 찾아보니,
고맙게도 이런 문제를 겪은 사람이 있었고, 다음과 같이 해결방안을 줘서 문제를 해결할 수 있었다.
정리
근데 이건 내가 사실 app폴더를 삭제하고 _app.tsx, _document.tsx로 customizing해서 생긴 문제가 아닐까 싶다. 현재 next.confing.js에서 내가 한작업은 appDir 이라는 값을 false 해줬는데,
공식 홈페이지에서 appDir을 살펴보면
다음과 같이 적혀있다. 흠... 내가 테스트 해봤을 때도 app폴더안에서 css파일을만들고 하면됬던거같다.
하지만 이것도 하나의 방법이니, 이전버전에 대한 방법도 알고있는것도 좋은 방법인거 같다.
확실히 공식문서만 보고 하는것은 나에게는 아직 어려운 느낌이다. 하지만 하나하나 익숙해지면 언젠가는 빠르게 할 수 있을꺼라 본다.
이제 재대로 활용해 보고 느낀점을 다음에 올려봐야지
참고
https://github.com/vanilla-extract-css/vanilla-extract/issues/1101
You forgot to add 'mini-css-extract-plugin' plugin · Issue #1101 · vanilla-extract-css/vanilla-extract
Describe the bug in @vanilla-extract/next-plugin 2.1.3 Reproduction https://github.com/toeverything/AFFiNE yarn install cd apps/web yarn up @vanilla-extract/next-plugin@2.1.3 yarn dev System Info ➜...
github.com