Formatting Dates, Numbers, and Plurals by Locale
Use the Intl APIs to render locale-correct dates, currencies, and pluralized strings.
Why Locale-Aware Formatting Matters
A date like 06/07/2025 means June 7th to an American, but July 6th to a European. A number like 1.234 is one thousand two hundred thirty-four in the US, but one point two three four in Germany.
Hard-coding format logic breaks your app for international users. Instead, the browser and Node.js both ship the Intl namespace — a standards-based set of APIs that handle locale-aware formatting with zero third-party libraries.
Intl.DateTimeFormat— formats dates and timesIntl.NumberFormat— formats numbers, currencies, and unitsIntl.PluralRules— selects the correct plural form
In a Next.js 15 App Router project these run on the server (in Server Components and Server Actions) as well as on the client, so you get consistent output without shipping extra JavaScript.
Detecting the Active Locale in App Router
Next.js 15 with the App Router stores the active locale in the URL segment. A common convention is /en/dashboard or /de/dashboard. Your layout.tsx receives a params prop that contains it.
The snippet below shows how to read params.locale in an async Server Component and pass it down to formatting helpers.
// app/[locale]/layout.tsx
import { ReactNode } from 'react';
interface Props {
children: ReactNode;
params: Promise<{ locale: string }>;
}
export default async function LocaleLayout({ children, params }: Props) {
const { locale } = await params; // e.g. 'en', 'de', 'tr'
return (
<html lang={locale}>
<body>{children}</body>
</html>
);
}All lessons in this course
- Locale Detection and Subpath Routing with Middleware
- Server-Side Translation Loading and Message Catalogs
- Localized Metadata, Sitemaps, and hreflang
- Formatting Dates, Numbers, and Plurals by Locale