Vercel Deployment
Relevant source files
The following files were used as context for generating this wiki page:
The AVP Supercars project is a Next.js application designed to run on the Vercel Platform. As a project bootstrapped with create-next-app, it leverages Vercel's native support for Next.js features, including optimized font loading and zero-configuration deployment workflows.
Sources: README.md:1-3, README.md:27-31
Framework and Build Configuration
The application is built using Next.js 16.1.6 and React 19.2.3. The deployment process on Vercel utilizes the standard Next.js build pipeline defined in the project's scripts.
Build Scripts
The project defines specific scripts in package.json that Vercel uses during the deployment lifecycle:
| Script | Command | Purpose |
|---|---|---|
dev | next dev | Local development server |
build | next build | Production build generation for Vercel |
start | next start | Starts the production server |
lint | eslint | Static code analysis |
Sources: package.json:5-10, package.json:13-14
TypeScript Configuration
The project uses TypeScript for type safety, with a configuration tailored for Next.js. The tsconfig.json includes the next plugin and ensures compatibility with Vercel's build environment by targeting ES2017.
Sources: tsconfig.json:3-20
Architecture and Asset Optimization
The deployment architecture focuses on performance through specific Vercel-integrated technologies.
Font Optimization
The project uses next/font to automatically optimize and load Geist, a font family specifically developed for Vercel. This reduces layout shift and improves loading performance by hosting the fonts on the same domain as the application.
Sources: README.md:21-23
Global Styling
Styles are managed via Tailwind CSS, integrated into the build pipeline. The configuration includes support for system-level dark mode preferences which are handled during the client-side rendering phase on the deployed platform.
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
Sources: app/globals.css:1-21
Deployment Workflow
The deployment follows a standard Git-integrated flow. When changes are pushed to the repository, Vercel initiates the build process.
The diagram shows the transition from local code changes to a live production environment on the Vercel Edge Network.
Sources: README.md:7-13, README.md:27-31, package.json:5-10
Metadata and SEO
The RootLayout defines the metadata used by Vercel's crawlers and social platforms to generate previews and index the site.
| Field | Value |
|---|---|
| Title | AVP Supercars — Source • Rent • Sales |
| Description | Luxury car rental, sales & sourcing. Delivered anywhere in Europe — 24/7. |
Sources: app/layout.tsx:7-10
Client-Side Interactivity
The application uses the framer-motion library for animations and the Next.js App Router for navigation. During deployment, Vercel optimizes these routes to ensure fast transitions between the Home, Fleet, Services, and Contact pages.
Sequence of Page Loading
This sequence illustrates the delivery of a page from the Vercel Edge to the user's browser, followed by client-side hydration for interactive elements.
Sources: app/page.tsx:1-5, app/layout.tsx:12-25, package.json:12
Summary
Vercel deployment for AVP Supercars is configured to use Next.js 16 features, including Geist font optimization and Tailwind CSS. The system relies on the next build command to generate a production-ready version of the site, which is then distributed globally via the Vercel Edge Network.