Global Configuration
Learn how to define the global configuration for your application.
We store the global configuration of a Devias Kit Pro application in src/config.ts
.
The configuration has the following structure:
export const config = {
site: {
name: '',
description: '',
colorScheme: 'light',
themeColor: '#090a0b',
primaryColor: 'neonBlue',
url: process.env.NEXT_PUBLIC_SITE_URL,
version: process.env.NEXT_PUBLIC_SITE_VERSION,
},
logLevel: process.env.NEXT_PUBLIC_LOG_LEVEL,
auth: {
strategy: process.env.NEXT_PUBLIC_AUTH_STRATEGY || AuthStrategy.CUSTOM
},
auth0: {
secret: process.env.AUTH0_SECRET,
baseUrl: process.env.AUTH0_BASE_URL,
issuerBaseUrl: process.env.AUTH0_ISSUER_BASE_URL,
clientId: process.env.AUTH0_CLIENT_ID,
clientSecret: process.env.AUTH0_CLIENT_SECRET,
},
cognito: {
identityPoolId: process.env.NEXT_PUBLIC_COGNITO_IDENTITY_POOL_ID,
userPoolClientId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID,
userPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID,
},
firebase: {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
},
supabase: {
url: process.env.NEXT_PUBLIC_SUPABASE_URL,
anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
},
mapbox: {
apiKey: process.env.NEXT_PUBLIC_MAPBOX_API_KEY
},
gtm: {
id: process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID
},
} satisfies Config;
These values are used throughout the application instead of being hardcoded into the codebase.
Loading Environment Variables
Both Next.js and Vite have built-in support for loading environment variables from .env.local
into process.env
.
// File .env.local
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
Development Environment Variables
The development environment variables:
# App
NEXT_PUBLIC_SITE_URL=
NEXT_PUBLIC_SITE_VERSION=
NEXT_PUBLIC_VERSION=
# Logger
NEXT_PUBLIC_LOG_LEVEL=
# Auth
NEXT_PUBLIC_AUTH_STRATEGY=
# Auth0
AUTH0_SECRET=
AUTH0_BASE_URL=
AUTH0_ISSUER_BASE_URL=
AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=
# AWS Cognito
NEXT_PUBLIC_COGNITO_IDENTITY_POOL_ID=
NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID=
NEXT_PUBLIC_COGNITO_USER_POOL_ID=
# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
# Supabase
NEXT_PUBLIC_SUPABASE_REF_ID=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
# Mapbox
NEXT_PUBLIC_MAPBOX_API_KEY=
# Google Tag Manager
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
Vite uses a similar approach to Next.js, but instead of loading the environment variables into process.env
, it exposes them as import.meta.env
.
// File .env.local
VITE_SITE_NAME=My App
// File src/config.ts
export const config = {
site: {
name: import.meta.env.VITE_SITE_NAME,
},
};