.env files setup

.env

REACT_APP_API_URL=123123123
REACT_APP_APP_URL=123123123
REACT_APP_PAGE_URL=123123123
REACT_APP_FACEBOOK_PIXEL=123123123
REACT_APP_GOOGLE_TAG_MANAGER=123123123
REACT_APP_GEOLOCALIZATION=123123123

.env.local

REACT_APP_API_URL=123123123
REACT_APP_APP_URL=123123123
REACT_APP_PAGE_URL=123123123
REACT_APP_FACEBOOK_PIXEL=123123123
REACT_APP_GOOGLE_TAG_MANAGER=123123123
REACT_APP_GEOLOCALIZATION=123123123

config.js

export const API_URL  = process.env.REACT_APP_API_URL
export const APP_URL  = process.env.REACT_APP_APP_URL
export const PAGE_URL = process.env.REACT_APP_PAGE_URL
export const FBQ_ID   = process.env.REACT_APP_FACEBOOK_PIXEL
export const GTM_ID   = process.env.REACT_APP_GOOGLE_TAG_MANAGER
export const INTERCOM_ID = process.env.REACT_APP_INTERCOM
export const GEO_URL  = process.env.REACT_APP_GEOLOCALIZATION

next.config.js

const withESLint = require('next-eslint')

const Dotenv = require('dotenv-webpack')
const path = require('path')

const LANGUAGES = ['en', 'pt']

module.exports = withESLint({
    exportPathMap: async function (defaultPathMap) {
        let pathMap = {};
        
        Object.entries(defaultPathMap).forEach(([key, value]) => {
            pathMap[key] = value;
    
            LANGUAGES.forEach(language => {
                pathMap[`/${language}${key}`] = { ...value, query: {lang: language}}
            });
        });
    
        return pathMap;
    },
    generateBuildId: async () => {
        return 'build';
    },
    exportTrailingSlash: true,
    webpack: config => {
        config.plugins.push(new Dotenv({
          path: path.join(__dirname, '.env'),
          systemvars: true
        }));
    
        return config;
      },
});

package.json

{
    "scripts": {
        "dev": "node server.js",
        "build": "next build",
        "build:production": "env-cmd .env.production next build",
        "build:staging": "env-cmd .env.staging next build",
        "build:local": "env-cmd .env.local next build",
        "build:dev": "env-cmd .env next build",
        "start": "NODE_ENV=production node server.js",
        "heroku-postbuild": "next build",
        "export": "next export"
    },
    "dependencies": {
        "animate.css": "^3.7.0",
        "animejs": "^2.2.0",
        "dotenv-webpack": "^1.6.0",
        "env-cmd": "^8.0.2",
        "express": "^4.16.4",
        "js-cookie": "^2.2.0",
        "lodash": "^4.17.15",
        "moment-timezone": "^0.5.23",
        "next": "^7.0.3",
        "next-eslint": "0.0.4",
        "next-routes": "^1.4.2",
        "normalize.css": "^8.0.1",
        "nuka-carousel": "^4.4.4",
        "promise-polyfill": "8.1.3",
        "prop-types": "^15.6.2",
        "rc-slider": "^8.6.4",
        "react": "^16.8.6",
        "react-animate-on-scroll": "^2.1.5",
        "react-anime": "^2.2.0",
        "react-countup": "^4.0.0",
        "react-dom": "^16.8.6",
        "react-load-script": "0.0.6",
        "react-modal": "^3.8.1",
        "react-onclickoutside": "^6.7.1",
        "react-places-autocomplete": "^7.2.0",
        "react-pluralize": "^1.6.3",
        "react-share": "^2.4.0",
        "react-typekit": "^1.1.4",
        "styled-components": "^4.1.2",
        "styled-components-breakpoint": "^2.1.1"
    },
    "devDependencies": {
        "babel-eslint": "^10.0.2",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^3.1.0",
        "eslint-plugin-react": "^7.11.1"
    }
}