Next Configuration && CircleCI Configuration

CircleCI.yaml

version: 2.1
orbs:
  slack: circleci/slack@3.4.2
jobs:
  buildapp:
    docker:
      - image: cimg/node:12.18.0
    steps:
      - checkout
      - run: bash ./prepare-dev.sh
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - restore_cache:
          key: next-cache-{{ checksum "package-lock.json" }}
      - run: npm run build
      - run: npm run build-storybook
      - save_cache:
          key: next-cache-{{ checksum "package-lock.json" }}
          paths:
            - ./.next/cache
      - store_test_results:
          path: "coverage"
      - store_artifacts:
          path: "coverage"
      - persist_to_workspace:
          root: ~/
          paths:
            - .
  deploy_dev:
    docker:
      - image: cimg/node:12.18.0
    steps:
      - add_ssh_keys:
          fingerprints:
            - "df:2f:81:c6:40:f3:ad:8f:3a:3f:3d:83:16:c2:7d:08"
      - attach_workspace:
          at: .
      - run: cd project; bash ./deploy-dev.sh
      - slack/status
workflows:
  bettercompany:
    jobs:
      - buildapp
      - deploy_dev:
          requires:
            - buildapp
          filters:
            branches:
              only: master

next.config.js

const webpack = require('webpack');
const withStyles = require('@webdeb/next-styles');
const withFonts = require('next-fonts');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
require('dotenv').config();

const isProduction = process.env.NODE_ENV === 'production';

const nextConfig = {
  webpack (config) {
    // Returns environment variables as an object
    const env = Object.keys(process.env).reduce((acc, curr) => {
      acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
      return acc;
    }, {});

    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty',
    };

    /** Allows you to create global constants which can be configured
     * at compile time, which in our case is our environment variables
     */
    config.module.rules.push({
      test: /\.(ogg|mp3|wav|mpe?g)$/i,
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
      },
    });

    config.plugins.push(
      new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
      })
    );

    config.plugins.push(new webpack.DefinePlugin(env));

    config.module.rules.push(
      {
        test: /\.spec.jsx$/,
        loader: 'ignore-loader',
      }
    );

    return config;
  },
  pageExtensions: ['js'],
  env: {},
};

module.exports = withPlugins([
  [optimizedImages, {
    handleImages: [ 'jpeg', 'png', 'gif', 'svg', 'ico' ],
  } ],
  withFonts,
  [
    withStyles, {
      sass: true,
      modules: true,
      cssLoaderOptions: isProduction ? undefined : { localIdentName: '[local]___[hash:base64:5]' },
    },
  ],
], nextConfig);