Install and run — Titen Next.js

Titen runs on Node.js with the usual Next.js commands: install the packages once, then start the development server and edit while the page updates by itself.

What you need

Node.js	20.9 or newer (node -v). Download at https://nodejs.org — the LTS build is fine.
A package manager	npm comes with Node. pnpm, yarn and bun work too.
A code editor	VS Code is a good default; any editor works.
A browser	Chrome, Edge, Firefox or Safari.

No database, no account, no paid service. The site builds to static pages.

Install

Unzip the template, open the folder in a terminal and run:

npm install

This downloads the packages listed in package.json into node_modules/. It takes a few minutes the first time.

npm run dev

Open http://localhost:3000. Save a file and the page updates by itself.

The commands

Command	What it does
npm run dev	Development server with live reload
npm run build	Production build — every page is pre-rendered as HTML
npm start	Serves the production build locally (run build first)
npm run lint	Checks the code with ESLint
npx tsc --noEmit	Checks the types without building

Run npm run build before publishing. It catches a missing image or a typo in a content file that the development server tolerates.

What is in the folder

src/
  app/                  one folder per route; also the icons, sitemap.ts and robots.ts
    page.tsx            home
    about/page.tsx      /about
    projects/page.tsx   /projects, every project
    [category]/         one page per project category: /residential, /hospitality, /commercial
    projects/[slug]/    one page per project
    services/[slug]/    one page per service
    blog/[slug]/        one page per post
    testimonial/        /testimonial, every client review
    contact/            /contact
    not-found.tsx       the 404 page
    style-guide/        every component with examples (noindex; delete the folder to remove it)
  components/
    sections/           the sections pages are made of (HomeHeroSection, AboutSections, …)
    site/               header (with the project search) and footer
  content/
    site.ts             name, description, domain, menu, header button, contact details, footer, the project form
    pages/*.ts          the copy of one page each, including its title and description
    collections/*.ts    project categories, projects, services, posts, testimonials
    routes.ts           every URL in the site, in one place
    types.ts            the shape of all content
  design-system/        tokens and reusable components — see its own README
  lib/
    content.ts          the only way pages read content (swap this for a CMS, see cms.md)
    actions.ts          what the forms send and which fields are required
    forms/              form providers (console, webhook, Mailchimp, Resend)
    meta.ts             the canonical link, share image and title of a page
    format.ts           dates and phone links
    to-ui.ts            turns content items into card and list data
public/
  images/               photos and video posters used by the content (/images/<file>)
  brochure.pdf          the "Download brochure" file (Home and every service page)
  opengraph-image.png   the picture shown when a link is shared

Delete src/app/style-guide/ if you don’t want the component gallery on your site; nothing else depends on it.

Editor tips

• Install the Tailwind CSS IntelliSense and ESLint extensions for class name and code hints.
• The project is TypeScript: your editor tells you when a content file is missing a field, before you open the browser.
• Search across files (Ctrl/Cmd + Shift + F) for a phrase you see on the demo site to find the file that holds it.

Updating later

Keep your edits in src/content/, public/ and theme.css where possible. When a new version of the template ships, you can copy your content folder into the new release instead of re-applying changes by hand. CHANGELOG.md lists what changed.