Going live — Ciketo Next.js
Before the site goes public, replace the demo’s details, figures and pictures and point the quote form at you. Then deploy it to any host that runs Next.js, and check it once more on the live address.
Before you deploy
Section titled “Before you deploy”| Where | |
|---|---|
Your domain in site.url |
src/content/site.ts. Share links, sitemap.xml and robots.txt are built from it. |
| Name, title, description | site in src/content/site.ts; the home page’s title in src/app/page.tsx |
Contact details (hello@example.com, support@example.com, the phone number and the address are placeholders) |
contact in src/content/site.ts; the phone also in cta.secondary.href (“Call Customer Service”) |
| Business hours | hours in src/content/pages/contact.ts |
| Social links | socials in src/content/site.ts |
| Logo replaced | src/design-system/components/brand/Logo.tsx (Making it look like your brand) |
| Browser icons replaced | src/app/icon.svg, src/app/apple-icon.png |
| Share image replaced and described | public/opengraph-image.png, its description in src/lib/meta.ts |
| Demo text, photos and client logos replaced | src/content/pages/, src/content/collections/, public/images/ |
| Your own figures: years, countries, on-time rate, accounts, lanes | facts in src/content/site.ts, hero in src/content/pages/home.ts, each service’s about.facts |
| Lanes with your routes and transit times | src/content/collections/lanes.ts |
| Privacy Policy, Terms & Conditions and Cookie Policy replaced with your own | src/content/collections/legal.ts |
| Page titles and descriptions written for your business | The meta of each file in src/content/pages/ |
| The quote form delivers 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 “Ciketo”, the sample address, the sample figures or the sample clients on a live site is the most common mistake. The legal texts are examples, not legal advice — have yours written or reviewed for your country.
Deploy
Section titled “Deploy”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)”- Push the project to GitHub, GitLab or Bitbucket.
- https://vercel.com/new → import the repository → Deploy. The framework, build command and output are detected.
- Add your form variables under Settings → Environment Variables, then redeploy.
- Settings → Domains → add your domain and follow the DNS instructions.
Netlify
Section titled “Netlify”Import the repository, keep the detected settings (npm run build), add the environment variables, deploy.
Cloudflare Workers
Section titled “Cloudflare Workers”Use @opennextjs/cloudflare (npx opennextjs-cloudflare build), then deploy with Wrangler. Cloudflare’s docs walk
through it; the template needs no change.
Your own server
Section titled “Your own server”npm cinpm run buildnpm start # listens on port 3000Run 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"].
After it is live
Section titled “After it is live”- Check the pages. Click through every page on a phone and a laptop:
- the menu, the phone menu and the header over the Home and Contact photos;
- the services list, the “How it works” steps, the testimonials and the FAQ on Home;
- the Blog loading more posts as you scroll;
- the quote form.
- Send yourself a quote request from the live site and reply to it.
- Verify the share card. Paste the URL of the home page and of a service into https://www.opengraph.xyz or a chat window, and confirm the image and title.
- 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. - 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. - Keep it current. A new post is one entry in
src/content/collections/posts.ts, a new lane one entry inlanes.ts; see Editing the content. Connect a CMS (Using a headless CMS) if someone else will publish.
Performance and SEO
Section titled “Performance and SEO”The template ships with what search engines look for:
- pre-rendered HTML, with links in it to every page (the Blog’s later posts included);
- one
<h1>per page, and a title and description for every page; - canonical links,
sitemap.xml,robots.txtand share cards; - sized, lazy-loaded images.
Keeping the site fast is mostly about images. Export photos at the size they are shown, not the size your camera produced; the placeholders show the size each one was designed for.