Guides

Building on the template

Portrait of Jordan Lee
Jordan Lee
Product Engineer ·
A developer's workspace with code on screen

This template gives you the parts every web app re-derives from scratch — internationalized routing, SEO and metadata, a shared design system, and a content system — already wired together, so you can spend your first day on your actual product instead of plumbing.

What's in the box

  • Internationalization — locale-aware routing with the default locale served unprefixed and the rest under a prefix, driven by a single config.
  • SEO — canonical URLs, hreflang, Open Graph/Twitter, and JSON-LD, composed from shared metadata helpers.
  • Content — docs, blog, legal, and author pages rendered from MDX, all statically generated.
  • Design system — the shared @zybric/design-system primitives and theme.

Adding your first page

Routes live under src/app/[locale]. A new marketing page is a folder with a page.tsx:

export default function AboutPage() {
  return <main className="container mx-auto py-16">About us</main>;
}

Server Components are the default — reach for 'use client' only when you need state, effects, or browser APIs.

Where to go next

Read Getting started to set up your environment, then skim Project structure to learn where everything lives.

Start building

Copy this template, point it at your own services, and start with the interesting part.

Portrait of Jordan Lee

About the author

Jordan Lee

Product Engineer

Jordan Lee is a product engineer who writes about shipping web apps — internationalization, SEO, and the wiring that makes a codebase pleasant to build on.

Next.jsInternationalizationSEODeveloper Experience

More stories