App configuration

server

This type doesn’t require any additional configuration.

build

Next.js config needs to be wrapped with nimplConfig.

next.config.js

const { default: nimplConfig } = require('@nimpl/config/with-nimpl-config');
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...
};
 
module.exports = nimplConfig()(nextConfig);

postbuild

Possible environments need to be passed to nimplConfig.

next.config.js

const { default: nimplConfig } = require('@nimpl/config/with-nimpl-config');
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...
};
 
module.exports = nimplConfig({ envs: ['development', 'staging', 'production'] })(nextConfig);

runtime

First, create an API route.

app/api/config/route.tsx

export { runtimeConfigApi as GET } from '@nimpl/config/runtime-config-api';
 
export const dynamic = 'force-dynamic';

It is important to specify force-dynamic, otherwise next.js will compile this API route as static and it will not provide actual data for the environment

Wrap the application with the Provider.

app/layout.tsx

import RuntimeConfigProvider from '@nimpl/config/runtime-config-provider';
 
export default function RootLayout() {
  return (
    <RuntimeConfigProvider apiPath='/api/config'>
      // ...
    </RuntimeConfigProvider>
  );
}

Configuration Introduction