Building a Swedish Sudoku Site with Next.js 15 and Pure TypeScript

Building a Swedish Sudoku Site with Next.js 15, MDX & a Pure-TS Puzzle Engine

Developer Evy Lundell launched sudokun.se, a free Swedish Sudoku site utilizing a custom-built TypeScript engine. The platform ensures unique solutions for every puzzle across five difficulty levels ranging from 17 to 55 clues.

Why This Matters

Modern web applications often struggle with the balance between heavy client-side interactivity and SEO-friendly server-side rendering. By using Next.js 15’s selective hydration, the site achieves fast first paints while maintaining a complex, stateful game board. This approach demonstrates how to manage deterministic logic—like seeded PRNG puzzle generation—entirely within a type-safe TypeScript environment without relying on external libraries or blocking main-thread performance unnecessarily.

Key Insights

• Sudoku generation uses a mulberry32 PRNG seeded with an FNV-1a hash to ensure reproducible daily puzzles and shareable states (Lundell, 2026).
• The engine implements a constraint-propagation and backtracking solver to verify that every generated board has exactly one unique solution.
• Content management is handled via MDX frontmatter, which automatically generates structured JSON-LD (FAQPage, HowTo) using schema-dts for compile-time safety.
• Game state management is simplified by using React’s key prop on the board component to trigger clean remounts upon difficulty changes, avoiding imperative state resets.
• Security is enforced via global headers in next.config.mjs, including strict Permissions-Policy and X-Frame-Options to mitigate common web vulnerabilities.

Working Examples

Deterministic puzzle generation via seeded PRNG using FNV-1a hash and mulberry32.

function hashSeed(seed: string): number {
let h = 2166136261 >>> 0;
for (let i = 0; i < seed.length; i++) {
h ^= seed.charCodeAt(i);
h = Math.imul(h, 16777619) >>> 0;
}
return h >>> 0;
}
function mulberry32(a: number): () => number {
return function () {
a |= 0;
a = (a + 0x6d2b79f5) | 0;
let t = a;
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}

MDX frontmatter used as the source of truth for metadata and structured data.

---
title: "Hur spelar man sudoku?"
description: "Lär dig sudokuets grundregler på fem minuter."
publishedAt: "2025-03-01"
faq:
- question: "Kan samma siffra finnas två gånger i en rad?"
answer: "Nej, varje siffra 1–9 får bara förekomma en gång per rad, kolumn och 3×3-ruta."
howTo:
steps:
- text: "Identifiera tomma rutor"
- text: "Använd eliminering för att hitta rätt siffra"
---

Typed JSON-LD schema builder using schema-dts to ensure compile-time validity.

import type { FAQPage, WithContext } from 'schema-dts';
export function buildFAQ(
items: { question: string; answer: string }[],
): WithContext<FAQPage> {
return {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: items.map((item) => ({
'@type': 'Question',
name: item.question,
acceptedAnswer: { '@type': 'Answer', text: item.answer },
})),
};
}

Practical Applications

• Use Case: Leveraging schema-dts to build typed JSON-LD. Pitfall: Using raw JSON objects which leads to silent schema errors in search consoles.
• Use Case: Implementing ‘use client’ selectively for interactive game boards while keeping the shell server-rendered. Pitfall: Hydrating the entire page shell, which increases JS bundle size and slows first paint.
• Use Case: Seeded PRNG for shareable game states. Pitfall: Blocking the main thread with synchronous heavy computation on low-end devices; moving generation to a Web Worker is recommended for extreme puzzles.

References:

• https://dev.to/evyl/building-a-swedish-sudoku-site-with-nextjs-15-mdx-a-pure-ts-puzzle-engine-21nm