Vercel Deployment Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The Vercel Deployment Configuration for this project leverages the Next.js framework to provide a seamless transition from a local development environment to a production-ready cloud environment. The project is specifically bootstrapped with create-next-app and optimized for the Vercel Platform, which provides automated infrastructure for building and serving the interactive macOS-style portfolio.
Deployment is primarily handled through the Vercel Platform's integration with Git, allowing for automatic builds and deployments when changes are pushed to the repository. The configuration ensures that features like font optimization, internationalization, and static asset serving are handled efficiently by Vercel's edge network.
Sources: README.md:1-3, README.md:28-32
Framework and Runtime Configuration
The project utilizes Next.js 15, which introduces specific conventions and breaking changes compared to previous versions. The deployment runtime is built around the Next.js App Router, requiring strict adherence to file-system-based routing and Server Components.
Build and Execution Scripts
Vercel uses the standard npm scripts defined in package.json to manage the build lifecycle.
| Script | Command | Purpose |
|---|---|---|
dev | next dev | Local development server |
build | next build | Production build preparation for Vercel |
start | next start | Production server execution |
lint | biome check | Code quality verification during CI |
Sources: package.json:6-12, AGENTS.md:1-5
Dependency Management
The deployment environment must resolve specific React 19 and Next.js 15 dependencies. The package.json specifies version 16.2.9 for Next.js (though referred to as a "breaking change" version in documentation) and 19.2.4 for React.
Sources: package.json:15-20, AGENTS.md:3-4
Asset and Font Optimization
The configuration utilizes next/font to automatically optimize and load the "Geist" font family, a specialized font developed for Vercel. This optimization occurs during the build step on Vercel's servers, reducing Layout Shift by pre-loading font files.
The application initializes these fonts within the RootLayout and injects them as CSS variables (--font-geist-sans and --font-geist-mono) into the HTML document.
Sources: app/layout.tsx:7-13, README.md:22-24
Internationalization and Localization
Deployment on Vercel supports the project's multi-language capabilities through next-intl. The configuration determines the document direction (rtl or ltr) based on the detected locale at runtime.
Locale Handling Flow
The deployment environment must support the execution of getLocale() from next-intl/server to correctly render the initial HTML state.
Development and Build Quality Standards
The project uses Biome for linting and formatting instead of ESLint, which must be accounted for in the deployment pipeline to ensure code consistency.
- VCS Integration: The build process recognizes Git as the version control system.
- Ignored Files: The build process ignores
node_modules,.next,dist, andbuilddirectories during processing. - TypeScript Configuration: The compiler target is set to
ES2017withmoduleResolutionset tobundlerto match modern Vercel deployment requirements.
Sources: biome.json:3-10, tsconfig.json:3-12
Summary of Deployment Components
The project structure is optimized for Vercel's hosting architecture, combining static generation with dynamic server-side logic for localization.
| Component | Implementation File | Role in Deployment |
|---|---|---|
| Next Config | next.config.ts | Overrides default Next.js behavior |
| Global Styles | app/globals.css | Tailwind 4 and Shadcn CSS variables |
| Metadata | app/layout.tsx | SEO and document header configuration |
| Testing | vitest.config.ts | Unit testing environment (node) |
Sources: app/layout.tsx:15-17, app/globals.css:1-5, vitest.config.ts:3-7