# Primary Technologies Used in NextChat: Next.js 14, TypeScript, and Tauri Stack Explained

> Discover the core technologies powering NextChat: Next.js 14, TypeScript, React, Zustand, and Tauri. Learn how this stack creates a powerful desktop and web AI chat experience.

- Repository: [NextChat/NextChat](https://github.com/ChatGPTNextWeb/NextChat)
- Tags: deep-dive
- Published: 2026-02-28

---

**NextChat is built on Next.js 14 with TypeScript 5.2, React 18, and Zustand for state management, packaged as a cross-platform desktop application via Tauri 2, and deployable on Vercel or Docker.**

The ChatGPTNextWeb/NextChat repository represents a modern, type-safe architecture designed for both web and desktop deployment. Understanding the primary technologies used in NextChat reveals how the application achieves server-side rendering, unified API proxying for multiple LLM providers, and seamless desktop packaging from a single React codebase.

## Core Framework and Language Stack

### Next.js 14 and React 18

At the foundation lies **Next.js 14**, providing the React-based SSR/SSG framework with built-in routing, image optimization, API routes, and incremental static regeneration. The application leverages the App Router architecture, with [`app/layout.tsx`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/layout.tsx) serving as the root layout that injects global configuration and analytics.

**React 18** powers the component-based UI, enabling concurrent features and automatic batching for state updates. The component library in `app/components/` utilizes React hooks and context for local state while delegating global state to Zustand.

### TypeScript 5.2 for Type Safety

Strict static typing is enforced via **TypeScript 5.2**, configured in [`tsconfig.json`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/tsconfig.json) with strict mode enabled. This guarantees type safety across both client and server code, particularly critical for the API proxy layer where request/response shapes vary across providers like OpenAI, Azure, and Anthropic.

## State Management and Data Validation

### Zustand for Global State

**Zustand 4** provides the minimalist global store architecture, avoiding the boilerplate of Redux while maintaining reactivity. The store (typically defined in [`app/store.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/store.ts) or similar) holds:

- Current chat sessions and conversation history
- Selected LLM model and provider settings
- UI state (sidebar visibility, theme preferences)

Components access this state via custom hooks like `useChatStore`, enabling efficient re-renders only when specific slices change.

### Zod for Schema Validation

Runtime type safety is reinforced with **Zod 3**, which validates configuration objects, user prompts, and API payloads. This is particularly important in [`app/config/server.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/config/server.ts) where environment variables are parsed and validated before application startup.

## UI and Styling Architecture

### SCSS Modules and Global Styles

The styling engine relies on **SCSS** with CSS Modules for locally-scoped component styles, preventing class name collisions. Global styles reside in [`app/styles/globals.scss`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/styles/globals.scss), defining:

- Theme color variables (dark/light mode)
- Animation utilities
- Markdown rendering and code highlighting styles

This approach enables consistent theming across the application while maintaining style isolation for individual components in `app/components/`.

## API Layer and Proxy Configuration

### Server-Side Configuration

The architecture centralizes environment handling in [`app/config/server.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/config/server.ts), which exports `getServerSideConfig()`. This function reads API keys, proxy URLs, and feature toggles from environment variables, returning a unified configuration object used by API routes.

```typescript
// Excerpt from app/config/server.ts
export const getServerSideConfig = () => {
  const isAzure = !!process.env.AZURE_URL;
  const apiKey = getApiKey(process.env.OPENAI_API_KEY);
  // …
  return { isAzure, apiKey, /* … */ };
};

```

### Proxy Rewrites for LLM Providers

All LLM provider requests route through `/api/proxy/*` endpoints defined in `next.config.mjs`. Rewrite rules forward requests to external endpoints while preserving authentication headers, enabling support for OpenAI, Azure, Google, Anthropic, and numerous other providers through a uniform interface.

```javascript
// Proxy rewrite for Azure – source: next.config.mjs
{
  source: "/api/proxy/azure/:resource_name/deployments/:deploy_name/:path*",
  destination: "https://:resource_name.openai.azure.com/openai/deployments/:deploy_name/:path*",
}

```

## Desktop and Deployment Technologies

### Tauri 2 for Cross-Platform Desktop

**Tauri 2** provides the Rust-based wrapper that packages the web UI as a native desktop application for Windows, macOS, and Linux. Configuration resides in [`src-tauri/tauri.conf.json`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/src-tauri/tauri.conf.json), while the React codebase remains unchanged between web and desktop builds.

Developers can trigger desktop builds via `yarn app:dev` (development) or `yarn app:build` (production), with Tauri commands exposed through `@tauri-apps/api` for native window controls.

```tsx
// Desktop window control via Tauri
import { appWindow } from "@tauri-apps/api/window";

export function CloseButton() {
  return (
    <button onClick={() => appWindow.close()}>✕</button>
  );
}

```

### Vercel Analytics and Docker Deployment

**Vercel Analytics** and **Speed Insights** provide real-time performance tracking when deployed on Vercel, implemented via `@vercel/analytics` and `@vercel/speed-insights` packages listed in [`package.json`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/package.json).

For self-hosting, **Docker** configuration in [`docker-compose.yml`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/docker-compose.yml) enables containerized deployment with environment variable injection for server-side configuration.

## Development and Testing Stack

### Build Tools and Testing Framework

The build pipeline utilizes **Yarn 1** for package management, **Webpack** (via Next.js), **PostCSS**, and **Sass** for asset processing. Development scripts in [`package.json`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/package.json) leverage **Concurrently** and **Cross-Env** for environment management, while **Watch** monitors file changes.

Testing is implemented via **Jest** and **React Testing Library**, configured in [`jest.config.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/jest.config.ts), covering core logic such as model-provider selection and vision capability checking.

## Summary

- **NextChat** is built on **Next.js 14** with **React 18** and **TypeScript 5.2**, providing a type-safe, server-rendered foundation.
- **Zustand 4** handles global state management, while **Zod 3** validates runtime schemas for configuration and API payloads.
- The UI uses **SCSS modules** for scoped styling and theming, with global styles defined in [`app/styles/globals.scss`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/styles/globals.scss).
- All LLM provider requests route through a unified proxy layer configured in `next.config.mjs`, with server-side configuration centralized in [`app/config/server.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/config/server.ts).
- **Tauri 2** packages the application as a cross-platform desktop app, while **Vercel Analytics** and **Docker** support web deployment.
- The development stack includes **Yarn**, **Webpack**, **Jest**, and **React Testing Library** for building and testing.

## Frequently Asked Questions

### What frontend framework does NextChat use?

NextChat uses **Next.js 14** as its primary frontend framework, built on top of **React 18**. This combination enables server-side rendering, static site generation, and the App Router architecture used throughout the application in files like [`app/layout.tsx`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/layout.tsx) and [`app/page.tsx`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/page.tsx).

### How does NextChat handle state management?

NextChat uses **Zustand 4** for global state management rather than Redux or Context API. The store typically resides in [`app/store.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/store.ts) and manages chat sessions, model settings, and UI state. Components access this state via hooks like `useChatStore`, enabling efficient updates without prop drilling.

### Can NextChat run as a desktop application?

Yes, NextChat can be packaged as a native desktop application using **Tauri 2**. The configuration in [`src-tauri/tauri.conf.json`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/src-tauri/tauri.conf.json) defines the Rust-based wrapper that embeds the web UI. Developers can build desktop versions using `yarn app:build` for Windows, macOS, and Linux while sharing the same React codebase with the web version.

### What testing framework does NextChat use?

NextChat uses **Jest** combined with **React Testing Library** for unit and integration testing. The configuration is defined in [`jest.config.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/jest.config.ts), and tests cover critical logic such as model provider selection, vision capability checking, and configuration validation. The test suite ensures type-safe operations across the TypeScript codebase remain stable during development.