Next.js App Router Technical SEO: Architecture & Implementation Specification

import type { Metadata, Viewport } from 'next'
import './globals.css'

export const metadataBase = new URL(
  process.env.NEXT_PUBLIC_SITE_URL || 'https://www.brivtools.com'
)

// Viewport directives isolated from primary metadata object
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#0f172a' },
  ],
  colorScheme: 'dark light',
}

export const metadata: Metadata = {
  title: {
    template: '%s | BrivTools Engineering',
    default: 'BrivTools | High-Performance Web Development Utilities',
  },
  description:
    'Benchmarked web utilities, performance analyzers, and technical App Router implementation engines.',
  metadataBase,
  alternates: {
    canonical: './',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  openGraph: {
    type: 'website',
    locale: 'en_US',
    siteName: 'BrivTools',
    title: 'BrivTools | Modern Web Engineering',
    description:
      'Engineered utilities and architectural benchmarks for production applications.',
  },
  twitter: {
    card: 'summary_large_image',
    creator: '@brivtools',
  },
}

import type { Metadata, ResolvingMetadata } from 'next'
import { notFound } from 'next/navigation'
import { cache } from 'react'

interface DynamicRouteProps {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

// React cache() deduplicates fetches across generateMetadata & Page render
const getToolRecord = cache(async (slug: string) => {
  return await db.tools.findUnique({ where: { slug } })
})

export async function generateMetadata(
  { params }: DynamicRouteProps,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { slug } = await params
  const tool = await getToolRecord(slug)

  if (!tool) {
    return { title: 'Tool Not Found', robots: { index: false, follow: false } }
  }

  const parentResolved = await parent
  const parentImages = parentResolved.openGraph?.images || []

  return {
    title: tool.title,
    description: tool.description,
    alternates: { canonical: `/tools/${slug}` },
    openGraph: {
      title: tool.title,
      description: tool.description,
      type: 'article',
      url: `/tools/${slug}`,
      images: [`/og/tools/${slug}.png`, ...parentImages],
    },
  }
}

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://www.brivtools.com'
  const tools = await fetchActiveTools()

  const toolEntries: MetadataRoute.Sitemap = tools.map((record) => ({
    url: `${baseUrl}/tools/${record.slug}`,
    lastModified: new Date(record.updatedAt),
    changeFrequency: 'weekly',
    priority: 0.8,
  }))

  const coreEntries: MetadataRoute.Sitemap = [
    { url: baseUrl, lastModified: new Date(), changeFrequency: 'daily', priority: 1.0 },
    { url: `${baseUrl}/tools`, lastModified: new Date(), changeFrequency: 'daily', priority: 0.9 },
  ]

  return [...coreEntries, ...toolEntries]
}

import Link from 'next/link'

export function InternalNavGrid() {
  return (
    <nav aria-label="Related Engineering Tools" className="mt-8 border-t border-slate-200 pt-6">
      <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wider mb-3">
        Related Performance Utilities
      </h3>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <Link
          href="/tools/bundle-analyzer"
          prefetch={true}
          className="p-3.5 rounded-xl border border-slate-200 hover:border-indigo-600 transition-colors bg-slate-50/50"
        >
          <div className="font-semibold text-xs text-indigo-600">JavaScript Bundle Analyzer</div>
          <p className="text-[11px] text-slate-500 mt-1">Inspect compilation weight and tree-shaking efficiency.</p>
        </Link>
        <Link
          href="/tools/metadata-generator"
          prefetch={true}
          className="p-3.5 rounded-xl border border-slate-200 hover:border-indigo-600 transition-colors bg-slate-50/50"
        >
          <div className="font-semibold text-xs text-indigo-600">Metadata & Schema Synthesizer</div>
          <p className="text-[11px] text-slate-500 mt-1">Generate type-safe Open Graph definitions and JSON-LD graphs.</p>
        </Link>
      </div>
    </nav>
  )
}