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/PerformanceChart.tsx

@@ -0,0 +1,205 @@
+/**
+ * PerformanceChart Component
+ * Displays school performance data over time using Chart.js
+ */
+
+'use client';
+
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartOptions,
+} from 'chart.js';
+import type { SchoolResult } from '@/lib/types';
+import styles from './PerformanceChart.module.css';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+interface PerformanceChartProps {
+  data: SchoolResult[];
+  schoolName: string;
+}
+
+export function PerformanceChart({ data, schoolName }: PerformanceChartProps) {
+  // Sort data by year
+  const sortedData = [...data].sort((a, b) => a.year - b.year);
+  const years = sortedData.map(d => d.year.toString());
+
+  // Prepare datasets
+  const datasets = [
+    {
+      label: 'RWM Expected %',
+      data: sortedData.map(d => d.rwm_expected_pct),
+      borderColor: 'rgb(59, 130, 246)',
+      backgroundColor: 'rgba(59, 130, 246, 0.1)',
+      tension: 0.3,
+    },
+    {
+      label: 'RWM Higher %',
+      data: sortedData.map(d => d.rwm_high_pct),
+      borderColor: 'rgb(16, 185, 129)',
+      backgroundColor: 'rgba(16, 185, 129, 0.1)',
+      tension: 0.3,
+    },
+    {
+      label: 'Reading Progress',
+      data: sortedData.map(d => d.reading_progress),
+      borderColor: 'rgb(245, 158, 11)',
+      backgroundColor: 'rgba(245, 158, 11, 0.1)',
+      tension: 0.3,
+      yAxisID: 'y1',
+    },
+    {
+      label: 'Writing Progress',
+      data: sortedData.map(d => d.writing_progress),
+      borderColor: 'rgb(139, 92, 246)',
+      backgroundColor: 'rgba(139, 92, 246, 0.1)',
+      tension: 0.3,
+      yAxisID: 'y1',
+    },
+    {
+      label: 'Maths Progress',
+      data: sortedData.map(d => d.maths_progress),
+      borderColor: 'rgb(236, 72, 153)',
+      backgroundColor: 'rgba(236, 72, 153, 0.1)',
+      tension: 0.3,
+      yAxisID: 'y1',
+    },
+  ];
+
+  const chartData = {
+    labels: years,
+    datasets,
+  };
+
+  const options: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'index' as const,
+      intersect: false,
+    },
+    plugins: {
+      legend: {
+        position: 'top' as const,
+        labels: {
+          usePointStyle: true,
+          padding: 15,
+          font: {
+            size: 12,
+          },
+        },
+      },
+      title: {
+        display: true,
+        text: `${schoolName} - Performance Over Time`,
+        font: {
+          size: 16,
+          weight: 'bold',
+        },
+        padding: {
+          bottom: 20,
+        },
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        padding: 12,
+        titleFont: {
+          size: 14,
+        },
+        bodyFont: {
+          size: 13,
+        },
+        callbacks: {
+          label: function(context) {
+            let label = context.dataset.label || '';
+            if (label) {
+              label += ': ';
+            }
+            if (context.parsed.y !== null) {
+              if (context.dataset.yAxisID === 'y1') {
+                // Progress scores
+                label += context.parsed.y.toFixed(1);
+              } else {
+                // Percentages
+                label += context.parsed.y.toFixed(1) + '%';
+              }
+            }
+            return label;
+          }
+        }
+      },
+    },
+    scales: {
+      y: {
+        type: 'linear' as const,
+        display: true,
+        position: 'left' as const,
+        title: {
+          display: true,
+          text: 'Percentage (%)',
+          font: {
+            size: 12,
+            weight: 'bold',
+          },
+        },
+        min: 0,
+        max: 100,
+        grid: {
+          color: 'rgba(0, 0, 0, 0.05)',
+        },
+      },
+      y1: {
+        type: 'linear' as const,
+        display: true,
+        position: 'right' as const,
+        title: {
+          display: true,
+          text: 'Progress Score',
+          font: {
+            size: 12,
+            weight: 'bold',
+          },
+        },
+        grid: {
+          drawOnChartArea: false,
+        },
+      },
+      x: {
+        grid: {
+          display: false,
+        },
+        title: {
+          display: true,
+          text: 'Year',
+          font: {
+            size: 12,
+            weight: 'bold',
+          },
+        },
+      },
+    },
+  };
+
+  return (
+    <div className={styles.chartWrapper}>
+      <Line data={chartData} options={options} />
+    </div>
+  );
+}