DEV Community: 华灵庚

Building a Privacy-First Static Interpretation Tool with Next.js and Vercel

华灵庚 — Tue, 11 Aug 2026 07:06:47 +0000

Building a Privacy-First Static Interpretation Tool with Next.js and Vercel

I spend a fair amount of my spare time building small, focused web tools. The latest one is Islamic Dream Reflection — a private, no-account dream reflection tool that keeps everything on the visitor's device.

The whole thing is static, which is the interesting part. Here's how it's put together.

The constraint that shaped everything: no account, no server storage

The product decision was simple: people should be able to reflect on a dream without creating an account and without us storing their text anywhere. That single constraint drove the entire architecture.

No database. Dream reflections are produced on the fly and saved to localStorage in the browser. Nothing ever leaves the device unless the visitor chooses to share a summary card.
No auth. There's nothing to log into.
No API routes for user data. The server handles static pages only.

This is a genuinely nice place to be as a developer. No user table, no session handling, no data-retention policy to maintain.

Static generation with Next.js App Router

The content layer is a set of static pages: symbol guides, methodology pages, and FAQ. Each symbol page gets its own title, meta description, and canonical URL.

export const metadata = {
  title: `Snake Dream Meaning in Islam`,
  description: `A careful look at snake dreams ...`,
  alternates: { canonical: `/dreams/snake-dream-islam` },
};

Every page is pre-rendered at build time and served from Vercel's edge. There's no server-rendering work to do per request, which keeps it fast and cheap.

Where the client takes over

The main interpreter experience is a client component. The user describes a dream, optionally picks a life area (love, career, family, spiritual) and an emotion, and the tool combines:

Traditional background for recognized symbols
Personal context the user supplied
A reflective prompt rather than a definitive verdict

The tool is deliberately careful about claims — it separates traditional perspectives from personal reflection, and it explicitly does not predict events or issue rulings. That line matters, and it shows up in the copy and the FAQ alike.

What I'd do differently next time

Ship the symbol library in smaller increments. I built a lot of pages before validating which symbols people actually search for.
Add og:image earlier. Social cards currently fall back to a plain summary; adding a shared image is near the top of my list.
Plan the link pipeline before launch rather than after.

Stack at a glance

Layer	Choice
Framework	Next.js (App Router)
Hosting	Vercel, static export
Data	LocalStorage + static content files
Analytics	GA4
Monitoring	Google Search Console

Small, private, static tools are a pleasant change of pace from accounts-and-dashboards web apps. You can try the reflection tool here: islamicdreamreflection.com.

Mistfall Hunter Guide — A Source-Aware Wiki for the New PvPvE Extraction ARPG

华灵庚 — Fri, 31 Jul 2026 04:29:21 +0000

Bellring Games just launched Mistfall Hunter on July 30, 2026 — a dark-fantasy third-person PvPvE extraction ARPG for PC, PS5, and Xbox Series X|S. If you are trying to figure out classes, extraction, builds, or launch-day issues, Mistfall Hunter Guide is an independent resource I have been keeping up to date.

How It Differs from Other Game Wikis

Source-aware: Every fact is traced to an official source or labeled as editorial opinion. No fabricated DPS numbers or fake extraction rates.
Launch-week coverage: Known issues, patch notes, crossplay confirmation, server regions, and region-lock rules are all documented with sources.
Practical reading path: A five-run beginner plan guides you from movement and camera through first extractions, rather than dumping an encyclopedia on you.

What the Guide Covers

All Six Launch Classes

Mercenary, Sorcerer, Blackarrow, Shadowstrix, Seer, and Withered Knight — each with weapon stances, role breakdowns, solo viability, and recommended build directions.

Beginner Help

Beginner guide with a first-five-run plan
How to extract — Returner Woodling, Soul of Return, and the official extraction loop
Solo mode explainer

Builds

Build directions for all six classes
Best class comparison by role and playstyle
Class tier list framework — cautious, versioned, without invented stats

Technical Help

Rewards & Codes

Editorial Approach

This is a fan-made site not affiliated with Bellring Games. The content policy is straightforward: cite official sources first, label community information clearly, and say "we could not confirm this" when data is missing rather than inventing it.

If you are starting Mistfall Hunter this week, the full guide is at mistfallhuntergg.wiki.

How I Built a 2,600-Page Walkthrough Index with Next.js and Vercel

华灵庚 — Sun, 26 Jul 2026 06:21:23 +0000

The Idea

My friend got stuck on level 87 of Color Block Jam, a casual puzzle game on mobile. She typed "Color Block Jam level 87" into Google and got a messy results page — some random YouTube links, a couple of forum threads, nothing clean.

So I built colorblockjam.wiki — a walkthrough index that maps every level number to the most relevant YouTube walkthrough video. No accounts, no ads, no scrolling past blog intros. Type a number, watch the solution.

The Numbers

2,611 static pages, one per level
27 level-range chapters (1-100, 101-200, etc.)
~7 MB total build output — tiny enough that Vercel's free tier barely notices
Build time: under 2 minutes for all pages

Tech Choices

Next.js App Router + Static Export

Every page is a static route under /level/[id]. Since there are no user accounts and no dynamic data, I could have gone fully static HTML. But Next.js gave me a few things that made it worth it:

// app/level/[id]/page.tsx
export async function generateStaticParams() {
  return levels.map((level) => ({ id: level.levelId.toString() }));
}

generateStaticParams outputs 2,611 static HTML files. No ISR, no SSR — just pre-built pages deployed to Vercel's edge.

The Level Data Structure

The content is a single TypeScript array. Each level has:

levelId — the level number
slug — /level/N
youtubeVideoId — matched to the best available walkthrough
chapter — which range it belongs to (for browsing)

Keeping data in a source file instead of a CMS meant zero overhead during the build and zero runtime lookups.

SEO by Default

Since every page is a static file with its own <title> and <meta>, Google sees 2,611 unique pages — not a thin-content wall. Each page gets:

export const metadata = {
  title: `Color Block Jam Level ${levelId} Walkthrough`,
  description: `Watch the walkthrough solution for Color Block Jam level ${levelId} and get back to your puzzle.`,
  alternates: { canonical: `/level/${levelId}` },
};

Plus a VideoObject schema on each level page so Google can surface the embedded walkthrough in search results.

The Game Frame

One fun addition: I embedded the actual game using an iframe with allow="autoplay". Visitors can try the puzzle directly on the site, then switch to a walkthrough when they get stuck. It's not core to the SEO play, but it keeps people on the page longer — a signal Google notices.

Deployment

Hosting: Vercel (free tier)
Domain: Spaceship DNS → Vercel custom domain
Build: next build && next export
Monitoring: GA4 + Google Search Console

Vercel's custom domain setup with automatic SSL took about 5 minutes. The whole deployment pipeline — push to main, automatic build, deploy to edge — just works.

What I'd Do Differently

Start with GSC from minute one. I waited a day before submitting the sitemap. For a new domain with 2,600+ pages, every hour counts.
Add more original content earlier. Pure video embeds work for the long-tail, but pages with notes about tricky mechanics will rank better.
Build the link-building pipeline before launch. Getting backlinks to 2,600 pages takes planning, not afterthought.

The Stack at a Glance

Layer	Choice
Framework	Next.js 14 (App Router)
Hosting	Vercel
Data	TypeScript source files
Analytics	GA4
Monitoring	Google Search Console

Why I'm Writing This

Building small, focused tools for niche audiences is the most fun kind of development. No auth, no database, no API routes — just content and speed. If you're thinking about building a similar index for a game, a book, a film series, or anything with numbered entries, this stack works well.

Check out the site at colorblockjam.wiki. Feedback welcome.

How I Built a Data-Driven Game Wiki with Next.js — Hero DB, Pipeline, and Static Export

华灵庚 — Thu, 23 Jul 2026 07:10:51 +0000

I just shipped a data-heavy game wiki for Guildrun (a roguelite auto-battler on Steam) and wanted to share the architecture because it's a pattern that works well for any structured game data site.

The Problem

Most game wikis are either Fandom pages (slow, ad-heavy) or markdown files on GitHub (not indexable). I wanted something that could handle 25 heroes × 13 stats each, 162 items, and 295 relics — all with source provenance tracking — while rendering as fast static HTML.

The Stack

Next.js 14 with App Router, static export (output: "export")
Tailwind CSS for styling
Vercel for deployment + Cloudflare DNS
Data pipeline: raw markdown files → build-time parser → typed TypeScript objects → static pages

The Data Pipeline

The key insight was keeping content and code separate. All game data lives in content-input/pages/ as structured markdown files with a custom frontmatter format:

slug: beginner-guide
title: Guildrun Beginner Guide
contentStatus: ready
versionContext: Steam demo build (app/3669200)

Each page has a directAnswer section (for Google featured snippets), structured sections with evidenceType tags, and a quickFacts table. The build script parses these into typed records and generates one static page per guide.

Source Provenance

Because this is a demo-phase game, accuracy matters more than completeness. Every data block has an evidence level:

confirmed-fact — verified in demo game files
community-report — Discord/Reddit consensus
editorial-recommendation — strategy opinion
uncertainty — explicitly flagged as "might change"

This ships to the frontend as a small badge on each section. Readers know exactly how reliable each claim is.

Static Export & Performance

Full static export means every page is pre-rendered HTML. No database queries at request time. Total build time is under 2 minutes for 9 content pages plus the hero/item/relic database routes. Lighthouse scores are 95+ across the board.

What I'd Do Differently

Start with a smaller indexable surface: we shipped the full data set at once, but phasing in pages gradually would give Google more time to evaluate each one
Add a data diff system earlier: when the full game launches and stats change, we need to show what changed from the demo build

The live site is at guildrunguide.wiki if you want to see the result. Happy to answer questions about the pipeline or the content architecture.

I Built 6 Game Wiki Sites in 3 Weeks — Here's My Stack

华灵庚 — Sun, 19 Jul 2026 04:03:00 +0000

I've been building game guide wikis for fun (and maybe a little AdSense revenue). Here's what I'm using:

The Stack

Framework: Next.js static export
Hosting: Vercel
DNS: Cloudflare
Analytics: GA4
Search: Google Search Console

Why Static Export?

No server, no database, no maintenance. Every page is pre-rendered HTML. Deploy is a build and export. Zero runtime costs.

The Wiki Network

So far 6 sites are live:

Guts & Blackpowder Guide — Roblox game guide
Steal a Brainrot Guide — Roblox brainrot database
Moonlight Peaks Guide — Cozy life-sim pre-release
Witchbrook Guide — Witchcraft school pre-release
Wilderdark Guide — Dinosaur survival pre-release
Grave Seasons Guide — Disaster farming pre-release

What I Learned

The template approach works. After building the first site from scratch, I extracted a reusable template with site-config, guide card components, and SEO schema. Each new site now takes 2-3 hours instead of 2-3 days.

Pre-release guides are a gamble. Some games blow up, some don't. The trick is covering games with high community interest before the big sites do.

Static sites are fast. Every page loads instantly. No database queries, no SSR overhead. Just HTML.

Anything you'd do differently?

Moonlight Peaks Guide — Vampire Life, Romance and Farming

华灵庚 — Thu, 16 Jul 2026 07:13:39 +0000

Moonlight Peaks Guide

Your guide to life as a vampire in Moonlight Peaks.

→ moonlightpeaksguide.wiki

Not affiliated with the developers. Fan-maintained.

Witchbrook Guide — Spells, Romance, Classes and Mossport Life

华灵庚 — Thu, 16 Jul 2026 07:13:35 +0000

Witchbrook Guide

Everything we know about Witchbrook College before launch.

→ witchbrookguide.wiki

Not affiliated with Chucklefish. Fan-maintained.

Moonlight Peaks Guide — Vampire Life, Romance, Farming and Magic

华灵庚 — Thu, 16 Jul 2026 07:03:57 +0000

Moonlight Peaks Guide

Your guide to life as a vampire in Moonlight Peaks — romance, farming, magic, and supernatural small-town life.

What is Moonlight Peaks?

A cozy life-sim where you play as a vampire in a magical town full of werewolves, witches, and mermaids. Farm by moonlight, master vampiric abilities, fall in love. Out now on Switch, Switch 2, Steam, Google Play.

What the wiki covers

Romance options — yes, that includes Death
Vampiric abilities and progression
Farming, crafting, supernatural ingredients
Every town location and NPC
Beginner guide — your first 7 nights
FAQ for new players

→ moonlightpeaksguide.wiki

Not affiliated with the developers. Fan-maintained.

Witchbrook Guide — Spells, Romance, Classes and Mossport Life

华灵庚 — Thu, 16 Jul 2026 07:03:54 +0000

Witchbrook Guide

Everything we know about Witchbrook College before launch — spells, romance, classes, and Mossport life.

What is Witchbrook?

An upcoming life-sim and social RPG from Chucklefish. Play as a student at Witchbrook College, learning magic, making friends, and navigating Mossport. Coming to PC, Switch, Xbox in 2026.

What the wiki covers

Spells and magical arts
Romance options and relationships
Classes and school life
Mossport shops, locations, NPCs
Release info and updates
Community FAQ

→ witchbrookguide.wiki

Not affiliated with Chucklefish. Fan-maintained.

Steal a Brainrot Wiki — Complete Brainrot Database and Trading Guide

华灵庚 — Thu, 16 Jul 2026 06:58:11 +0000

Steal a Brainrot Wiki

The only sortable, filterable database for every brainrot, trait, mutation, and event in Steal a Brainrot on Roblox.

What is Steal a Brainrot?

A Roblox game about collecting and trading rare brainrots — each with unique traits, mutations, and rarity tiers. Part collection game, part trading economy.

What the wiki covers

Every brainrot catalogued with stats, rarities, traits, and mutations
Sort and filter by rarity, cost, or value
Event guides for limited-time brainrots
Trading tips — what is actually worth your currency
Beginner walkthrough

→ stealabrainrotguide.wiki

Not affiliated with Roblox or Steal a Brainrot. Community-maintained.

Guts and Blackpowder Wiki — Commands, Maps and Badges Guide

华灵庚 — Thu, 16 Jul 2026 06:58:08 +0000

Guts & Blackpowder Wiki

The complete community resource for the Roblox PvE zombie survival shooter.

What is Guts & Blackpowder?

A Roblox game set during the Napoleonic Wars where you fight through waves of zombies using muskets, sabres, and historical weapons. Think Left 4 Dead meets the 19th century.

What the wiki covers

Every admin & private server command
All 15 maps with objectives and walkthroughs
Weapons, loadouts, and damage stats
Enemy bestiary — Shamblers, Bombers, Runners, Cuirassier
31 badges & secret achievements
Class breakdowns and beginner survival guide

→ gutsandblackpowder.wiki

Not affiliated with Roblox or Guts & Blackpowder developers.