Pages and sections — Findit Next.js

A page is a small file that picks sections and hands them content. src/app/property/page.tsx is the whole Properties page:

export const metadata: Metadata = pageMeta(routes.properties, { title: content.meta.title, description: content.meta.description });

export default async function PropertiesPage() {
  const { groups, cards } = await getPropertyList({ type: "all" }, content);
  return (
    <>
      <PropertiesSection content={content} exploring={content.filter.all} groups={groups} properties={cards} />
      <FaqSection content={faq} />
    </>
  );
}

• pageMeta(route, meta) gives the page its browser title, description, canonical link and share image.
• getPropertyList() reads the collections (see Editing the content) and prepares the cards and the filters.
• The sections render them.

The sections you can use

In src/components/sections/. Each takes its copy as content and its data as a list.

Section	Used on
HomeHeroSection, FeaturedSection, BenefitsSection, CitiesSection, ProcessSection, LatestSection, TestimonialsSection, FactsSection, BlogSection	Home
AboutHeroSection, HistorySection, AboutProcessSection, TeamSection, TestimonialsSection, FaqSection	About
PropertiesSection, FaqSection	Properties and the three kinds of filter page
PropertyMainSection, RelatedSection	Property details
AgentsSection, BenefitsSection, LatestSection	Agents
AgentMainSection, AgentPropertiesSection	Agent details
PostsSection	Blog
PostSection, MorePostsSection	Blog post
ContactSection, FactsSection, FaqSection	Contact
AddPropertySection	Add property
LegalSection	Terms of Service, Privacy Policy
SuccessSection	The two “thank you” pages
NotFoundSection	404

Copy that several pages share — benefits, process, latest properties, testimonials, facts and the FAQ — is in src/content/sections.ts, so changing it once changes it everywhere it appears.

Page maps

Every page type with each section outlined and labelled: the component that renders it, the file to edit, and where its copy (src/content/pages/*.ts) and items (src/content/collections/*.ts) come from. Header and footer take their links and details from src/content/site.ts. Photos are the placeholders of the download.

Home

About

Properties

The list, the three kinds of filter page (/filter/type/sell, /filter/type/rent, /filter/location/<slug>, /filter/property-category/<slug>) and the location and category pages are this same layout with another list and title.

Property details

Agents

Agent details

Blog

Blog post

Contact

Add property

Legal

Thank you

Shown after “Schedule a tour” (/success/scheduled) and after “Add property” (/success/add-property), with the words of src/content/pages/success.ts (tour and property).

Page not found

Filters

The Properties page and its filter pages read getPropertyList() in src/lib/property-list.ts. It builds the chips from the collections, so you never register a filter:

• Type — “Sell” or “Rent”, from each property’s for.
• Category and Location — every category and location that at least one property uses.

Each option is a page of its own (/filter/type/sell, /filter/location/brooklyn, /filter/property-category/apartments) with its own title, description and canonical link, set in the meta of src/content/pages/properties.ts. A location or category that no property uses keeps its page but is noindex and left out of sitemap.xml, so search engines never list an empty result.

Reordering or removing a section

Move the lines in the page file, or delete one. To take the testimonials off the home page, delete <TestimonialsSection … /> from src/app/page.tsx; its copy in src/content/sections.ts can stay or go.

Adding a page

1. Add the URL to src/content/routes.ts:

   pricing: "/pricing",

2. Add its copy to src/content/pages/pricing.ts, with a meta (title, description):

   export const pricing = {
     meta: { title: "Pricing", description: "What it costs to list a property with us, in plain numbers." },
     cta: { … },
   };

3. Create src/app/pricing/page.tsx:

   import type { Metadata } from "next";
   import { FaqSection } from "@/components/sections/FaqSection";
   import { faq } from "@/content/sections";
   import { pricing } from "@/content/pages/pricing";
   import { routes } from "@/content/routes";
   import { pageMeta } from "@/lib/meta";
   
   export const metadata: Metadata = pageMeta(routes.pricing, pricing.meta);
   
   export default function PricingPage() {
     return <FaqSection content={faq} />;
   }

4. Link to it: add { label: "Pricing", href: routes.pricing } to navigation in src/content/site.ts, or to the footer links.
5. Add it to src/app/sitemap.ts, next to the other top-level pages.

Removing a page

Delete its folder under src/app/, its entry in navigation and in src/app/sitemap.ts, and the route in routes.ts. npm run build then tells you about anything still linking to it through routes.

Pages built from a collection

src/app/blog/[slug]/page.tsx builds one page per post:

export const dynamicParams = false;                     // only the slugs below exist; anything else is a 404
export async function generateStaticParams() {
  return (await getPosts()).map((post) => ({ slug: post.slug }));
}

Add a post to src/content/collections/posts.ts and its page, its links and its sitemap entry appear on the next build. The same pattern builds the property, agent and legal pages.

The 404 page

src/app/not-found.tsx, with its copy in src/content/pages/not-found.ts. It is noindex, like the style guide and the two “thank you” pages.

Search engines

• src/app/sitemap.ts builds sitemap.xml from routes.ts and the collections, so new items list themselves. The thank-you pages, the 404 page and empty filter pages are left out.
• src/app/robots.ts builds robots.txt and points at the sitemap. Both use site.url, so set your domain before publishing.
• Every indexable page gets a title, a description, a canonical link, an og:url and a share image from pageMeta (src/lib/meta.ts). A title that would be longer than 60 characters with | Findit appended is shown without the suffix.
• noindex pages: the style guide, both thank-you pages, the 404 page and any filter page without properties.