Using linaria with Next.js 14 ES module
리뉴얼 프로젝트를 시작 하기 위해 프레임워크는 Next 14 app router를 사용하기로 했는데
기존에 emotion을 사용하던 환경이라 style 라이브러리를 새로 결정해야 했다.
우선 여러 후보 중 vanilla-extract 와 linaria 둘로 좁혀졌다.
나는 linaria를 poc 해보기로했는데 공식문서의 불친절..함으로 여러 문제에 직면했다.
next 설치가 돼있는 상태에서 다음 과정을 따라하면 쉽게 linaria를 사용할 수 있다.
linaria는 zero-runtime css-in-js이므로 런타임이 아닌 빌드 타임에 컴파일하기때문에 JavaScript 코드에서 이 CSS 파일을 로드하는 과정이 필요하다.
그래서 babel과 webpack 등의 번들러를 건드려야하는데, next에서는 next.config.js에서 설정할 수 있다.
1. 패키지 설치
npm install @linaria/core @linaria/react @wyw-in-js/babel-preset @wyw-in-js/webpack-loader babel-loader @babel/preset-typescript @babel/runtime
2. babel.config.js 설정
babel.config.js 파일이 없다면 루트 디렉토리에 만들어서 사용하면 된다.
module.exports = {
presets: [
'next/babel',
'@babel/preset-typescript',
'@wyw-in-js/babel-preset'
],
};
3. next.config.mjs
next.config.mjs 파일이 없다면 루트 디렉토리에 만들어서 사용하면 된다.
CommonJS를 사용한다면 next.config.js
ES 모듈을 사용한다면 next.config.mjs 확장자를 사용한다.
Next.js 13 이상에서는 ES 모듈을 기본적으로 지원하기 때문에 create-next-app을 하게되면 자동으로 next.config.mjs 파일이 생성된다.
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack(config, { dev, isServer }) {
config.module.rules.push({
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'next/babel',
'@babel/preset-typescript',
'@wyw-in-js/babel-preset'
],
},
},
{
loader: '@wyw-in-js/webpack-loader',
options: {
sourceMap: dev,
},
},
],
});
return config;
},
};
export default nextConfig;
4. layout.tsx 수정
3번까지 완료하면 아래 에러가 발생한다.
⨯ ./app/layout.tsx:4:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
babel config를 수정했기 때문이다.
이를 해결하려면 layout.jsx에 자동으로 들어간 next/font를 제거해주면된다.
import type { Metadata } from "next";
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 lang="en">
<body>{children}</body>
</html>
);
}
linaria가 emotion과 가장 유사한 문법을 가지고 있어서 러닝커브가 없다는 점에서 좋았지만
타입 안정성과 공식문서의 불친절함, 적은 커뮤니티, 초기 설정이 번거롭다는 점에서 단점이 많았다.
'매일 해내는 개발 > Next.js' 카테고리의 다른 글
| Next.js에서 vanilla-extract 사용 시 storybook 설정하는 방법 + 예시 코드 (0) | 2024.05.29 |
|---|
댓글