v0.1.9: Fixing the Missing Viewport Meta Tag in Next.js 15

Control: MOB-01 · Category: viewport_meta

Background

Next.js 14 introduced a deliberate split in its App Router Metadata API: viewport configuration was extracted from the general metadata export into its own dedicated viewport export. This change was carried forward into Next.js 15.

Until v0.1.9, the root layout at src/app/layout.tsx used export const metadata for all head-level configuration but did not include a separate export const viewport. While Next.js may inject a default viewport meta tag in some configurations, the behaviour is not guaranteed across all versions and build targets — making it a latent mobile compatibility risk.

What was fixed

An explicit viewport export has been added to src/app/layout.tsx:

import type { Viewport } from 'next';

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

This produces the following meta tag in every rendered page:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Why this matters

Without explicit viewport export	With explicit viewport export
Relies on Next.js runtime defaults	Deterministic — always rendered
Behaviour may vary by Next.js version	Version-independent
Risk of broken mobile layouts	Correct scaling on all viewports
Intent is undocumented in code	Intent is clearly expressed in source

Mobile-first compliance screening

The sanctions screening dashboard is used by compliance officers who may access the platform from tablets or mobile devices in the field. A missing or incorrect viewport meta tag can cause:

Text and UI controls appearing too small to interact with
Horizontal scrolling on narrow viewports
Incorrect touch target sizing for interactive elements

By explicitly declaring the viewport, these failure modes are eliminated regardless of which Next.js patch version is deployed.

No breaking changes

This is a purely additive change. No existing functionality, routes, or components are modified. The only observable effect is the guaranteed presence of the viewport meta tag in rendered HTML.

Affected file

src/app/layout.tsx