Use .env

.env

@@ -0,0 +1 @@
+API_SERVER_URL=http://localhost:3000

constants/Env.ts

@@ -0,0 +1,7 @@
+/**
+ * Environment variables
+ */
+export const Env = {
+  NODE_ENV: process.env.NODE_ENV,
+  API_SERVER_URL: process.env.API_SERVER_URL,
+}

constants/index.ts

@@ -1,3 +1,4 @@
+export * from "./Env"
 export * from "./IEnum"
 export * from "./Page"
 export * from "./SagaSetting"

next.config.js

@@ -1,3 +1,16 @@
 const withCSS = require("@zeit/next-css")
+const path = require("path")
+const Dotenv = require("dotenv-webpack")
 
-module.exports = withCSS()
+module.exports = withCSS({
+  webpack: config => {
+    config.plugins = [
+      ...config.plugins,
+      new Dotenv({
+        path: path.join(__dirname, ".env"),
+        systemvars: true,
+      }),
+    ]
+    return config
+  },
+})

package.json

@@ -40,6 +40,7 @@
     "@types/react-redux": "^7.1.5",
     "@types/redux": "^3.6.0",
     "@types/styled-jsx": "^2.2.8",
+    "dotenv-webpack": "^1.7.0",
     "prettier": "^1.19.1",
     "redux-devtools-extension": "^2.13.8",
     "tslint": "^5.20.1",

store/api/InputApi.ts

@@ -1,9 +1,10 @@
+import { Env } from "../../constants"
 import { InputResponseModel } from "../../model"
 import { IReduxSagaFetchPayload } from "../redux-saga"
 
 export const fetchInputApi = (
   payload: IReduxSagaFetchPayload
 ): Promise<InputResponseModel> => {
-  const url = `http://localhost:3000/api/input?value=${payload.input}`
+  const url = `${Env.API_SERVER_URL}/api/input?value=${payload.input}`
   return fetch(url).then<InputResponseModel>(response => response.json())
 }

store/configureStore.ts

@@ -1,7 +1,8 @@
+import { Env } from "../constants"
 import { InitialState } from "../store/states"
 
 const configureStoreComponent = (() => {
-  if (process.env.NODE_ENV === "production") {
+  if (Env.NODE_ENV === "production") {
     return require("./configureStore.production")
   }
   return require("./configureStore.development")