All Docs
FeaturesCalmony Sanctions MonitorUpdated March 11, 2026

Ensuring Correct Mobile Rendering: Explicit Viewport Export in Next.js 15

Ensuring Correct Mobile Rendering: Explicit Viewport Export in Next.js 15

Release: v0.1.14 · Control: MOB-01 · Category: viewport_meta

Overview

As of v0.1.14, the root layout (src/app/layout.tsx) now includes an explicit viewport export. This is a targeted fix to guarantee that the width=device-width, initial-scale=1 viewport meta tag is always rendered correctly, regardless of Next.js version or deployment environment.

Background

Next.js 14 introduced a split between the metadata and viewport configuration APIs. Prior to this fix, the root layout only used export const metadata and had no dedicated export const viewport. This meant viewport behaviour was implicitly delegated to Next.js framework defaults.

While Next.js may inject a default viewport meta tag in many configurations, the absence of an explicit declaration creates the following risks:

  • Version sensitivity: Behaviour differs across Next.js minor and patch versions.
  • Configuration sensitivity: Custom server or middleware configurations may suppress default injection.
  • Auditability: Without an explicit export, it is impossible to confirm from the source code alone that the viewport tag is present — important for compliance and accessibility audits.

For a platform used by UK compliance teams on a range of devices, reliable mobile viewport rendering is a baseline requirement.

What Changed

File: src/app/layout.tsx

A Viewport type import and viewport export were added alongside the existing metadata export:

import type { Viewport } from 'next';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
};

Before

The root layout exported metadata only. Viewport meta tag rendering depended on Next.js internal defaults.

After

The root layout exports both metadata and viewport. The viewport meta tag is explicitly declared in source, rendering reliably in all environments.

Impact

AreaDetail
Mobile renderingwidth=device-width, initial-scale=1 is guaranteed in the rendered HTML
Cross-version stabilityNo dependency on Next.js default injection behaviour
AccessibilityCorrect scaling behaviour for users relying on browser zoom or assistive tech
AuditabilityViewport intent is explicit and reviewable in source control

No Action Required

This change is applied at the framework layout level and requires no configuration from operators or end users. All pages in the application inherit the root layout and benefit automatically.