반응형
최근에 나온 React 19, Next js 15와 제가 좋아하는 Css 라이브러리 Panda Css로 Sns를 간단하게 만들어 보겠습니다. 깃 레포는 여기 있습니다.
React 19, Next 15 init
우선 초기 세팅을 해볼 건데요. 저는 이 블로그 글을 참고해서 세팅을 했습니다.
React 19 + Next js 15 설치
pnpm create next-app@rc이 명령어를 입력하면 여러 질문들이 나오는데요. 저는
- Typescript 사용
- Eslint 사용
- Tailwind 사용 X
- src 사용
- App Router 사용
- Turbopack 사용 X
- @ import alias 사용 X
이렇게 세팅을 했습니다.
React 컴파일러 설치
이번에 React 19에 새로 등장한 컴파일러인데요.
pnpm add -D babel-plugin-react-compiler이 명령어로 설치를 해줍니다.
그리고 난 뒤에 next.config.mjs에서 옵션을 켜줍니다.
const nextConfig = {
experimental:{
reactCompiler: true
}
};Panda Css 설치
이제 Css 라이브러리 Panda Css를 설치해 보겠습니다.
Panda Css 공식 문서를 참고했습니다.
pnpm install -D @pandacss/dev
pnpm panda init --postcss이 명령어들을 사용했습니다.
폰트 세팅
이제 프로젝트에서 사용할 폰트를 세팅해 보겠습니다. 저는 이 프로젝트에서
위에 사이트에 들어가 다운을 받은 뒤에
- 프로젝트의
/src/app/fonts안에 넣어주고요. - 를 사용하겠습니다.
- root*의 layout.tsx에 이렇게 넣어줍니다.
– 한국기계연구원 서체 – 한국기계연구원
www.kimm.re.kr
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
const boldFont = localFont({
src: "./fonts/kimm_bold.ttf",
variable: "--font-bold",
display: "swap",
});
const lightFont = localFont({
src: "./fonts/jamsil_Light.ttf",
variable: "--font-light",
display: "swap",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html
className={`${boldFont.variable} ${lightFont.variable} ${lightFont.className}`}
lang="en"
>
<body>{children}</body>
</html>
);
}
여기서 주의해야 할점이 기본 next js는 html에 className에 넣는 것이 아닌 body에 폰트 관련 className을 넣는데요. html에 넣어줘야 제대로 작동을 합니다.
이제 panda.config.ts에도 font를 적용해 줘야 하는데
저는 귀찮으니까 bold, light라는 이름으로 적용을 했습니다.
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ["./src/**/*.{js,jsx,ts,tsx}"],
// Files to exclude
exclude: [],
// Useful for theme customization
theme: {
extend: {},
tokens: {
fonts: {
bold: { value: "var(--font-bold)" },
light: { value: "var(--font-light)" },
},
},
},
globalVars: {
"var(--font-bold)": "boldFont, boldFont Fallback",
"var(--font-light)": "lightFont,lightFont Fallback",
},
// The output directory for your css system
outdir: "styled-system",
});
오늘은 React 19, Next 15, Panda Css 설치와 세팅을 간단하게 해봤습니다. 읽어주셔서 감사합니다 !
반응형
'frontend' 카테고리의 다른 글
| (React 19 + Next js 15 + Panda Css) 2. SVGR 적용 (1) | 2024.06.15 |
|---|---|
| 브라우저의 동작 원리 (0) | 2024.06.11 |
| 웹 어셈블리 찍먹 ! (0) | 2024.05.23 |
| 싱글스레드 언어인 JS에서는 Promise가 어떻게 동작할까 ? (0) | 2024.05.15 |
| No.1 Css 라이브러리 "Panda Css" (0) | 2024.05.06 |
