@azimutlabs/config-next v0.1.0

@azimutlabs/config-next

Next.js config extensions.

We assume that you already have next package installed.

• withEslint - adds eslint.

  • usage:

    // next.config.js
    module.exports = withEslint({ // nextOptions
      eslintOptions: {} // options for eslint-loader
    });

  • required libs: eslint, eslint-loader, eslint-friendly-formatter.
  • download command: npm i -D eslint-loader eslint-friendly-formatter

• withEnv - adds env variables using next/config runtime configurations.

  • usage:

    // next.config.js
    module.exports = withEnv({ // nextOptions
      serverRuntimeConfig: {}, // optional variables for server config.
      publicRuntimeConfig: {}, // optional variables for both server and public config.
    });
    
    // .env
    // NEXT_PUBLIC_TEST=somevalue
    
    // pages/index.js
    import getConfig from 'next/config';
    const { NEXT_PUBLIC_TEST } = getConfig().publicRuntimeConfig;

  • to override env var prefixes you need to define variables:

    # .env
    # Prefix for serverRuntimeConfig
    SERVER_PREFIX=_
    # Prefix for publicRuntimeConfig
    PUBLIC_PREFIX=CLIENT_
    
    _PORT=3000
    
    CLIENT_API=api.github.com

  • recommended libs: dotenv-load

• withLodash - optimizes lodash dist size using babel-plugin-lodash and lodash-webpack-plugin.

  • usage:

    // next.config.js
    module.exports = withLodash({ // nextOptions
      babelPluginLodashOptions: {}, // babel-plugin-lodash options.
      lodashWebpackPluginOptions: {}, // lodash-webpack-plugin options.
    });

  • required libs: babel-plugin-lodash, lodash-webpack-plugin.
  • download command: npm i -D babel-plugin-lodash lodash-webpack-plugin

• withStylelint - adds stylelint-webpack-plugin for stylelint.

  • usage:

    // next.config.js
    module.exports = withStylelint({ // nextOptions
      stylelintWebpackPluginOptions: {}, // stylelint-webpack-plugin options.
    });

  • required libs: stylelint, stylelint-webpack-plugin.
  • download command: npm i -D stylelint stylelint-webpack-plugin

• withEmotion - adds @emotion/babel-preset-css-prop for @emotion/core.

  • ⚠️ NOTE: for some reason, next.js does not use presets that was injected into next-babel-loader's options without creating .babelrc file. To make your project stay clean, you can configure your babel in package.json:

    {
      "babel": {
        "presets": ["next/babel"]
      }
    }

  • usage:

    // next.config.js
    module.exports = withEmotion({ // nextOptions
      babelPresetEmotionOptions: {}, // @emotion/babel-preset-css-prop options.
    });

  • required libs: @emotion/core, @emotion/babel-preset-css-prop.
  • download command: npm i -D @emotion/core @emotion/babel-preset-css-prop

• withSass - adds scss, scss-modules, sass-lint (no css).

  • ❗️DEPRECATED❗ - we are planning to move into CSS-in-JS practise, so for now this extension is no longer maintained.️
  • usage:

    // next.config.js
    module.exports = withSass({ // nextOptions
      sassLintOptions: {} // options for sass-lint-webpack plugin
    });

  • to enable sass-lint - add sassLintOptions field into nextOptions as shown in usage section.
  • required libs: @zeit/next-sass
  • required libs for sass-lint: sass-lint, sass-lint-webpack
  • download command: npm i -D @zeit/next-sass

Recommended usage

Combine by composing functions:

module.exports = compose(
  withEslint,
  withSass,
  withEnv,
)({ // next config
  eslintConfig: {},
  sassLintConfig: {},
});

LICENSE