Skip to content

Going live

Where
Your domain in site.url src/content/site.ts — share links, sitemap.xml and robots.txt are built from it
Name, title, description src/content/site.ts
Contact details, opening hours, map link src/content/site.ts
Browser icons replaced src/app/icon.svg, favicon.ico, apple-icon.png
Share image replaced and described src/app/opengraph-image.png, opengraph-image.alt.txt
Demo text and photos replaced src/content/pages/, src/content/collections/, public/images/
Forms deliver to you Forms
Style guide kept or deleted src/app/style-guide/
npm run build passes

The demo content is there to be replaced: leaving “Nitip”, the London address or the sample case studies on a live site is the most common mistake.

The site is a normal Next.js app: it builds to pre-rendered pages and runs on Node.js, so any host that supports Next.js works.

Vercel (made by the Next.js team, free for personal sites)

Section titled “Vercel (made by the Next.js team, free for personal sites)”
  1. Push the project to GitHub, GitLab or Bitbucket.
  2. https://vercel.com/new → import the repository → Deploy. The framework, build command and output are detected.
  3. Add your form variables under Settings → Environment Variables, then redeploy.
  4. Settings → Domains → add your domain and follow the DNS instructions.

Import the repository, keep the detected settings (npm run build), add the environment variables, deploy.

Use @opennextjs/cloudflare (npx opennextjs-cloudflare build), then deploy with Wrangler. Cloudflare’s docs walk through it; the template needs no change.

Terminal window
npm ci
npm run build
npm start # listens on port 3000

Run it under a process manager (pm2, systemd) behind nginx or Caddy for TLS, or in a container — node:20-alpine, copy the project, build, CMD ["npm", "start"].

  1. Check the pages. Click through every page on a phone and a laptop: menu, sliders, accordions, Load More, both forms.
  2. Send yourself a submission from the live site and reply to it.
  3. Verify the share card. Paste your URL into https://www.opengraph.xyz or a chat window and confirm the image and title.
  4. Tell Google. Add the site to Search Console, verify ownership and submit https://yourdomain.com/sitemap.xml. Bing has the same thing in Webmaster Tools.
  5. Analytics, if you want it. Add your snippet to src/app/layout.tsx, or use your host’s built-in analytics (Vercel Analytics, Cloudflare Web Analytics, Plausible, Fathom) — none of them need a cookie banner.
  6. Keep the content moving. New posts, projects and roles are a file each; see Editing the content, or connect a CMS (Using a headless CMS) if someone else will publish.

The template ships with what search engines look for: pre-rendered HTML, one <h1> per page, titles and descriptions per page, canonical links, sitemap.xml, robots.txt, share cards, sized and lazy-loaded images, and a Lighthouse score in the high nineties. Keeping it there is mostly about images: export photos at the size they are shown, not the size your camera produced.