DEV Community: 冠

How I Built an SEO-Friendly AI Video Ideas Hub in Next.js

Fri, 09 Oct 2026 13:37:12 +0000

I am building an AI video product with Next.js, and recently I needed a scalable way to publish creative video concepts and trending formats.

The obvious solution was to create an /ideas/ page.

My first implementation, however, was not a good one.

I filled the page with a large grid of prompts, examples, categories, and visual cards. It looked busy, but it did not provide a clear information architecture. More importantly, most of those ideas did not yet have their own pages.

I eventually replaced that design with a much simpler content hub.

This post explains the structure I chose, the SEO decisions behind it, and how I kept it compatible with the rest of my Next.js landing-page system.

The problem with building a large gallery too early

A large gallery can look impressive, but it creates several problems when the content library is still small:

Cards may lead to pages that do not exist.
Similar descriptions can create repetitive content.
The hub competes with future detail pages.
Updating trends becomes difficult.
The design no longer matches the rest of the website.

Instead of pretending that I already had a complete ideas library, I decided to publish one useful entry and make the structure expandable.

The first featured format is “Hotel Lobby AI.” Future concepts can be added as new cards when their corresponding content is ready.

The page structure

I reused the same module system as the other product pages on the site.

The final structure is:

A focused hero section
A featured ideas section
An explanation of what AI video ideas are
A three-step workflow
Benefits of planning the idea first
Use cases
A prompt-writing guide
Frequently asked questions
A final call to action

Only the featured ideas section is unique to this page. Everything else uses components already available in the project.

A simplified version of the content configuration looks like this:

{
  "page_type": "introduction",
  "modules": [
    {
      "id": "hero",
      "type": "hero",
      "source": "hero"
    },
    {
      "id": "featured-ai-video-ideas",
      "type": "ideas",
      "source": "featuredIdeas"
    },
    {
      "id": "what-are-ai-video-ideas",
      "type": "intro",
      "source": "what"
    },
    {
      "id": "how-to-use-ai-video-ideas",
      "type": "steps",
      "source": "how"
    },
    {
      "id": "faq",
      "type": "faq",
      "source": "faq"
    }
  ]
}

This keeps presentation logic in reusable components while the page content remains data-driven.

Designing the featured idea card

The first version of the card was too large. It looked more like a banner than an entry in a growing content library.

I reduced it to a compact horizontal card containing:

One temporary illustration
A category label
The idea name
A short explanation
One clear action

On mobile, the same card becomes a vertical layout.

The important decision was not to create fake cards simply to fill the grid. The page currently displays one idea because only one idea is ready. When another guide is complete, I can add another item to the data without redesigning the page.

Separating the hub from future detail pages

The /ideas/ route targets the broad intent behind “AI video ideas.”

Future trend pages can target narrower searches, such as:

/ideas/hotel-lobby-ai/
/ideas/ai-product-video-ideas/
/ideas/ai-video-ideas-for-youtube/

Each child page should have a distinct purpose. It should not repeat the hub description with a different title.

A detail page should include:

A clear explanation of the format
Required inputs
A practical workflow
Prompt examples
Limitations
Usage and permission considerations
A relevant generator link

Until a detail page exists, the hub should not link to an empty or placeholder URL.

Metadata and canonical URLs

The Ideas page has its own title, description, canonical URL, and social metadata.

return {
  title: "AI Video Ideas & Creative Prompts | MyAIVideo",
  description:
    "Find practical AI video ideas for YouTube, TikTok, Reels, marketing and storytelling.",
  alternates: {
    canonical: "https://myaivideomaker.com/ideas/"
  },
  robots: {
    index: true,
    follow: true
  }
};

I also avoided publishing alternate-language URLs before translated versions exist.

Unsupported locale routes redirect to the English page instead of returning duplicated English content under multiple locale paths.

Structured data

The page uses structured data that matches its visible content:

CollectionPage
ItemList
BreadcrumbList
FAQPage

The ItemList currently contains one entry. Its item count will grow only when new visible idea cards are added.

This is preferable to declaring items or pages that visitors cannot actually access.

Sitemap and internal links

The new URL was added to the sitemap:

<url>
  <loc>https://myaivideomaker.com/ideas/</loc>
  <changefreq>weekly</changefreq>
  <priority>0.8</priority>
</url>

I also added contextual links from:

The main navigation
The homepage
The footer
The text-to-video page

This allows visitors and crawlers to discover the hub without relying only on the sitemap.

What I learned

The main lesson was simple: a content hub should reflect the content that actually exists.

A smaller page with one real entry is better than a large gallery of artificial placeholders.

The reusable module approach also makes future expansion safer. I can add new trend pages and cards without changing the overall layout, metadata logic, or responsive behavior.

If you want to inspect the current implementation, here is the AI Video Ideas hub.

What approach do

I Built a Free Birth Chart Calculator with Live Transit Tracking

Thu, 03 Sep 2026 04:27:14 +0000

Why I built this

Most free astrology sites give you a one-time chart reading and stop there.
I wanted something that treats your natal chart as a starting point,
then keeps showing you how today's sky connects to it — without
requiring signup.

What it does

Generates a full natal chart from birth date, time, and place (Western Tropical, Whole Sign houses)
Shows your Sun/Moon/Rising ("Big Three") first, before the deeper technical layers
Tracks personal transits: what's active now, this week, and the next 30 days
Gracefully handles unknown birth times — hides house/Rising results instead of guessing
No account needed — charts are saved locally in the browser

Some technical notes

Chart calculations are deterministic (ephemeris-based), kept separate from any generated explanation text
Saved charts live in browser storage, not a server, by default
Built mobile-first with an interactive SVG chart wheel

Try it here 👉 [annorasky.com]

Would love feedback from other devs, especially on the chart
wheel UX or performance on mobile.

I Built an AI Landscape Design Tool with Next.js + Cloudflare

Sun, 02 Aug 2026 01:16:09 +0000

I wanted a practical answer to one question:

Can I preview a yard makeover from a real photo before spending money?

Generic AI image tools make pretty gardens. They are worse at keeping your actual house, fence, and proportions. So I built LandscapeAI — upload one outdoor photo, pick a style, generate a design concept.

Live app: landscapedesignai.net

This is a short build log: stack, architecture, and the bugs that mattered.

The product

Users upload a front yard, backyard, garden, patio, or balcony photo. They choose a style (modern, cottage, zen, Mediterranean, xeriscape…), add optional goals like privacy or low maintenance, then generate a concept.

New users get a small free starter allowance. Extra runs use credits sold as one-time packs.

Clear boundary helped a lot:

Good for early visualization and style comparison
Not construction drawings, permits, or guaranteed plant lists

Narrow scope made the engineering shippable.

Stack

Layer	Choice
App	Next.js 15
Deploy	OpenNext + Cloudflare Workers
DB / Storage	D1 + R2
Auth	NextAuth (Google)
Payments	Creem
Image gen	kie → fal → Replicate

Cloudflare end-to-end kept infra simple for an early AI SaaS: compute, database, storage, DNS in one place.

Architecture

Everything goes through one gateway:

Upload photo + prompt
  → auth + credit check
  → content moderation (fail closed)
  → provider router (kie / fal / replicate)
  → save result to R2
  → decrease credits

One route for generation means credits, safety, failover, and logging stay in one place. I recommend this for any AI image product.

Three lessons from production

1. Multi-provider fallback is worth it

AI image APIs fail, rate-limit, or run dry. A tiny router saved the product:

primary: kie
fallback: fal
third: Replicate

Users care that Generate works, not which vendor won.

Also: some models reject data URLs for reference images. They want public URLs. I upload the user photo first, then pass the returned URL into generation. If you are doing photo-to-image editing, assume that early.

2. Credits beat “unlimited”

Image generation has real unit cost. LandscapeAI uses starter credits + one-time packs instead of forcing subscriptions first.

Yard redesign is often a short project. People try a few styles, then stop. One-time packs match that better than a monthly plan.

3. AI payments need compliance, not just checkout

For AI image products, payment providers may require:

visible paid pricing before purchase
consistent support email
explicit NSFW prohibition in Terms / AUP
moderation on every prompt before generation

My rule: no prompt reaches the model without a moderation decision. Block on deny/flag, and fail closed if moderation is down.

The bug that looked like “AI is broken”

One production error was:

Upload failed: 400 Bad Request

Generation had already succeeded. R2 upload failed because production storage config/secrets were wrong. From the user’s view, the whole feature was dead.

For AI apps, success means all three:

model success
storage success
credit ledger success

Log them separately.

What I’d do earlier next time

Build the generation gateway first (credits + moderation + providers)
Treat storage secrets as launch-critical, not optional
Show pricing packs before payments are fully polished
Log moderation success, not only failures

Try it

👉 Generate an AI landscape design from your yard photo

If you are building a similar AI SaaS, comment with your stack — happy to compare notes on provider fallback, Cloudflare deploys, or credit packaging.

As a fellow tab hoarder, I use tools to finish projects so I can finally close them! I create graphics with https://graffiti-generator.org, edit images via https://fireredimage.org, and make academic figures with https://paper-banana.app. For a fun break,

Wed, 15 Apr 2026 09:16:30 +0000

graffiti-generator.org

fireredimage.org

paper-banana.app

I Built a Free Astrocartography Calculator with Next.js — Here's the Full Story

Sat, 28 Mar 2026 02:47:58 +0000

Most astrocartography tools online are either locked behind a $20/month paywall, built on Flash-era technology, or so cluttered with ads you can barely find the actual calculator. As a developer who stumbled into the world of astrology charts, I kept thinking: someone should just build a clean, free one.

So I did. Here's the honest story of how I built Astrocarto — the technical decisions, the unexpected hard parts, and what I'd do differently.

What Even Is Astrocartography?

Quick background for the non-astrology crowd (which is probably most of you):

Astrocartography is a technique that takes the positions of planets at the exact moment you were born and projects them as lines onto a world map. The idea is that certain locations carry specific planetary energies for you — your "Venus line" might run through Paris, your "Mars line" through somewhere you'd rather avoid.

Whether or not you believe any of that — the math is genuinely fascinating. We're talking about:

Calculating precise planetary positions using historical ephemeris data
Transforming between multiple astronomical coordinate systems
Projecting those coordinates onto a 2D geographic map

As a developer, I was hooked on the problem before I even thought about the product.

The Tech Stack

Framework:        Next.js 14 (App Router)
Styling:          Tailwind CSS
Map Rendering:    Leaflet + React-Leaflet
Astro Calc:       astronomia (npm)
Deployment:       Vercel

I'll explain the key choices below.

Why Next.js?

Three reasons:

1. SEO is everything for a niche tool

People actively search for "free astrocartography calculator" — I needed server-side rendering so those pages could rank. With Next.js App Router, my calculator pages are fully rendered on the server before they hit the browser.

2. Route Handlers for calculation logic

I didn't want heavy astronomical math running on the client. Next.js Route Handlers let me keep that on the server cleanly:

// app/api/calculate/route.js
export const runtime = 'nodejs'; // critical — don't use Edge here

export async function POST(request) {
  const { birthDate, birthTime, lat, lng } = await request.json();

  const chart = calculateNatalChart({ birthDate, birthTime, lat, lng });

  return Response.json({ chart });
}

3. Zero-config Vercel deployment

Push to main → live in 30 seconds. For an indie project, this matters.

The Hardest Part: Astronomical Calculations

I expected the map to be the hard part. I was wrong. The calculations nearly broke me.

Using the `astronomia` library

astronomia is a JavaScript port of Jean Meeus's Astronomical Algorithms — the gold standard reference for this kind of math. It handles the heavy lifting of planetary position calculations.

Here's a simplified version of how I get a planet's ecliptic longitude:

import { solar, julian, base } from 'astronomia';

function getPlanetPosition(birthDate, birthTime) {
  // Convert birth datetime to Julian Day Number
  const dateStr = `${birthDate}T${birthTime}:00Z`;
  const jd = julian.DateToJD(new Date(dateStr));

  // Get Sun's position (as example)
  const sunPos = solar.apparentLongitude(jd);

  // Convert from radians to degrees
  const longitude = base.pmod(sunPos * 180 / Math.PI, 360);

  return longitude;
}

The coordinate system nightmare

Where it got painful: astrocartography lines require converting between three coordinate systems:

Ecliptic coordinates — where planets are relative to Earth's orbital plane
Equatorial coordinates — right ascension + declination (like lat/lng for space)
Geographic coordinates — actual latitude/longitude on Earth's surface

For each planet, I need to find every latitude on Earth where that planet was on the Ascendant, Descendant, Midheaven, or IC at the moment of birth. That means iterating through latitudes and solving for the longitude where the condition holds.

function findAscendantLine(planet, jd) {
  const points = [];

  // Step through every latitude
  for (let lat = -80; lat <= 80; lat += 0.5) {
    // Binary search for the longitude where this planet rises
    const lng = solveForAscendant(planet, jd, lat);
    if (lng !== null) {
      points.push([lat, lng]);
    }
  }

  return points;
}

Getting this right took me about two weeks of head-scratching, cross-referencing with known charts, and fixing edge cases near the poles.

Rendering the Map with Leaflet

Once I had the coordinate arrays, rendering them with Leaflet was comparatively straightforward:

import { MapContainer, TileLayer, Polyline } from 'react-leaflet';

export function AstroMap({ planetLines }) {
  return (
    <MapContainer
      center={[20, 0]}
      zoom={2}
      style={{ height: '600px', width: '100%' }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="© OpenStreetMap contributors"
      />

      {planetLines.map(({ planet, points, color }) => (
        <Polyline
          key={planet}
          positions={points}
          pathOptions={{ color, weight: 2, opacity: 0.8 }}
        />
      ))}
    </MapContainer>
  );
}

One Leaflet gotcha with Next.js: Leaflet touches window on import, which breaks SSR. Fix:

// Use dynamic import with ssr: false
const AstroMap = dynamic(() => import('@/components/AstroMap'), {
  ssr: false,
  loading: () => <div className="map-skeleton" />
});

What Astrocarto Can Do Right Now

The tool currently supports:

✅ Rising Sign Calculator — your ascendant based on exact birth time + location
✅ Natal Chart — full planetary positions at birth
✅ Transit Chart — current planetary positions overlaid on your natal chart
✅ Relocation Chart — how your chart shifts if you move cities

All free. No account required. Just enter your birth details and go.

Try it: astrocarto.org

What I'd Do Differently

1. Validate calculations against existing tools first

I spent days debugging math that turned out to be correct — I just didn't have a reliable reference to check against. Next time I'd set up automated comparison tests against established chart software from day one.

2. Build the map UI before perfecting the calculations

Seeing lines on a map, even approximate ones, keeps you motivated. I got too deep into calculation accuracy before I had anything visual to show for it.

3. Add caching earlier

Astronomical calculations for the same birth data always return the same result. I should have added a simple cache from the start rather than recalculating on every request.

// Simple in-memory cache I added later
const cache = new Map();

export async function POST(request) {
  const body = await request.json();
  const cacheKey = JSON.stringify(body);

  if (cache.has(cacheKey)) {
    return Response.json(cache.get(cacheKey));
  }

  const result = calculateNatalChart(body);
  cache.set(cacheKey, result);

  return Response.json(result);
}

What's Next

[ ] Mobile-optimized map gestures
[ ] Shareable chart URLs (so you can send your chart to a friend)
[ ] PDF export
[ ] More celestial bodies — asteroids, Chiron, nodes

Building niche tools is genuinely one of my favorite things to do as an indie developer. The intersection of an obscure domain and a real technical problem is where the most interesting projects live.

If you've built something in a weird niche — astrology, birdwatching, chess, anything — I'd love to hear about it in the comments.

And if you're curious about your own astrocartography: astrocarto.org — takes about 60 seconds.

I Got Obsessed with LinkedIn Pinpoint, Until I Found This Tool

Tue, 21 Oct 2025 11:11:53 +0000

Get today's LinkedIn Pinpoint answer instantly!

Updated daily with verified solutions, detailed clue explanations, and strategies to maintain your winning streak. Free access to current and historical puzzle answers.

wplaceart

Sat, 23 Aug 2025 09:43:59 +0000

Welcome to Wplace Art, your premier destination for transforming ordinary images into extraordinary pixel art masterpieces. Our powerful Wplace Pixel converter combines cutting-edge technology with intuitive design, making it easy to create stunning retro-style artwork perfect for games, social media, and personal projects.