How to use the next/config function in next

import { getCurrentProvider, getWeb3Provider } from '@unlock-protocol/unlock-js'

import getConfig from 'next/config'
import { ETHEREUM_NETWORKS_NAMES } from './constants'

// cribbed from https://stackoverflow.com/questions/326069/how-to-identify-if-a-webpage-is-being-loaded-inside-an-iframe-or-directly-into-t
export function inIframe(window) {
  try {
    return window.self !== window.top
  } catch (e) {
    return true
  }
}

const nextConfig = getConfig() && getConfig().publicRuntimeConfig

/**
 * This function, based on the environment will return the list of providers available, the one that
 * is used, as well as the list of networks and the one that is being used.
 * In dev/testing, the provider can be anything and the network can be anything too.
 * In staging, the provider needs to be an ingested web3 provider, and the network needs to be rinkeby
 * In prod, the provider needs to be an ingested web3 provider and the network needs to be mainnet
 * @param {*} environment (in the JS sense: `window` most likely)
 */
export default function configure(
  environment = global,
  runtimeConfig = nextConfig,
  useWindow = global.window
) {
  const isServer = typeof window === 'undefined'
  const isInIframe = inIframe(useWindow)

function getAirtable() {
  return airtableInit(getConfig().serverRuntimeConfig.AIRTABLE_EVENTS_ID)(TABLE_NAME)
}

componentDidMount() {
    const { publicRuntimeConfig } = getConfig();
    if (publicRuntimeConfig && publicRuntimeConfig.isProduction && 'serviceWorker' in navigator) {
      navigator.serviceWorker
        .register('/serviceWorker.js')
        .catch(err => console.error('Service worker registration failed', err));
    }
  }

function getAirtable() {
  const { serverRuntimeConfig } = getConfig()
  return airtableInit(serverRuntimeConfig.AIRTABLE_FELLOW_ID)(TABLE_NAME)
}

function apiKey() {
  const { serverRuntimeConfig } = getConfig()
  return serverRuntimeConfig.__ACTIVE_CAMPAIGN_API_KEY__
}

render() {
    const { publicRuntimeConfig } = getConfig()

    return (
      <div>
        
          
          
          
          
          
          
          
          <title>Lightning Candy Dispenser</title>
          
          
          
          </div>

getConfig(name) {
		let { publicRuntimeConfig, serverRuntimeConfig } = getConfig() || {}
		let config = {
			...publicRuntimeConfig,
			...serverRuntimeConfig
		}
		return config[name]
	}

import ReactGA from 'react-ga'
import App, { Container } from 'next/app'
import React from 'react'
import Intercom from 'react-intercom'
import getConfig from 'next/config'

import GlobalStyle from '../theme/globalStyle'
import Membership from '../components/interface/Membership'
import { MembershipContext } from '../membershipContext'
import { GA_LABELS, GA_ACTIONS } from '../constants'

const config = getConfig().publicRuntimeConfig

const isServer = typeof window === 'undefined'

class UnlockProtocolSiteApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  constructor(props, context) {
    super(props, context)

function RecentSubjects (props) {
  const { isLoggedIn, recents, projectName, size, slug } = props
  const height = (size === 1) ? '40vw' : '200px'
  const { publicRuntimeConfig = {} } = getConfig() || {}
  const assetPrefix = publicRuntimeConfig.assetPrefix || ''
  const placeholderUrl = `${assetPrefix}/subject-placeholder.png`

  return (
    
      
        {counterpart('RecentSubjects.text')}
      
      
        {recents.map(recent => {
          const subject = {
            favorite: recent.favorite,