Implementation:Langgenius Dify Next Config

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Build Configuration, DevOps
Last Updated	2026-02-12 07:00 GMT

Overview

Next.js configuration file that defines MDX support, remote image patterns, standalone output mode, redirects, production console removal, turbopack code inspector integration, and transpilation settings.

Description

The web/next.config.ts file is the central build and runtime configuration for the Dify Next.js application. It uses the typed NextConfig interface and is wrapped with createMDX to enable MDX file support with configurable remark and rehype plugin pipelines.

The configuration addresses several concerns. It sets output: 'standalone' to produce a self-contained deployment artifact suitable for Docker containers, where only the necessary files are bundled. The basePath is read from the NEXT_PUBLIC_BASE_PATH environment variable, allowing the application to be served under a URL prefix. Remote image patterns are dynamically constructed from either the NEXT_PUBLIC_WEB_PREFIX environment variable or localhost URLs, enabling the Next.js image optimization pipeline to fetch images from the correct origins. The transpilePackages array ensures that specific ESM-only dependencies (@t3-oss/env-core, @t3-oss/env-nextjs, echarts, zrender) are properly compiled, and esbuild is listed as a server external package. A root-to-/apps redirect ensures users land on the applications page. The production compiler configuration removes console.log and console.info statements while preserving console.warn and console.error. The turbopack section integrates the code-inspector-plugin for development-time source code location in the browser.

Usage

This file is read automatically by the Next.js build system and development server. Modify it when adding new transpile targets, changing the output mode, updating image domain allowlists, adjusting MDX plugin pipelines, or tuning production compiler behavior. Changes require a server restart to take effect.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/next.config.ts
Lines: 1-71

Signature

import type { NextConfig } from 'next'
import createMDX from '@next/mdx'
import { codeInspectorPlugin } from 'code-inspector-plugin'
import { env } from './env'

const isDev = env.NODE_ENV === 'development'
const withMDX = createMDX({ extension: /\.mdx?$/, options: { remarkPlugins: [], rehypePlugins: [] } })

const nextConfig: NextConfig = {
  basePath: env.NEXT_PUBLIC_BASE_PATH,
  serverExternalPackages: ['esbuild'],
  transpilePackages: ['@t3-oss/env-core', '@t3-oss/env-nextjs', 'echarts', 'zrender'],
  turbopack: { rules: codeInspectorPlugin({ bundler: 'turbopack' }) },
  productionBrowserSourceMaps: false,
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  images: { remotePatterns: [ /* dynamic from env */ ] },
  typescript: { ignoreBuildErrors: true },
  reactStrictMode: true,
  async redirects() {
    return [{ source: '/', destination: '/apps', permanent: false }]
  },
  output: 'standalone',
  compiler: { removeConsole: isDev ? false : { exclude: ['warn', 'error'] } },
  experimental: { turbopackFileSystemCacheForDev: false },
}

export default withMDX(nextConfig)

Import

// This file is not imported by application code.
// It is read by the Next.js CLI (next dev, next build, next start).
// To reference its effects, see the Next.js documentation for NextConfig.

I/O Contract

Inputs

Name	Type	Required	Description
env.NEXT_PUBLIC_BASE_PATH	string	No	URL base path prefix for the application (e.g., `/dify`)
env.NEXT_PUBLIC_WEB_PREFIX	string	No	Web prefix URL used to construct allowed remote image patterns
env.PORT	number	No	Development server port, used for localhost image URL patterns
env.NODE_ENV	string	Yes	Node environment: `development` or `production`; controls console removal and dev features

Outputs

Name	Type	Description
NextConfig	object	Complete Next.js configuration object consumed by the build system and development server
Standalone output	directory	Self-contained `.next/standalone` directory with all dependencies for Docker deployment
Redirects	array	HTTP 307 redirect from `/` to `/apps`
Image optimization	config	Remote patterns allowing Next.js Image component to optimize images from configured origins

Usage Examples

Building the Standalone Application

cd web
pnpm build
# Output is produced in .next/standalone/
# Deploy with: node .next/standalone/server.js

Setting a Custom Base Path

# In .env or environment:
NEXT_PUBLIC_BASE_PATH=/dify

# The application will be served under https://example.com/dify/
# All routes and assets will be prefixed accordingly.

Adding a New Transpile Package

// In web/next.config.ts, add to the transpilePackages array:
const nextConfig: NextConfig = {
  transpilePackages: [
    '@t3-oss/env-core',
    '@t3-oss/env-nextjs',
    'echarts',
    'zrender',
    'new-esm-package',  // Add new package here
  ],
  // ...
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment