Next.js SEO: App Router & Server Rendering Guide

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next';

type Props = { params: { slug: string } };

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const post = await fetchPost(params.slug);

  return {
    title: `${post.title} | WebKernelAI`,
    description: post.summary,
    alternates: { canonical: `/blog/${params.slug}` },
    openGraph: {
      title: post.title,
      description: post.summary,
      images: [post.featuredImage],
    },
  };
}

export default async function BlogPostPage({ params }: Props) {
  const post = await fetchPost(params.slug);
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'TechArticle',
    'headline': post.title,
    'description': post.summary,
    'datePublished': post.publishedAt,
    'author': { '@type': 'Organization', 'name': 'WebKernelAI' }
  };

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{post.title}</h1>
      {/* Content */}
    </article>
  );
}

<Image
  src="/hero-banner.webp"
  alt="Next.js SEO Framework Architecture"
  width={1200}
  height={630}
  priority // Disables lazy loading for instant LCP render
  className="rounded-2xl"
/>