Sample next.config.js for Next.js that includes environment variables, and other plugins (CSS and Image)

next.config.js

const withCSS = require("@zeit/next-css");
require('dotenv').config()
const path = require('path')
const Dotenv = require('dotenv-webpack')

const withImages = require('next-images')

module.exports = withCSS(withImages({
    inlineImageLimit: 16384,
    webpack(config, options) {
        config.plugins = config.plugins || [];
        config.plugins = [
            ...config.plugins,

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

It is really useful thing, cause I hadn't been solving my problem for 4 days.
Problem was:
Using [name].css with grid-column-end with span 2 inside. After npm run build. Nextjs can't build it for the reason span (special word) was seen as custom css.

Thank u very much :+1

Great