Complete Next.js migration with SSR and Docker deployment

- Migrate from vanilla JavaScript SPA to Next.js 16 with App Router
- Add server-side rendering for all pages (Home, Compare, Rankings)
- Create individual school pages with dynamic routing (/school/[urn])
- Implement Chart.js and Leaflet map integrations
- Add comprehensive SEO with sitemap, robots.txt, and JSON-LD
- Set up Docker multi-service architecture (PostgreSQL, FastAPI, Next.js)
- Update CI/CD pipeline to build both backend and frontend images
- Fix Dockerfile to include devDependencies for TypeScript compilation
- Add Jest testing configuration
- Implement performance optimizations (code splitting, caching)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

nextjs-app/components/Navigation.tsx

@@ -0,0 +1,58 @@
+/**
+ * Navigation Component
+ * Main navigation header with active link highlighting
+ */
+
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useComparison } from '@/hooks/useComparison';
+import styles from './Navigation.module.css';
+
+export function Navigation() {
+  const pathname = usePathname();
+  const { selectedSchools } = useComparison();
+
+  const isActive = (path: string) => {
+    if (path === '/') {
+      return pathname === '/';
+    }
+    return pathname.startsWith(path);
+  };
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.container}>
+        <Link href="/" className={styles.logo}>
+          <span className={styles.logoIcon}>🏫</span>
+          <span className={styles.logoText}>SchoolCompare</span>
+        </Link>
+
+        <nav className={styles.nav}>
+          <Link
+            href="/"
+            className={isActive('/') ? `${styles.navLink} ${styles.active}` : styles.navLink}
+          >
+            Home
+          </Link>
+          <Link
+            href="/compare"
+            className={isActive('/compare') ? `${styles.navLink} ${styles.active}` : styles.navLink}
+          >
+            Compare
+            {selectedSchools.length > 0 && (
+              <span className={styles.badge}>{selectedSchools.length}</span>
+            )}
+          </Link>
+          <Link
+            href="/rankings"
+            className={isActive('/rankings') ? `${styles.navLink} ${styles.active}` : styles.navLink}
+          >
+            Rankings
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+}