Implementation:Langgenius Dify App Layout

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Layout, Next.js
Last Updated	2026-02-08 00:00 GMT

Overview

The root Next.js layout component that wraps the entire Dify frontend application with global providers, theme support, font loading, PWA capabilities, and environment configuration passed via HTML data attributes.

Description

LocaleLayout is the top-level async server component in the Next.js App Router hierarchy. It is responsible for:

Locale detection: Reads the server-side locale via getLocaleOnServer() and sets the lang attribute on the <html> element.
Font loading: Loads the Instrument Serif Google Font with both normal and italic styles and exposes it as a CSS variable (--font-instrument-serif).
Environment injection: Maps every DatasetAttr enum member to its corresponding NEXT_PUBLIC_* environment variable and spreads them as data-* attributes on the <body> element, making server-side environment values available to client-side code without exposing a global config object.
Provider tree: Establishes a deeply nested provider hierarchy in this order (outermost to innermost): PWAProvider, ReactScanLoader, JotaiProvider, ThemeProvider (next-themes), NuqsAdapter, BrowserInitializer, SentryInitializer, TanstackQueryInitializer, I18nServerProvider, ToastProvider, and GlobalPublicStoreProvider.
PWA and meta tags: Includes a manifest link, theme-color meta, apple-mobile-web-app meta tags, and favicon links for progressive web app support.
Viewport configuration: Exports a viewport object that sets device-width, disables user scaling, and uses cover viewport-fit.

Usage

This file is automatically used by Next.js as the root layout for the entire application. Every page in the /web/app directory inherits this layout. It should not be imported or rendered manually; Next.js invokes it as part of its App Router rendering pipeline.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/app/layout.tsx
Lines: 1-131

Signature

// Viewport configuration export
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  viewportFit: 'cover',
  userScalable: false,
}

// Root layout component (async server component)
const LocaleLayout: ({
  children,
}: {
  children: React.ReactNode
}) => Promise<JSX.Element>

export default LocaleLayout

Import

// This is a root layout and is not directly imported.
// Next.js App Router automatically uses it as the layout for all pages under /web/app.

I/O Contract

Inputs

Name	Type	Required	Description
children	`React.ReactNode`	Yes	Child page components rendered by the Next.js App Router

The component also reads the following from the server environment:

Name	Type	Required	Description
NEXT_PUBLIC_API_PREFIX	`string`	No	API prefix URL injected as `data-api-prefix`
NEXT_PUBLIC_PUBLIC_API_PREFIX	`string`	No	Public API prefix URL
NEXT_PUBLIC_MARKETPLACE_API_PREFIX	`string`	No	Marketplace API prefix URL
NEXT_PUBLIC_MARKETPLACE_URL_PREFIX	`string`	No	Marketplace URL prefix
NEXT_PUBLIC_EDITION	`string`	No	Application edition identifier
NEXT_PUBLIC_SENTRY_DSN	`string`	No	Sentry DSN for error monitoring
NEXT_PUBLIC_MAINTENANCE_NOTICE	`string`	No	Maintenance notice text displayed as a banner

Outputs

Name	Type	Description
JSX.Element	`<html>`	Complete HTML document skeleton with all providers, meta tags, and child content

Usage Examples

// This component is used automatically by Next.js App Router.
// Any page at web/app/**/page.tsx is rendered inside this layout.
//
// For example, a page component:
// web/app/dashboard/page.tsx
export default function DashboardPage() {
  return <div>Dashboard content rendered inside LocaleLayout</div>
}

// The resulting HTML will include:
// <html lang="en" class="h-full --font-instrument-serif">
//   <head>...</head>
//   <body class="color-scheme h-full select-auto" data-api-prefix="..." data-public-edition="...">
//     <PWAProvider>
//       ... (provider chain) ...
//       <GlobalPublicStoreProvider>
//         <div>Dashboard content rendered inside LocaleLayout</div>
//       </GlobalPublicStoreProvider>
//     </PWAProvider>
//   </body>
// </html>

Related Pages

Langgenius_Dify_Global_Public_Context - GlobalPublicStoreProvider used as innermost provider in the layout
Langgenius_Dify_Feature_Types - Defines DatasetAttr enum used for data attribute mapping
Langgenius_Dify_App_Context - Application context provider mounted below this layout

Page Connections

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

Principle

Implementation

Heuristic

Environment