From clone to first deploy in about twenty minutes

Before you start

• ~20 minutes for a first deploy. Subsequent deploys via auto-deploy webhook take 2 to 4 minutes.
• Node 24, Git, a Dokploy instance you can reach (or any Docker host), and a domain you control.

Steps

1. 1. Clone the template

   Pick the directory that will host the new site, then clone the template repo. Rename my-app/ to your project slug. The slug becomes the source-of-truth name in package.json, the Dockerfile path in Dokploy, and the project folder in the Obsidian vault.

   bash

   git clone https://github.com/gameservershub/next-template acme-site
   cd acme-site
   mv my-app acme-app          # rename to your slug
   sed -i 's/my-app/acme-app/g' package.json   # adjust references

2. 2. Install dependencies

   The template ships locked dependency versions in package-lock.json. Use npm ci in CI; npm install locally is fine. Node 24 matches the Dockerfile.

   bash

   cd acme-app
   npm install
   # verify the install succeeded:
   npm run build

3. 3. Configure env vars

   Copy .env.example to .env.local for development. NEXT_PUBLIC_SITE_URL is the only required variable. It is validated at startup by lib/env.ts (Zod) and used by every JSON-LD payload, every canonical URL, and the sitemap.

   bash

   cp .env.example .env.local
   # edit .env.local:
   # NEXT_PUBLIC_SITE_URL=https://acme.com

4. 4. Replace the brand surface

   Update SITE in lib/seo.ts (name, tagline, description, social handles, defaultOgImage). Drop a square brand mark into examples/ and run `node scripts/generate-icons.mjs <file>` to rebuild favicon.ico, icon.png, apple-icon.png, and the PWA manifest icons. Regenerate the OG image by editing app/opengraph-image.tsx. It renders via Satori, which only supports hex/rgb colors (no oklch).

   tsx

   // lib/seo.ts
   export const SITE = {
     name: 'Acme',
     shortName: 'Acme',
     tagline: 'Build, ship, repeat',
     description: 'Acme is a …',
     url: env.NEXT_PUBLIC_SITE_URL,
     defaultOgImage: '/opengraph-image',
     twitterHandle: '@acme',
     themeColor: '#0a0a0a',
   } as const

5. 5. Add the routes you need

   Each new route lives at app/<route>/page.tsx. Always export metadata via buildMetadata() and add a <JsonLd> block. Add the route to app/sitemap.ts so it gets crawled. Follow the agent workflow: Research → Design → Implement → Audit → Log.

   tsx

   // app/about/page.tsx
   import { buildMetadata } from '@/lib/seo'
   
   export const metadata = buildMetadata({
     title: 'About · Acme',
     description: 'How Acme came to be …',
     path: '/about',
   })
   
   export default function AboutPage() {
     return <article>…</article>
   }

6. 6. Develop locally

   npm run dev starts Turbopack on port 3000. The proxy.ts middleware applies a per-request CSP nonce, so every page is dynamically rendered. Hot reload is instant.

   bash

   npm run dev
   # → http://localhost:3000

7. 7. Deploy to Dokploy

   Push the repo to a Git remote Dokploy can reach. In Dokploy, create an Application with build type Dockerfile, point at ./acme-app/Dockerfile, expose port 3000, set NODE_ENV=production, HOSTNAME=0.0.0.0, PORT=3000, NEXT_PUBLIC_SITE_URL, and a /api/health healthcheck. Attach a domain and Traefik issues HTTPS via Let’s Encrypt automatically.

   bash

   # In Dokploy UI:
   #   Source:        Git
   #   Build type:    Dockerfile
   #   Dockerfile:    ./acme-app/Dockerfile
   #   Port:          3000
   #   Healthcheck:   GET /api/health → 200
   #   Env:
   #     NODE_ENV=production
   #     HOSTNAME=0.0.0.0
   #     PORT=3000
   #     NEXT_PUBLIC_SITE_URL=https://acme.com

8. 8. Log to the vault

   On the first session for the new project, push a decision entry to .claude/vault-queue.json describing the project, its goals, and any stack deviations. The Stop hook drains the queue at session end into your project documentation vault under 04 - Projects/<your-slug>/.

   json

   [
     {
       "type": "decision",
       "title": "ADR-0001 · Acme project kickoff",
       "context": "Marketing site for Acme.",
       "decision": "Adopt next-template defaults, no stack deviations.",
       "consequences": "Inherits all SEO/AEO/GEO/a11y/security baselines.",
       "status": "accepted"
     }
   ]

Common questions

Specific things people ask while spinning up a project from this template.