0%
November 15, 2022

Config Files Organization in Frontend Project (Next.js Specific)

nextjs

react

Contents

Structure

Let's create a folder at the same directory level as pages.

  • default.ts is config in common
  • dev.ts: development specific config
  • prod.ts: production specific config

We define TConfig to shape the interface of our configuration data:

// TConfig.ts
export type TConfig = {
  modelRequiredSizes: {
    width: number,
    height: number,
  },
};

and all of our config files will strictly follow this interface:

// default.ts
import { TConfig } from "./TConfig"

const config = {
  modelRequiredSizes: {
    width: 320,
    height: 320
  }
} as Partial<TConfig>

export default config
// dev.ts
import { TConfig } from "./TConfig"

const config = {
} as Partial<TConfig>

export default config
// prod.ts
import { TConfig } from "./TConfig"

const config = {
} as Partial<TConfig>

export default config

Get Config

We combine all the config files under different environments:

import _ from "lodash";
import defaultConfig from "../config/default";
import devConfig from "../config/dev";
import prodConfig from "../config/prod";
import { TConfig } from "../config/TConfig";

export const getConfig = (): Partial<TConfig> => {
  const { NODE_ENV } = process.env;
  const targetCofig: Partial<TConfig> =
    NODE_ENV == "production" ? prodConfig : devConfig;
  const combinedConfig = { ...defaultConfig, ...targetCofig };

  return combinedConfig;
};