This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in node_modules/next/dist/docs/ before writing any code. Heed deprecation notices.
Diff Shuttle — a free, browser-based text and code comparison tool. Built with Next.js 16 + React 19, deployed to Cloudflare Pages via static export.
| Task | Command |
|---|---|
| Dev server | npm run dev |
| Build | npm run build |
| Lint | npm run lint |
| Deploy to Cloudflare | npm run deploy |
npm run buildcompiles and checks types.- There is no test suite configured.
app/— Next.js App Routerapp/layout.tsx— Root layout (metadata, JSON-LD, ThemeProvider)app/[locale]/— i18n routeslayout.tsx— Locale layout (NextIntlClientProvider, Header, Footer)page.tsx— Homepage with DiffEditor toolabout/— About page with FAQ schemaprivacy/— Privacy policyterms/— Terms of servicetools/— Layer 4 SEO landing pages
components/— React componentsdiff-editor.tsx— Main diff input componentdiff-result.tsx— Diff result displaydiff-controls.tsx— Diff mode/view controlsdiff-stats.tsx— Statistics displayAboutFaq.tsx+AboutFaqData.tsx— FAQ data and renderingui/— shadcn components
lib/— Shared utilitiesdiff-engine.ts— Core diff algorithm (npm 'diff' library)constants.ts— Constantsutils.ts—cn()utility
i18n/— next-intl configurationrouting.ts— Locale routing (en,zh,as-needed)request.ts— Server-side translationsnavigation.ts— Link, useRouter, etc.
messages/— Translation files (en.json, zh.json)
- URL-based with next-intl (
localePrefix: "as-needed") - Default locale:
en(served at/) - Chinese:
zh(served at/zh) - Layer 4 pages: English only (
/tools/*) - Server components:
getTranslations({ locale, namespace }) - Client components:
useTranslations("namespace") - Always add both
enandzhentries when adding UI text
- Uses npm
difflibrary for comparison algorithms - Supports: text (line-by-line), word, character, JSON, CSV
- JSON mode: auto-formats before comparison
- CSV mode: line-by-line comparison
- Export: text format with statistics
- Tailwind CSS v4 + shadcn/ui
- Geist + Geist Mono fonts
- Theme: System/Light/Dark (via
ThemeProvider) - Toast: sonner (top-center, richColors, 3s)
- Icons: lucide-react
- Path alias:
@/maps to project root
- Static export (
output: "export"in next.config.ts) wrangler.tomlconfigures static assets only (no worker)- No middleware (not supported with static export)
images.unoptimized: truein next.config.ts
- Layer 1: Homepage (500+ words + tool UI)
- Layer 3: About (FAQPage + HowTo schemas), Privacy, Terms
- Layer 4: 5 tool landing pages (800-1500 words each)
- All pages have proper metadata, canonical URLs, and hreflang
- See
SEO_OVERVIEW.mdfor complete asset map
MIT