Configuration
Site settings, environment variables, and the content data files that drive every page.
8 min readUpdated 2026-09
Site settings
Global settings such as the site name, tagline, navigation links, and footer links live in a single file. Editing this file updates the header, footer, and metadata across the site.
export const siteConfig = {
name: "Your Company",
tagline: "A short description of what you do.",
url: "https://example.com",
nav: [
{ label: "Home", href: "/" },
{ label: "Services", href: "/services" },
{ label: "Contact", href: "/contact" },
],
}Environment variables
Copy .env.example to .env.local and fill in the values relevant to your deployment. Variables prefixed with NEXT_PUBLIC_ are exposed to the browser; all others stay on the server.
NEXT_PUBLIC_SITE_URL=https://example.com
CONTACT_FORM_ENDPOINT=| Variable | Required | Purpose |
|---|---|---|
| NEXT_PUBLIC_SITE_URL | Yes | Canonical URL used in metadata and sitemaps |
| CONTACT_FORM_ENDPOINT | No | Where contact form submissions are sent when integrated |
Content data files
Page content is defined as typed data rather than hard-coded inside components. Each product ships with data files for its main content types — for example services, projects, events, or pricing plans.
- Add an entry to the data array to create a new item.
- Detail pages are generated automatically from the slug field.
- TypeScript will flag missing or misspelled fields when you run the build.
Connecting a CMS or database later
Because pages read from small data-access functions (for example getProducts()), you can replace the static arrays with API or database calls without changing the page components.