X Bookmarks — 2024 KW33: Next.js form stack and keyboard shortcuts

August 15, 2024

|bookmarks

by Florian Narr

X Bookmarks — 2024 KW33: Next.js form stack and keyboard shortcuts

@pontusab — react-hotkeys-hook for keyboard shortcuts in React inputs

I love using react-hotkeys-hook for creating quick commands for inputs:

  • ⌘S to focus and start searching ⚡
  • ⌘F to toggle filters 🔆
  • esc to clear the input 🗑️

Smart, because keyboard shortcuts are the one UX investment that pays off immediately for power users and costs almost nothing to wire up. react-hotkeys-hook handles the edge cases you'd otherwise miss — focus traps, OS conflicts, cleanup on unmount. The ⌘S / ⌘F / Escape trio covers 80% of what you'd actually want.


@pontusab — the Next.js form stack from client to database

The best way to handle forms in @nextjs, from client to database:

  • Shadcn - UI components 💅
  • React Hook Form - form handling 💼
  • zod - validation 🔍
  • next-safe-action - server actions 🧱

Honestly, this is the stack I keep reaching for too. next-safe-action is the piece most people skip — it gives you typed server actions with input validation baked in, so Zod schemas live once and cover both client and server. The Shadcn + RHF pairing is table stakes at this point, but the next-safe-action layer is the glue that makes it feel complete.


@pontusab — fetching logos from any domain

I love these hidden gems for getting logos from any domain

The tweet is light on detail but links to a resource covering logo/favicon APIs — the kind of thing you need when building dashboards or link previews and don't want to scrape favicons manually. Services like Clearbit Logo, DuckDuckGo's favicon endpoint, and Google's t0.gstatic.com path all give you usable images from just a domain name. Worth saving the reference before you re-invent it.


@chris_nectiv — checking Google's JS indexing with site:

Technical SEO Tip: Using the "site:" search operator is the absolute BEST WAY to confirm Google can index content loaded through JavaScript:

If you're a site that load content through JavaScript, you need to check to ensure that Google is able to index all of the different [pages/content]

Makes sense because this is a quick sanity check that requires no tooling — just type site:yourdomain.com [keyword from your JS-rendered content] into Google and see if it shows up. If it doesn't, your rendering pipeline is broken from Google's perspective. Googlebot does render JS, but it's deferred and inconsistent — site: is a cheap way to surface problems before they show up in Search Console as ranking drops.