Install and run — Findit Next.js

Findit is a standard Next.js project: unzip it, install the packages and start the development server.

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/ (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
    property/           /property (the list) and property/[slug]/ (one page per property)
    filter/             the filter pages: type/[type], location/[slug], property-category/[slug]
    agent/, blog/       lists and one page per agent or post
    contact/, add-property/, success/, legal/[slug]/
    style-guide/        every component with examples (noindex; delete the folder to remove it)
  components/
    sections/           the sections pages are made of (HomeHeroSection, PropertyMainSection, …)
    site/               header and footer
  content/
    site.ts             name, description, domain, navigation, contact details, footer
    pages/*.ts          the copy of one page each, including its title and description
    sections.ts         copy of the sections several pages share (benefits, process, FAQ, facts, …)
    collections/*.ts    properties, agents, locations, categories, testimonials, posts, legal, team
    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 each form sends and which fields are required
    forms/              form providers (console, webhook, Mailchimp, Resend)
    meta.ts             the canonical link, share image and title rule of a page
public/
  images/               photos used by the content (/images/<file>)
  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 will tell 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/images/ 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.