TL;DR:Solo founder. 30-day sprint. Next.js 15 App Router. Lighthouse 100/100/100/100 on desktop. Zero layout shift. GSC fully indexed. Audit funnel live. Built to sell — not just to exist.
The Challenge
Most agency websites are an afterthought. They’re built quickly, updated rarely, and quietly embarrass the people who sell “premium digital services” from behind them.
Syntotech was no different — at first. The original site was a Vite SPA: fast to ship, but architecturally wrong for an agency competing on SEO and trust. No server-side rendering. No structured metadata. No audit funnel. No clear service positioning. A homepage that looked fine in Figma and converted almost nothing in the real world.
The constraints were real:
- Solo founder with roughly 8 focused hours per week available for the rebuild
- 5 service lines (Web Design, SEO, Social Media, Brand Starter, AI Automation) each needing distinct positioning and pricing signals
- Bilingual expectations — Australian English throughout, with Turkish-market content planned for Tez Mentor integration
- Hard non-negotiables: WCAG AA accessibility, Lighthouse 90+ on mobile, zero security debt, and a form pipeline that actually worked
- Live pilots running in parallel — AK-MER and Tez Mentor were being built on the same infrastructure, so any architectural decision had to scale
The brief to myself was blunt: build something that can close a AUD 2,800 discovery call on its own merits, at midnight, without a salesperson in the room.
The Approach
Stack Decisions
The Vite SPA was replaced with Next.js 15 App Router— not because it’s trendy, but because it solved three problems at once: server-side rendering for SEO, React Server Components for performance, and a file-system router that maps cleanly to a service-based site architecture.
The full stack:
- Next.js 15 App Router + TypeScript (strict mode, no
any) - Tailwind CSS with
cn()utility via clsx + tailwind-merge - shadcn/ui + Lucide React for components — no emoji, no icon fonts
- Vercel for deployment (preview URLs for every PR, prod on merge)
- Resend for transactional email (audit form submissions, contact forms)
- Notion API as the backend CMS for service pages and future content
- Google Analytics 4 + Vercel Analytics for dual-source performance tracking
Design System
The visual direction was chosen deliberately: noir editorial with lime accent (#C8F135). Dark backgrounds, high contrast, large typographic hierarchy, minimal decoration. The reasoning was market positioning — Melbourne’s digital agency market is saturated with light-mode, stock-photo, “we grow your business” generics. Standing out required a distinct visual identity, not a better version of the same thing.
Typographic rules were strict: max 3 hierarchy levels per section, fluid type with clamp(), no system fonts, Australian English throughout (optimise, organisation, behaviour).
Pricing signals were baked into the design — the AUD 2,800 format (never bare $2,800) appeared consistently across service pages, reinforcing the premium positioning without apology.
SEO Architecture
The SEO structure followed the pillar-cluster model from day one. The hub page was deployed simultaneously with the first pillar article — no 404s, no placeholder pages, no “coming soon” in production. Every nav link pointed to a live page.
JSON-LD structured data was implemented for the homepage (Organisation schema) and service pages (Service schema). The sitemap was auto-generated and submitted to Google Search Console on launch day.
Security Layer
Every HTTP response carries the full security header stack:
Content-Security-Policywith connection-src whitelistX-Content-Type-Options: nosniffX-Frame-Options: DENYStrict-Transport-Security: max-age=63072000Referrer-Policy: strict-originPermissions-Policy: camera=(), mic=()
All API routes went through a checklist: Zod schema validation, rate limiting (fail-CLOSED), crypto.timingSafeEqual for token comparisons, HTML-escaped email templates, no stack traces in error responses. Cost: zero. Every security control uses platform features or zero-dependency utilities.
The Execution
Week 0–1: Foundation
The project started with a full component audit of the old Vite SPA — salvaging what was reusable (brand colours, copy drafts, service descriptions) and discarding what wasn’t. The atomic design system was set up first: tokens, then atoms, then molecules. No page-level work until the system was stable. The homepage hero went through four iterations before shipping. The constraint was brutal: the first 3 seconds of scroll had to communicate premium web agency Melbournewithout a visitor reading a single word. The final version used a full-bleed dark canvas, oversized typographic lockup, and a single lime CTA — nothing else above the fold.
Week 2: Service Pages and Form Pipeline
Five service pages were built in parallel, each following the same content structure: hook stat → problem framing → what’s included → what’s not included → pricing tier signal → CTA to audit.
The form pipeline hit an unexpected wall. Brevo SMTP on port 587 was intermittently blocked by Vercel’s edge network on certain regions. Rather than fight infrastructure, the decision was made to migrate to Brevo’s HTTP API — removing the SMTP dependency entirely. Result: 100% delivery reliability, faster response times, and one less failure mode in production. Email templates were rebuilt with full HTML entity encoding (— not —, & not &) after discovering that Outlook was rendering em-dashes as a broken character sequence. Both html and text fields are now sent on every transactional email.
Week 3: SEO and Performance Refinement
Initial Lighthouse scores: desktop 49 performance, mobile 88. The desktop score was dragged down by a render-blocking font load and a missing width/height on hero images. Both were fixed in a single commit — desktop jumped to 100. Mobile CLS was traced to an unanchored floating element in the hero section. Fixed with explicit aspect-ratio constraints. CLS went to 0 on both mobile and desktop.
The most interesting problem came from Google Search Console. The root URL (syntotech.com/) was being flagged as a duplicate canonical — Google was seeing syntotech.com (no trailing slash) as a separate URL. Investigation revealed that Next.js App Router’s metadata.alternates.canonicalproperty was aggressively stripping trailing slashes from the URL constructor output — even hardcoded strings were being normalised.
The fix was an HTTP Link header added via next.config.ts:
async headers() {
return [{
source: '/',
headers: [{
key: 'Link',
value: '<https://syntotech.com/>; rel="canonical"'
}]
}];
}RFC 5988 and Google’s own documentation confirm that HTTP Link headers are valid canonical signals. The duplicate alert cleared within 72 hours of the fix going live.
Week 4: Audit Funnel and Launch
The audit funnel (syntotech.com/audit) was the final conversion layer. A 15-point website audit form, backed by a Notion database for lead capture, with an automated confirmation email triggered on submission. PWA support was added: service worker, web manifest, install prompt. Not essential for conversions, but a signal of technical credibility in discovery calls. The site went live with 19 URLs in the sitemap, all indexed within 5 days of submission.
The Results
| Metric | Before (Vite SPA) | After (Next.js) |
|---|---|---|
| Lighthouse Performance (desktop) | 49 | 100 |
| Lighthouse Performance (mobile) | 88 | 86 |
| Lighthouse Accessibility | 72 | 100 |
| Lighthouse SEO | 83 | 100 |
| Lighthouse Best Practices | 78 | 100 |
| Cumulative Layout Shift | 0.14 | 0 |
| GSC Indexed Pages | 3 | 19 |
| Form delivery rate | ~70 % (SMTP) | 100 % (HTTP API) |
| Security headers | None | Full stack (6 headers) |
| Total build time | N/A | 30 days |
The rebuild took 30 days of part-time work (approximately 8 hours/week). Total infrastructure cost: AUD 0/month beyond Vercel’s hobby tier.
Lessons Learned
- 1
Next.js metadata API has edge cases that matter for SEO.
The trailing slash canonical bug is underdocumented. Any Next.js App Router site with a root URL should verify canonical output via ‘curl -I’ before submitting to GSC. The HTTP Link header workaround is reliable and RFC-compliant.
- 2
SMTP is the wrong choice for transactional email on serverless infrastructure.
Port 587 blocking is a known Vercel edge issue. HTTP API providers (Resend, Brevo) are faster, more reliable, and easier to debug. Migrate early — don’t wait for delivery failures in production.
- 3
Design systems pay back 10x.
The time invested in atomic components and token-based spacing in Week 0 compressed every subsequent page build to hours, not days. The Tez Mentor and AK-MER pilot sites are being built on the same system — the marginal cost of each new project is now measured in component configuration, not architecture.
- 4
Solo founder ≠ slower. Solo founder = focus.
Every decision was made once. No stakeholder approval loops. No design-by-committee. The constraint forced ruthless prioritisation: ship what closes deals, defer what doesn’t.
- 5
Security is not a feature — it’s a default.
All six HTTP security headers cost zero to implement and two hours to set up. In enterprise discovery calls, the first thing a procurement team checks is the response headers. Having them correct before the first sales conversation is table stakes.
Evidence
What This Means for Your Business
If you’re running a Melbourne small business and your website is sitting on a Squarespace template or a WooCommerce installation that hasn’t been touched since 2021 — this is what modern looks like.
Not just “better design.” A site that loads in under a second, ranks on Google from day one, handles form submissions without failing, and doesn’t embarrass you when a potential client runs a quick Lighthouse audit. We built this for ourselves first. Now we build it for clients.
Get your free 15-point website audit
We’ll review your site and show you exactly what’s holding it back.
Published: May 2026 · Author: Osman Akif, Syntotech · Stack: Next.js 15 + TypeScript + Tailwind + Vercel