Implementation:Langgenius Dify Root Layout

Knowledge Sources	Langgenius_Dify
Domains	Frontend, UI Framework
Last Updated	2026-02-12 07:00 GMT

Overview

Root Next.js layout component that wraps all application pages with the full provider hierarchy including PWA support, state management, theming, internationalization, error tracking, and query caching.

Description

The web/app/layout.tsx file defines the LocaleLayout async server component, which serves as the root layout for the entire Dify Next.js application. It is responsible for rendering the <html> and <body> elements, setting the document language based on server-side locale detection, loading the Instrument Serif font, and applying PWA metadata in the <head> section (manifest link, theme color, Apple touch icon, mobile web app capabilities).

The layout establishes a deeply nested provider tree that initializes core application infrastructure in a specific order: PWAProvider (service worker registration), JotaiProvider (atomic state management), ThemeProvider (dark/light/system theme switching via next-themes), NuqsAdapter (URL query state synchronization), BrowserInitializer (browser-specific setup), SentryInitializer (error tracking), TanstackQueryInitializer (server state and caching), I18nServerProvider (internationalization context), ToastProvider (notification system), and GlobalPublicStoreProvider (global application state). The RoutePrefixHandle component and ReactScanLoader devtool are also included at the PWA provider level.

The component also exports a viewport configuration that sets the page to device width with no user scaling, optimized for the application's responsive design constraints.

Usage

This layout is automatically applied by Next.js App Router to every page in the application. It should not be imported or rendered directly. To modify the global provider stack, edit this file. Any new application-wide context providers should be inserted into the appropriate position in the nesting hierarchy based on their dependency requirements.

Code Reference

Source Location

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

Signature

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

const LocaleLayout = async ({
  children,
}: {
  children: React.ReactNode
}) => {
  const locale = await getLocaleOnServer()
  const datasetMap = getDatasetMap()
  return (
    <html lang={locale ?? 'en'} className={cn('h-full', instrumentSerif.variable)} suppressHydrationWarning>
      ...
    </html>
  )
}

export default LocaleLayout

Import

// This is a root layout; it is not typically imported directly.
// Next.js App Router uses it automatically for all routes under web/app/.
import type { Viewport } from 'next'
import { Provider as JotaiProvider } from 'jotai'
import { ThemeProvider } from 'next-themes'
import { Instrument_Serif } from 'next/font/google'
import { NuqsAdapter } from 'nuqs/adapters/next/app'
import GlobalPublicStoreProvider from '@/context/global-public-context'
import { TanstackQueryInitializer } from '@/context/query-client'
import { getDatasetMap } from '@/env'
import { getLocaleOnServer } from '@/i18n-config/server'

I/O Contract

Inputs

Name	Type	Required	Description
children	React.ReactNode	Yes	Child page or nested layout components rendered by Next.js App Router
getLocaleOnServer()	Promise<string>	N/A (internal)	Async function that resolves the user's locale from server-side context (cookies/headers)
getDatasetMap()	Record<string, string>	N/A (internal)	Returns dataset attributes to spread onto the body element for environment identification

Outputs

Name	Type	Description
JSX.Element	React.ReactElement	Fully wrapped HTML document with all providers initialized and children rendered inside
viewport	Viewport	Exported viewport metadata used by Next.js for the meta viewport tag

Usage Examples

Default Application Page Rendering

// Next.js automatically wraps any page under web/app/ with this layout.
// For example, web/app/apps/page.tsx will be rendered as:
//
// <LocaleLayout>
//   <AppsPage />
// </LocaleLayout>
//
// No explicit import is needed. The provider hierarchy is available to all
// child components via their respective hooks:
//   - useAtom() from Jotai
//   - useTheme() from next-themes
//   - useQueryClient() from TanStack Query
//   - useTranslation() from I18nServerProvider

Provider Nesting Order

PWAProvider
  ReactScanLoader
  JotaiProvider
    ThemeProvider
      NuqsAdapter
        BrowserInitializer
          SentryInitializer
            TanstackQueryInitializer
              I18nServerProvider
                ToastProvider
                  GlobalPublicStoreProvider
                    {children}
  RoutePrefixHandle

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment