Strategy Game Dev

A Next.js content site for strategy-game developers, built around SEO-focused topic landing pages and a long-form blog. It markets an AI-ready toolkit of prompts, reusable systems, and design patterns for solo devs shipping turn-based, 4X, and campaign strategy games, and publishes deep-dive articles on the specific problems strategy games break on (maps, AI, economy, threat curves, save state). Blog content is authored in MDX and rendered through the Next.js App Router.

Features

• Marketing home page — Composed from section components: Hero, TrustStrip, Toolkit, Workflow, Showcase, Comparison, FAQ, and FinalCTA.
• Topic landing pages — A route group of SEO-oriented pages (4X, AI strategy, auto-battler, turn-based, plus tool-specific pages for Claude Code, Cursor, Codex, Godot, and Unity), each rendered via a shared TopicPage component with per-page metadata and JSON-LD structured data.
• MDX blog — /blog index plus dynamic /blog/[slug] post pages, with posts stored as .mdx files (frontmatter: title, date, tag, readMinutes, excerpt) loaded through lib/posts.
• Additional pages — Games, Skills, and Pricing pages, plus a custom not-found page.
• SEO — Centralized metadata, canonical URLs, and a generated sitemap.js that enumerates static/topic routes and auto-includes blog posts from content/posts/.
• Shared UI — Header, Footer, ScrollToTop, and reusable content components (BlogPost, ComingSoon, Comparison, FAQ, Pricing, Showcase, Toolkit, Workflow, etc.).

Tech Stack

• Next.js 14 (App Router)
• React 18 / JSX
• MDX via @mdx-js/react, next-mdx-remote, and gray-matter
• Global CSS (app/globals.css)
• Path alias @/* (configured in jsconfig.json)

Getting Started

Prerequisites

• Node.js (with npm)

Install

npm install

Run

npm run dev      # Start the Next.js dev server
npm run build    # Production build
npm run start    # Serve the production build

Project Structure

web-page/
├── package.json
├── next.config.mjs
├── jsconfig.json
├── app/                         # Next.js App Router (code lives here)
│   ├── layout.jsx               # Root layout (Header, Footer, ScrollToTop, metadata)
│   ├── page.jsx                 # Home page
│   ├── globals.css
│   ├── not-found.jsx
│   ├── sitemap.js
│   ├── (topics)/                # Route group of topic landing pages
│   │   ├── 4x-game-development/
│   │   ├── ai-strategy-game-development/
│   │   ├── auto-battler-development/
│   │   ├── turn-based-game-development/
│   │   ├── claude-code-strategy-games/
│   │   ├── cursor-strategy-games/
│   │   ├── codex-strategy-games/
│   │   ├── godot-strategy-games/
│   │   ├── unity-strategy-games/
│   │   ├── vibe-code-strategy-games/
│   │   └── strategy-game-development/
│   ├── blog/
│   │   ├── page.jsx             # Blog index
│   │   └── [slug]/page.jsx      # Dynamic post page
│   ├── games/
│   ├── skills/
│   └── pricing/
├── components/                  # Header, Footer, Hero, TopicPage, BlogPost, FAQ, ...
├── content/
│   └── posts/                   # Blog posts as .mdx files
└── lib/
    └── posts.js                 # Loads/parses MDX posts