[Next.js] 사이드 프로젝트 초기 셋팅하기

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>
  );
}