next.config.js

require("dotenv").config();

const path = require("path");
const Dotenv = require("dotenv-webpack");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");
const { theme } = require("./src/lib/styles/nextTheme");

const withSourceMaps = require("@zeit/next-source-maps");

// Use the SentryWebpack plugin to upload the source maps during build step
const SentryWebpackPlugin = require("@sentry/webpack-plugin");

process.env.SENTRY_ORG = "pipe";
process.env.SENTRY_PROJECT = "frontend";

const {
  SENTRY_DSN,
  SENTRY_ORG,
  SENTRY_PROJECT,
  SENTRY_AUTH_TOKEN,
  NODE_ENV
} = process.env;

const themeVariables = {
  "@font-family": theme.fonts.fontFamily,

  "@primary-color": "#1890ff", // primary color for all components
  "@link-color": "#1890ff", // link color
  "@success-color": "#52c41a", // success state color
  "@warning-color": theme.colors.peach, // warning state color
  "@error-color": "#f5222d", // error state color

  // Text
  "@font-size-base": " 14px", // major text font size
  "@heading-color": "rgba(0, 0, 0, 0.85)", // heading text color
  "@text-color": "rgba(0, 0, 0, .98)", // major text color
  "@text-color-secondary": "rgba(0, 0, 0, 0.8)", // secondary text color

  "@disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
  "@border-radius-base": "4px", // major border radius
  "@border-color-base": "#d9d9d9", // major border color
  "@box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15)" // major shadow for layers
};

module.exports = withSourceMaps(
  withCSS(
    withLess({
      target: "serverless",
      lessLoaderOptions: {
        javascriptEnabled: true,
        modifyVars: themeVariables // make your antd custom effective
      },
      webpack: (config, { isServer, buildId }) => {
        config.devtool = "hidden-source-map";
        config.plugins = config.plugins || [];

        // For webfont support
        config.module.rules.push({
          test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
          use: {
            loader: "url-loader",
            options: {
              limit: 100000,
              name: "[name].[ext]"
            }
          }
        });

        // For .less + antd support
        if (isServer) {
          const antStyles = /antd\/.*?\/style.*?/;
          const origExternals = [...config.externals];
          config.externals = [
            (context, request, callback) => {
              if (request.match(antStyles)) return callback();
              if (typeof origExternals[0] === "function") {
                origExternals[0](context, request, callback);
              } else {
                callback();
              }
            },
            ...(typeof origExternals[0] === "function" ? [] : origExternals)
          ];
          config.module.rules.unshift({
            test: antStyles,
            use: "null-loader"
          });
        }

        // For .env support
        config.plugins = [
          ...config.plugins,

          // Read the .env file
          new Dotenv({
            path: path.join(__dirname, ".env"),
            systemvars: true
          })
        ];

        // sentry stuff
        // In `pages/_app.js`, Sentry is imported from @sentry/node. While
        // @sentry/browser will run in a Node.js environment, @sentry/node will use
        // Node.js-only APIs to catch even more unhandled exceptions.
        //
        // This works well when Next.js is SSRing your page on a server with
        // Node.js, but it is not what we want when your client-side bundle is being
        // executed by a browser.
        //
        // Luckily, Next.js will call this webpack function twice, once for the
        // server and once for the client. Read more:
        // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
        //
        // So ask Webpack to replace @sentry/node imports with @sentry/browser when
        // building the browser's bundle
        if (!isServer) {
          config.resolve.alias["@sentry/node"] = "@sentry/browser";
        }

        // When all the Sentry configuration env variables are available/configured
        // The Sentry webpack plugin gets pushed to the webpack plugins to build
        // and upload the source maps to sentry.
        // This is an alternative to manually uploading the source maps
        // Note: This is disabled in development mode.
        if (
          SENTRY_DSN &&
          SENTRY_ORG &&
          SENTRY_PROJECT &&
          SENTRY_AUTH_TOKEN &&
          NODE_ENV === "production"
        ) {
          config.plugins.push(
            new SentryWebpackPlugin({
              include: ".next",
              ignore: ["node_modules"],
              urlPrefix: "~/_next",
              release: buildId
            })
          );
        } else {
          console.warn("Sentry sourcemaps not getting pushed.");
        }
        // end sentry config

        return config;
      }
    })
  )
);

babel.config.js

module.exports = api => {
  api.cache(true);

  const presets = ["next/babel", "@emotion/babel-preset-css-prop"];

  const plugins = [
    "inline-react-svg",
    "emotion",
    ["import", { libraryName: "antd", style: true }]
  ];

  return {
    presets,
    plugins
  };
};