Configuration
Relevant source files
The following files were used as context for generating this wiki page:Configuration for the Grapevine website is managed across several key files, governing aspects from project dependencies and build scripts to site-wide metadata, SEO, routing, and static content. The system relies on a central siteConfig object for SEO and metadata, while other configurations like dependencies, sitemap, and navigation links are defined in their respective dedicated files.
This decentralized approach allows for clear separation of concerns, where different types of configuration are handled in contextually appropriate locations within the Next.js project structure.
Project & Build Configuration
This section covers the configuration related to the project's setup, dependencies, and build processes.
Sources: package.json, README.md
Package Management
The package.json file defines the project's metadata, dependencies, and scripts for development, building, and maintenance.
Sources: package.json:1-3
Scripts
The following scripts are available to manage the application lifecycle.
| Command | Description |
|---|---|
npm run dev | Starts the Next.js development server. |
npm run build | Builds the application for production. |
npm run start | Starts the production server after a build. |
npm run lint | Runs the ESLint linter to check for code quality issues. |
npm run format | Formats code across the project using Prettier. |
npm run format:check | Checks code formatting without making changes. |
Sources: package.json:5-11
Dependencies
The project relies on the following key libraries:
| Dependency | Version | Description |
|---|---|---|
next | 16.0.3 | The React framework for building the application. |
react | 19.2.0 | The library for building user interfaces. |
tailwindcss | ^4 | A utility-first CSS framework for styling. |
framer-motion | ^12.23.24 | A library for animations. |
lucide-react | ^0.554.0 | A library for icons. |
clsx | ^2.1.1 | A utility for constructing className strings conditionally. |
tailwind-merge | ^3.4.0 | A utility to merge Tailwind CSS classes without style conflicts. |
Sources: package.json:13-19
Project Structure
The README.md file outlines the recommended directory structure for organizing the codebase.
The diagram below illustrates the main directories and their purposes.
Sources: README.md:31-37
Site-wide Metadata & SEO
The application's metadata and SEO settings are primarily configured in lib/seo.ts and applied in the root layout. This includes site identity, social media sharing details, and structured data schemas.
Sources: lib/seo.ts, app/layout.tsx
Main Site Configuration
The siteConfig object in lib/seo.ts is the central source of truth for most site-wide metadata.
| Key | Description | Value Example |
|---|---|---|
name | The name of the site. | "Grapevine" |
description | The default site description for SEO. | "Grapevine detects gaps..." |
url | The base URL of the application, sourced from process.env.NEXT_PUBLIC_APP_URL. | "https://grapevine.travel" |
ogImage | Path to the default Open Graph image. | "/images/og-image.png" |
xHandle | The site's handle on X (formerly Twitter). | "grapevine_trvl" |
linkedInUrl | The URL for the company's LinkedIn page. | "https://www.linkedin.com/company/grapevinetravel" |
locale | The site's locale. | "en_GB" |
keywords | An array of default keywords for SEO. | ["travel management", ...] |
Sources: lib/seo.ts:1-16
Root Layout Configuration
The root layout at app/layout.tsx consumes siteConfig to populate the application's default <head> tags, including metadata for Open Graph, Twitter, icons, and the web manifest.
The metadata object configures the following:
- Title: Sets a default title and a template for page-specific titles.
- Open Graph: Configures
og:type,og:url,og:title,og:description, andog:imagefor social sharing. - Twitter: Configures Twitter card metadata, including
card,title,description, andcreator. - Icons: Defines paths for
favicon.ico,apple-touch-icon.png, and others. - Manifest: Links to the
site.webmanifestfile. - Fonts: It also configures the custom "Ambit" font using
next/font/local.
Sources: app/layout.tsx:10-19, app/layout.tsx:90-136
Schema.org Structured Data
The lib/seo.ts file includes functions to generate various Schema.org JSON-LD objects. This structured data helps search engines understand the content and context of the site's pages.
The following schema types can be generated:
OrganizationWebPageWebSiteFAQPageSoftwareApplicationBreadcrumbListServiceContactPageAboutPage
Sources: lib/seo.ts:18-87
The generateOrganizationSchema function constructs a schema object with details about the company. The process is visualized below.
Sources: lib/seo.ts:90-109
The structure of the OrganizationSchema interface is defined as follows.
Sources: lib/seo.ts:18-31
Routing & Navigation
Configuration for the site's structure and navigation links is handled through sitemap generation and hardcoded link arrays in components.
Sitemap Generation
The app/sitemap.ts file exports a function that generates a sitemap.xml file for the site. It defines a list of routes with their respective lastModified date, changeFrequency, and priority. The final URLs are constructed by prepending the siteConfig.url.
The following routes are included in the sitemap:
| URL | Change Frequency | Priority |
|---|---|---|
/ | weekly | 1 |
/about | monthly | 0.8 |
/product | weekly | 0.9 |
/tmcs | weekly | 0.9 |
/corporate | weekly | 0.9 |
/resources | weekly | 0.7 |
/contact | monthly | 0.8 |
/policy/privacy | yearly | 0.3 |
/policy/cookies | yearly | 0.3 |
/policy/terms | yearly | 0.3 |
Sources: app/sitemap.ts:4-56
Navigation Links
Navigation links, particularly for the footer, are configured as hardcoded arrays of objects within the Footer component.
Footer Links
The footer contains three groups of links: Platform, Company, and Legal.
| Group | Link Label | Href |
|---|---|---|
| Platform | Corporate | /corporate |
| TMCs | /tmcs | |
| Product | /product | |
| Company | About us | /about |
| Contact | /contact | |
| Legal | Privacy Policy | /policy/privacy |
| Cookies Policy | /policy/cookies |
Sources: components/footer.tsx:10-22
Contact Form Configuration
The contact form at components/contact-form.tsx has a statically configured dropdown menu for the "I am a" field.
The available options are:
- TMC
- Corporate
- Investor
- Other
Sources: components/contact-form.tsx:210-223
Static Content & Legal Information
Key company information is statically configured within the content of the policy pages and the footer component.
Company Information
The following company details are consistently defined across the application.
| Information | Value | Source File(s) |
|---|---|---|
| Company Name | Your Grapevine Ltd | app/policy/privacy/page.tsx |
| Contact Email | info@grapevine.travel | app/policy/privacy/page.tsx, components/footer.tsx |
| Registered Address | Claremont, Common Lane, Burnham, Bucks SL1 8PP | app/policy/privacy/page.tsx |
| Office Address | Soho Works White City, 17 Top Wood Lane, London, W12 7RR | components/footer.tsx |
| Data Protection Officer | Jack Dow | app/policy/privacy/page.tsx |
| ICO Registration | ZA496205 | app/policy/privacy/page.tsx |
Sources: app/policy/privacy/page.tsx:28-40, components/footer.tsx:50-61