I built KeyboardTest.tech — a free, no-install tool to test if your keyboard is actually working: stuck keys, double-typing, ghosting, gaming rollover, and more. Built entirely with Next.js (App Router). Here's a rundown of the project and some of the setup decisions.
Why I built it
Every existing keyboard tester I found either wanted me to download an .exe or was cluttered with ads and unrelated tools. I wanted something that opens instantly, works on any OS, and doesn't collect anything — a good fit for a static-first Next.js setup.
What it actually checks
Every key individually — press a key, it lights up on-screen if your keyboard registered it.
Ghosting — cheap keyboards can't always register certain key combos pressed at once, which matters a lot for gaming.
Chatter / double-typing — one press registering as two letters, a common failure on aging mechanical switches.
Rollover (NKRO) — how many keys you can hold down simultaneously before input starts dropping.
Separate routes for different setups (Windows, Mac, laptop, mechanical, gaming) since failure modes and user intent differ a lot between them.
Why Next.js App Router fit well here
Static generation for the tool pages. All the actual testing logic runs client-side in the browser, so there's no need for server round-trips — the pages themselves can be statically generated and served fast, with the interactive bits hydrating in as client components.
Per-route metadata + JSON-LD. App Router's file-based metadata API made it straightforward to give each tool page (and each blog post) its own title, description, and structured data (WebApplication, FAQPage, Article schema) without a lot of boilerplate.
MDX for the blog/guide content, sitting alongside the app routes, so long-form content and the interactive tools share the same deploy without needing a separate CMS.
Design decisions I stand by
Zero keystroke logging — nothing typed during a test leaves the browser.
No install, no account, no ads blocking the tool itself.
Separate pages per use case instead of one generic page.
Stack
Next.js (App Router), TypeScript, Tailwind, MDX.
Try it: keyboardtest.tech. Curious if others building similar "mostly client-side logic, statically served" tools in Next.js have landed on a different pattern for splitting server vs. client components.
Top comments (0)