Deployment Guide

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• next.config.ts
• package.json
• src/app/layout.tsx
• src/app/page.tsx
• tsconfig.json
• src/app/globals.css

This guide provides instructions and information for deploying the TAF-SAF application. The project is a Next.js application bootstrapped with create-next-app. The primary and recommended deployment method is using the Vercel platform, which is tightly integrated with Next.js. However, self-hosting options are also available by running the production build on a Node.js server.

The application utilizes Next.js 15, React 19, and TypeScript. The build process compiles the TypeScript code, bundles assets, and optimizes the application for production. This includes font optimization with next/font for the Geist font family and CSS processing with Tailwind CSS.

Sources: README.md, package.json:11-12, src/app/layout.tsx:2,5-13

Build Process

Before deployment, the application must be built for production. This process is handled by a script defined in package.json.

Sources: package.json:7

Build Command

To create a production-ready build, run the following command from the project's root directory:

npm run build

This command executes next build, which performs several key steps:

1. Compiles TypeScript files (.ts, .tsx) into JavaScript, according to the rules in tsconfig.json.
2. Bundles React components and other modules.
3. Optimizes static assets like images and fonts. The project specifically uses next/font to optimize the Geist font.
4. Processes CSS files, including Tailwind CSS directives found in globals.css.
5. Generates static HTML files for pages where possible and prepares server-side components.
6. Creates an optimized production build in the .next directory.

Sources: package.json:7, tsconfig.json, src/app/layout.tsx:2,5-13, src/app/globals.css:1

The following diagram illustrates the high-level build process.

This diagram shows the steps initiated by the npm run build command, resulting in the production-ready .next folder.
Sources: package.json:7, tsconfig.json, src/app/globals.css:1, src/app/layout.tsx:5-13

Deployment Options

There are two primary ways to deploy the TAF-SAF application: using the Vercel platform or self-hosting the production build.

Vercel Deployment (Recommended)

Vercel is the recommended platform for deploying Next.js applications, as stated in the project's README.md. It offers a seamless deployment experience with automatic builds and deployments triggered by Git pushes.

The project's main page includes a "Deploy now" button that links directly to Vercel's new project flow, pre-configured for this application.

Sources: README.md:30-32, src/app/page.tsx:38-49

The deployment flow on Vercel is as follows:

This sequence diagram shows how a git push triggers an automated build and deployment on the Vercel platform.
Sources: README.md:30-32, package.json:7

Self-Hosting

To deploy the application on your own server (e.g., a VPS or a container), you first need to run the build process as described above. After the build is complete, you can start the production server using the start script.

Start Command:

npm run start

This command executes next start, which starts a Node.js server to serve the application from the .next build directory. This is intended for production use after a successful npm run build.

Sources: package.json:8

Configuration

Key configuration files influence the build and deployment process.

Package Scripts

The package.json file defines the core scripts for development, building, and running the application.

Script	Command	Description
dev	next dev --turbopack	Runs the development server with Turbopack for fast refresh.
build	next build	Creates an optimized production build of the application.
start	next start	Starts the production server. Requires a build to be run first.
lint	next lint	Runs ESLint to find and fix problems in the codebase.

Sources: package.json:5-9

Next.js Configuration

The next.config.ts file is where you can customize the Next.js build and runtime behavior. In this project, the file is currently empty, meaning the application uses default Next.js settings. Any future build or deployment-specific customizations should be added here.

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

Sources: next.config.ts:1-7

TypeScript Configuration

The tsconfig.json file configures the TypeScript compiler. The next build command respects this configuration. Key settings include:

• "target": "ES2017": Specifies the ECMAScript target version.
• "module": "esnext": Specifies module code generation.
• "jsx": "preserve": Preserves JSX for the Next.js compiler to handle.
• "paths": { "@/*": ["./src/*"] }: Defines a path alias for easier module imports.

Sources: tsconfig.json:2-22

Summary

The TAF-SAF project is configured for straightforward deployment. The recommended path is to use the Vercel platform for its tight integration with Next.js and automated deployment pipeline. For users who require more control or wish to use their own infrastructure, a self-hosting option is available by building the project with npm run build and running the production server with npm run start. All necessary scripts and basic configurations are provided within the repository.