Mastering SEO with Next.js App 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.