Install and run — Tustel Next.js

Tustel 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. Every page is pre-rendered; only the contact form runs on the server.

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. It reads the route types that npm run dev and npm run build generate, so run one of them once first.

Run npm run build before publishing. It checks the types, so it catches a missing field 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
    portfolio/page.tsx  /portfolio ("Works" in the menu), every project
    portfolio/[slug]/   one page per project
    blog/page.tsx       /blog, every post
    blog/[slug]/        one page per post
    contact/            /contact, with the contact form
    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, ProjectSections, …)
    site/               header (with the phone menu) and footer
  content/
    site.ts             name, description, domain, menu, booking link, contact details, social links, footer, and the
                        parts several pages share: "Let's work together", the photo band, "From the journal", counters
    pages/*.ts          the copy of one page each, including its title and description (contact.ts also has the form)
    collections/*.ts    projects, services, testimonials, posts, clients
    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 contact form sends
    forms/              form providers (console, webhook, Mailchimp, Resend)
    meta.ts             the canonical link, share image and title of a page
    format.ts           dates, search descriptions and phone links
    image-size.ts       reads each photo's size when the site builds, so cards and galleries keep its proportions
    to-ui.ts            turns projects, posts, clients and contact details into what the components show
public/
  images/               photos and client logos used by the content (/images/<file>), and the logo as SVG files
  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.