Next.js & Technical SEO in 2026: The Architecture Behind Search-Ready Web Platforms

// Server Component: zero client bundle overhead
import { getArticleBySlug } from "@/lib/db";
import { Suspense } from "react";
import CommentsSection from "@/components/CommentsSection";

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  // Direct database query on the server — no client-side API waterfall
  const post = await getArticleBySlug(params.slug);

  return (
    <article className="max-w-4xl mx-auto py-16">
      <header>
        <span className="font-mono text-xs text-[#8D6BFF]">{post.category}</span>
        <h1 className="text-5xl font-medium tracking-tight mt-3">{post.title}</h1>
      </header>
      <div className="prose mt-8">{post.body}</div>

      {/* Streamed dynamic boundary without blocking initial HTML delivery */}
      <Suspense fallback={<div className="h-32 animate-pulse bg-white/5" />}>
        <CommentsSection slug={params.slug} />
      </Suspense>
    </article>
  );
}

import type { Metadata, ResolvingMetadata } from 'next';
import { getArticleBySlug } from '@/lib/db';

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

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const article = await getArticleBySlug(params.slug);
  if (!article) return { title: "Article Not Found | Cortinex" };

  const canonicalUrl = `https://www.cortinex-webstudio.com/blog/${article.slug}`;

  return {
    title: `${article.title} | Cortinex Intelligence`,
    description: article.description,
    alternates: {
      canonical: canonicalUrl,
    },
    openGraph: {
      title: article.title,
      description: article.description,
      url: canonicalUrl,
      type: 'article',
      publishedTime: article.publishedAt,
      modifiedTime: article.updatedAt,
      images: [{ url: article.heroImage, width: 1200, height: 630, alt: article.title }],
    },
    twitter: {
      card: 'summary_large_image',
      title: article.title,
      description: article.description,
      images: [article.heroImage],
    },
    robots: {
      index: !article.noIndex,
      follow: !article.noIndex,
      googleBot: {
        index: !article.noIndex,
        follow: !article.noIndex,
        'max-video-preview': -1,
        'max-image-preview': 'large',
        'max-snippet': -1,
      },
    },
  };
}

export default function ArticleJsonLd({ post }: { post: any }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "TechArticle",
    "mainEntityOfPage": `https://www.cortinex-webstudio.com/blog/${post.slug}`,
    "headline": post.title,
    "description": post.description,
    "image": post.heroImage,
    "datePublished": post.date,
    "dateModified": post.updatedAt || post.date,
    "author": {
      "@type": "Person",
      "name": post.author,
      "jobTitle": post.authorRole,
      "worksFor": { "@type": "Organization", "name": "Cortinex Web Studio" }
    },
    "publisher": {
      "@type": "Organization",
      "name": "Cortinex Web Studio",
      "logo": { "@type": "ImageObject", "url": "https://www.cortinex-webstudio.com/logo.png" }
    },
    "keywords": post.tags?.join(", ")
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}