Building a NewsDetailPage in Next.js 15.5+ (App Router + TypeScript)

Next.js 15 introduced a few important changes to the App Router and how route params are typed. If you’re using TypeScript and the App Router, you’ll likely see a new helper called PageProps which gives you strongly-typed params and searchParams from your route literal — and you may also need to await params inside async pages because route params can be asynchronous in v15+. Here’s a compact, practical NewsDetailPage example and a plain explanation of why it works. Example: app/news/[id]/page.tsx

import { notFound } from 'next/navigation';
import DetailsNews from '@/components/DetailsNews';
import { getNewsById } from '@/lib/news';
type Props = PageProps<'/news/[id]'>;
export default async function NewsDetailPage({ params }: Props) {
 // In Next.js 15+, route params can be async - await them for type safety
 const { id } = await params;
// Fetch article details from your backend or API
 const news = await getNewsById(id);
 if (!news) return notFound(); // Renders the default 404 page
// Render the News detail component
 return <DetailsNews news={news} />;
}

1. Dynamic route setup The file path app/news/[id]/page.tsx tells Next.js that this page is dynamic. When a user visits /news/15, the [id] part becomes params.id. Next.js automatically passes that value into your page’s props.
2. PageProps<'/news/[id]'> type PageProps is a helper type introduced in Next.js 15 to provide automatic type inference for route parameters and search params.

When you declare:

type Props = PageProps<'/news/[id]'>;

TypeScript knows:

params: { id: string }; searchParams: Record<string, string | string[] | undefined>;

That means no more guessing or manual typing — everything stays in sync with your route structure. 3. Why use await params? In Next.js 15+, params can be asynchronously resolved, especially when using features like generateStaticParams or dynamic segment functions.

So, await params ensures TypeScript and runtime both handle the value safely:

 If you skip the await, you might see type errors like:
“Property ‘id’ does not exist on type ‘Promise<PageParams>’”

This small change keeps your page compatible with future versions of Next.js.
4. Fetching the data

const news = await getNewsById(id);

You can replace this function with any real data source:

REST API (fetch('/api/news/123'))
GraphQL
Database query (Prisma, MongoDB, etc.If the news article isn’t found, we return notFound() — a built-in Next.js function that automatically renders a 404 page.
5. Rendering the page
Finally, we pass the loaded data into a presentation component:

return <DetailsNews news={news} />;

Learn More About Me & My Work

Medium: Building a NewsDetailPage in Next.js 15

Stack Overflow: Thon Hourn

Personal Portfolio: hornthorn.vercel.app

GitHub: thon1525

KhmerCoder: @thorn