Mastering SEO with Next.js App Router
March 1, 2026
8 min read
By Rejish Khanal
Next.jsSEOAEOGEOWeb DevelopmentReactApp Router
Search Engine Optimization (SEO) has evolved dramatically with the rise of AI-powered search engines. In 2026, traditional SEO alone is not enough — you need to optimize for Answer Engine Optimization (AEO) and Generative Engine Optimization (GEO) as well.
## Why Next.js is Perfect for SEO
Next.js App Router provides server-side rendering (SSR) and static site generation (SSG) out of the box. Every page is pre-rendered, meaning search engine bots can crawl and index your content without executing JavaScript.
## Metadata API
Next.js provides a powerful Metadata API that lets you define meta tags declaratively:
```tsx
export const metadata: Metadata = {
title: 'My Page Title',
description: 'My page description',
alternates: { canonical: '/my-page' },
};
```
## Dynamic Metadata with generateMetadata
For dynamic pages like blog posts, use `generateMetadata` to fetch data and build SEO metadata per page:
```tsx
export async function generateMetadata({ params }) {
const post = await getBlogPost(params.slug);
return {
title: post.title,
description: post.excerpt,
alternates: { canonical: `/blog/${params.slug}` },
};
}
```
## Structured Data (Schema.org)
Structured data helps search engines understand your content. For blog posts, use the `Article` schema:
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Your Article Title",
"author": { "@type": "Person", "name": "Author Name" }
}
```
## Canonical URLs
Always set canonical URLs to prevent duplicate content issues. In Next.js, use the `alternates.canonical` field in your metadata.
## Conclusion
By combining Next.js's built-in SEO features with structured data, canonical URLs, and optimized metadata, you can build highly rankable web applications that perform well in both traditional and AI-powered search engines.