config(next-swc): emotion css prop / swc minify 설정

[manudeli]

ISSUES CLOSED: #128

Next.js의 SWC에서 emotion css prop / swc minify 설정

🔗 참고 링크

emotion-js/emotion#2467 (comment)

.swrrc

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "refresh": true,
        "importSource": "@emotion/react"
      }
    }
  }
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
  swcMinify: true, // <- swcMinify 추가
};

module.exports = nextConfig;

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "jsxImportSource": "@emotion/react", // <- 추가
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js"],
  "exclude": ["node_modules"]
}

[swimjiy]

LGTM!👍