Next.js has become the framework of choice for SEO-focused web applications. Its Server Components enable sending pure, fast HTML to search engine crawlers out of the box. However, achieving 100/100 Lighthouse scores and seamless indexation in Next.js 16 requires understanding its advanced APIs.
1. Working with Async Metadata
In Next.js 15 and 16, page properties like params are promises. If you have dynamic titles, you must write async dynamic metadata handlers:
// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
type Props = {
params: Promise<{ slug: string }>;
};
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
const post = await fetchPost(slug);
return {
title: `${post.title} | Blog`,
description: post.summary,
};
}
2. Crawlability and Route Structure
Ensure your route structure is logical and crawlers can discover links easily. Use Next's native Link component which automatically pre-fetches viewport links for blazing-fast navigation, keeping bounce rates low and engagement metrics strong.