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

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:

1. Traditional background for recognized symbols
2. Personal context the user supplied
3. 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

1. Ship the symbol library in smaller increments. I built a lot of pages before validating which symbols people actually search for.
2. Add og:image earlier. Social cards currently fall back to a plain summary; adding a shared image is near the top of my list.
3. 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.