client/next.config.mjs at main · SheSawLabs/client · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import path from "node:path";
import { fileURLToPath } from "node:url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  // ChunkLoadError 방지를 위한 설정
  experimental: {
    optimizePackageImports: ["@tanstack/react-query"],
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "storage.googleapis.com",
      },
      {
        protocol: "https",
        hostname: "cdn.fastcampus.co.kr",
      },
    ],
    unoptimized: true,
  },
  sassOptions: {
    includePaths: [path.join(__dirname, "/styles")],
    prependData: `@import "/styles/utils/_variable.scss"; @import "/styles/utils/_mixin.scss";`,
  },
  webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/,
      use: {
        loader: "@svgr/webpack",
        options: {
          svgoConfig: {
            plugins: [
              {
                name: "removeViewBox",
                active: false,
              },
            ],
          },
        },
      },
    });

    // ChunkLoadError 방지를 위한 webpack 최적화
    if (!isServer) {
      config.optimization = {
        ...config.optimization,
        splitChunks: {
          ...config.optimization.splitChunks,
          cacheGroups: {
            ...config.optimization.splitChunks.cacheGroups,
            // 공통 라이브러리들을 안정적인 청크로 분리
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendors',
              priority: 10,
              chunks: 'all',
              enforce: true,
            },
            // React Query를 별도 청크로 분리
            reactQuery: {
              test: /[\\/]node_modules[\\/]@tanstack[\\/]react-query/,
              name: 'react-query',
              priority: 20,
              chunks: 'all',
              enforce: true,
            },
          },
        },
      };

      // 런타임 청크를 안정적으로 유지
      config.optimization.runtimeChunk = {
        name: 'runtime',
      };
    }

    config.externals = [...config.externals, "canvas", "jsdom"];
    return config;
  },
};

export default nextConfig;