요즘 핫한 panda css next.js app 라우터에서 시작하기
app라우터에서 pandacss를 바로?
이전 글에서는 왜 build time css - in -js 가 하입을 받고 있는지를 간단히 다루어보았는데요
이번에는 build type css - in js 프레임워크 중 하나인 panda css의 세팅을 해보도록 하겠습니다.
panda css는 next.js , remix , gatby , nuxt , preact , solid.js 등
너무나도 다양한 프레임워크들을 지원해주며 그 방법 또한 공식문서에서 잘 가르쳐주고 있습니다.
심지어는 app router와의 통합 과정도 너무 잘 가르쳐주고 있는데요
공식문서를 잘 따라서 설치해보고 조금 문제가 생길 수 있는 부분들은 간단하게 고쳐보면서
panda css를 잘 세팅해보도록 하겠습니다.
npx create-next-app@latest --use-npmcreate nexet app을 수행해줍니다.
pnpm, yarn 등 원하는 패키지매니저를 사용하셔도 좋습니다.
✔ What is your project named? … test-app
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use Tailwind CSS with this project? … No
✔ Would you like to use `src/` directory with this project? … Yes
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … No맨 위의 what is your project named에는 생성하고자 하는 폴더이름을 넣어줍니다.
그 이외에는 원하는대로 설정해주면 되는데 pandacssd에서 권장하는 방법은 다음과 같습니다.
이를 그대로 따르셔도 좋지만 저는 src 디렉토리는 없었으면 좋겠으니 그부분을 바꿔주고
import alias를 하는 부분도 제 취향에 맞게 @/* 로 커스터마이징 해주었습니다.
cd test-appcd 명령어를 통해 생성된 폴더에 진입합니다.
이제부터 pandacss를 본격적으로 설치해보겠습니다.
npm install -D @pandacss/dev
npx panda init --postcss빌드 타임에 모든 css가 완성되기때문에 dev 종속성으로 설치해주도록 합니다.
npx panda init --postcss 명령어를 통해 이니셜라이제이션을 해줘요
{
"scripts": {
+ "prepare": "panda codegen",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}package.json의 scripts 부분에 preapre 명령어를 다음과 같이 추가해줍니다.
추가를 완료했다면 npm run preapare 를 한번 시도해보셔도 좋고 안해보셔도 좋습니다.
이제 루트폴더에 생성된 panda.config.ts 파일을 확인하겠습니다.
pandacss의 이니셜라이제이션은 우리가 src 디렉토리를 사용할 것이라는 가정하에 생성되었기 때문에
이부분에서 살짝 바꾸어주어야하는 부분이 있습니다.
import { defineConfig } from "@pandacss/dev"
export default defineConfig({
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ["./src/components/**/*.{ts,tsx,js,jsx}", "./src/app/**/*.{ts,tsx,js,jsx}"],
// Files to exclude
exclude: [],
// The output directory for your css system
outdir: "styled-system",
})기존 코드는 다음과 같이 작성되어있을텐데요
import { defineConfig } from "@pandacss/dev"
export default defineConfig({
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ["./app/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
// Files to exclude
exclude: [],
// Useful for theme customization
theme: {
extend: {}
},
// The output directory for your css system
outdir: "styled-system",
})src를 받던 부분을 app 으로 바꾸어주겠습니다.
@layer reset, base, tokens, recipes, utilities;이제 app/global.css로 진입하여 다음 코드를 추가해줍니다.
기존에 작성되어있는 코드는 모두 지워도 좋습니다.
import './global.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}global.css에 해당 코드를 잘 추가했다면
이제 최상위의 layout.tsx에서 해당 css 파일을 import 해줍니다.
이것으로 초기 세팅은 모두 끝났습니다!
이제 잘 동작하는지 확인해보겠습니다.
import { css } from '@/styled-system/css';
export default function Home() {
return (
<main>
<div
className={css({
fontSize: '2xl',
fontWeight: 'bold',
color: 'GrayText',
})}
>
Hello World
</div>
</main>
);
}app/page.tsx의 코드를 다음과 같이 수정하고
npm run dev를 통해 실행시켜보세요!
스타일이 적절히 적용되어 나타난다면 성공입니다.
여기까지 마치고나서 만약 git을 사용하고 있다면 많은 변경사항이 나오고 있을 수 있습니다.
이는 빌드 결과물이 gitignore 되고 있지 않기 때문에 발생하는 현상입니다.
루트 폴더에 .gitignore 파일이 있다면 열고 없다면 생성해줍니다.
node_modules
styled-system
.nextpandacss의 빌드 결과물과 next.js의 빌드 결과물을 git에 포함하지 않도록 무시해주는 코드입니다.
수고 많으셨습니다.
본 포스트의 예제코드는 다음 링크에서 확인하실 수 있습니다.
https://github.com/XionWCFM/pandacss-approuter
GitHub - XionWCFM/pandacss-approuter
Contribute to XionWCFM/pandacss-approuter development by creating an account on GitHub.
github.com
감사합니다.