next.js + recoil + typescript + SCSS(or stylex) 조합으로 사용할 예정.
1. Next.js 설치
npx create-next-app@latest
What is your project named? -> 프로젝트 이름
Would you like to use TypeScript? -> 타입스크립트 사용할건지?
Would you like to use ESLint? -> ESLint 쓸건지? 아마 airbnb로 쓸거같은데.. 일단 yes
Would you like to use Tailwind CSS? -> scss module이나 stylex 사용해볼거같아서 no
Would you like to use `src/` directory? -> src 디렉토리 사용할건지? 이건 개취일듯. 하지만 난 no
Would you like to use App Router? -> 추천이라니까 yes
Would you like to use customize the default import alias ? -> 절대경로 커스텀할건지?
2. Prettier와 ESLint(airbnb) 설정
해당 설정은 블로그 참고
pnpm add prettier -D
pnpm add eslint-config-airbnb -D
pnpm add eslint-config-airbnb-typescript -D
pnpm add @typescript-eslint/eslint-plugin -D
pnpm add @typescript-eslint/parser -D
pnpm add eslint-config-prettier -D
3. Recoil
pnpm add recoil
4. SCSS
pnpm add sass
설치하고 css 파일들의 확장자를 모두 scss로 변경해주었다.
global.css -> global.scss
page.module.css -> page.module.scss
(사실 두 css는 내용 싹다 삭제하고 처음부터 만들어갈거라..)
5. Stylex
stylex는 셋팅에 꽤 시간이 걸렸다🫠
Cannot use import statement outside a module 오류와
require is not defined 오류의 늪이었는데
next.js는 babel.config.js 없이 .babelrc.js 만 설정해줘도 되는거였다..!
pnpm add @stylexjs/stylex
pnpm add @stylexjs/babel-plugin
pnpm add @stylexjs/nextjs-plugin
// .babelrc.js
const path = require('path');
module.exports = {
presets: ['next/babel'],
plugins: [
[
'@stylexjs/babel-plugin',
{
dev: process.env.NODE_ENV === 'development',
runtimeInjection: false,
genConditionalClasses: true,
treeshakeCompensation: true,
aliases: {
'@/*': [path.join(__dirname, '*')],
},
unstable_moduleResolution: {
type: 'commonJS',
rootDir: __dirname,
},
},
],
],
};
// next.config.js
const path = require('path');
const stylexPlugin = require('@stylexjs/nextjs-plugin');
module.exports = stylexPlugin({
aliases: {
'@/*': [path.join(__dirname, '*')],
},
rootDir: __dirname,
})({});
stylex를 사용할 땐 아래와 같이 사용한다.
// page.tsx
import * as stylex from '@stylexjs/stylex';
import Test from "@/components/Test";
const styles = stylex.create({
test: {
fontSize: "30px",
lineHeight: '30px',
color: 'red',
},
});
export default function Home() {
return (
<main>
<header {...stylex.props(styles.test)}>
헤더
</header>
<Test />
<footer>
푸터
</footer>
</main>
);
}
'Study > React, next.js' 카테고리의 다른 글
[Next.js] export const dynamic = 'force-dynamic' (0) | 2025.02.04 |
---|