Your job is the use exactly this fetch method no serversideprops no staticpaths, no usestate, no use effect for this task because i want the simple server side rendering that's why i used direct fetch method it working amazing now your job is to add the project data in components and the property pages just map these fields below replace the old static content

This is my API Code // page.tsx (Server Component) import { fetchProjects, fetchProjectBySlug } from "@/app/lib/data"; import { project } from "@/data/types"; import type { Project } from "@/types/project"; import Image from "next/image";

export default async function MyPage() { // Fetch data directly within the Server Component const data = await fetchProjects();

return (

{data.map((project: project) => (

{/* Use project data here */}

{project.name}

{project.summary}

Developer: {project.developer}

Type: {project.buildingType}

Bedrooms: {project.bedrooms}

Units/Stories: {project.unitsStories}

Completion: {project.estimatedCompletion}

Status: {project.status}

Province: {project.province}

Images:

{project.images && project.images[1] && ( {project.images[1].ImageDescription}

)}

{project.developer}

{/* ... */}

))}

); }

Project Slug Page

// app/projects/[slug]/page.tsx import { project } from "@/types/project"; import { fetchProjects, fetchProjectBySlug } from "@/app/lib/data"; import Image from "next/image"; export async function generateStaticParams() { const projects = await fetchProjects();

return projects.map((project) => ({ params: { slug: project.slug }, })); }

export default async function Page({ params }: { params: any }) { // Fetch data directly within the Server Component const project = await fetchProjectBySlug(params.slug);

return (

{/* Use project data here */}

{project.name}

{project.summary}

{project.name}

{project.summary}

Developer: {project.developer}

Type: {project.buildingType}

Bedrooms: {project.bedrooms}

Units/Stories: {project.unitsStories}

Completion: {project.estimatedCompletion}

Status: {project.status}

Province: {project.province}

Images:

{project.images && project.images[1] && ( {project.images[1].ImageDescription}

)}

{/* ... */}

); }

// app/lib/data.ts (Server Component) import { unstable_noStore as noStore } from 'next/cache'; import type { Project } from '@/types/project'; // Assuming you have a Project type defined

const BASE_URL = 'https://projectsapi-j1mi.onrender.com/projects'; // Replace with your actual API base URL

// Fetch all projects export async function fetchProjects(): Promise<Project[]> { noStore(); const res = await fetch(BASE_URL); if (!res.ok) { throw new Error('Failed to fetch projects'); } return res.json(); }

// Fetch a single project by Slug export async function fetchProjectBySlug(slug: string): Promise { noStore(); const res = await fetch(${BASE_URL}/${slug}); if (!res.ok) { throw new Error(Failed to fetch project with ID: ${slug}); } return res.json(); }

// Generate static params for projects export async function generateStaticParams() { const projects = await fetchProjects();

          return projects.map((project: Project) => ({
                        params: { slug: project.slug },
          }));

}

// ... Add more functions as needed

Here is the Sample of Our Response for single Project

[ { "_id": "842d135f-4c3a-46ad-952c-73d87ad538a3", "address": "17 Baldwin Street,", "name": "Prince George Landing", "slug": "prince-george-landing", "bedrooms": "1 - 3 Bedrooms", "buildingType": "Condo & Townhouse", "city_name": "Whitby,", "developer": "Stockworth Developments", "developer_info": "Stockworth Developments, Rosewater Developments, Whitby, ON", "estimatedCompletion": "Preconstruction", "images": [ { "_id": "6617a04935efa29ef186028d", "ImageName": "Prince George Landing Rendering", "ImageDescription": "Exterior photo of Prince George Landing", "ImagePath": "https://d2kcmk0r62r1qk.cloudfront.net/imageSponsors/xlarge/2017_03_29_10_43_24_stockworth_developments_prince_george_rendering.webp" }, { "_id": "6617a04935efa29ef186028e", "ImageName": "Prince George Landing Rendering", "ImageDescription": "Exterior photo of Prince George Landing", "ImagePath": "https://d2kcmk0r62r1qk.cloudfront.net/imageSponsors/xlarge/2018_10_09_04_00_13_princegeorgelanding.com-686493590913612.webp" }, { "_id": "6617a04935efa29ef186028f", "ImageName": "Prince George Landing Rendering", "ImageDescription": "Exterior photo of Prince George Landing", "ImagePath": "https://d2kcmk0r62r1qk.cloudfront.net/imageSponsors/xlarge/2018_10_09_04_00_13_princegeorgelanding.com-686486264150650.webp" } ], "incentives": "Not available", "price": "Not available", "province": "ON", "sizeSqFt": "Not available", "status": "Pending", "street_name": "17 Baldwin Street,", "summary": "Stockworth Developments acquired a site located on Baldwin Street and George Street in the Community of Brooklin, Town of Whitby, Ontario. The site will be a mixed use development consisting of a small retail component and a combination of luxury and stacked towns. Stockworth Developments and Rosewater Developments will co-develop and build the site out. Rich in history and culture, the community of Brooklin within the town of Whitby combines the charm of a small town with the amenities of a busy city. Backing onto a ravine, fronting onto Baldwin Street, featuring balconies and underground parking, Prince George Landing is where your life combines with nature. These townhomes and apartments are perfectly situated in the heart of Brooklin, the perfect community for families and couples alike. Between the schools, shopping, and countless other convenient amenities, Prince George Landing is without a doubt where your dreams will become reality.", "unitsStories": "85 Units,", "units": [ { "_id": "6617a04935efa29ef1860290", "br": 1, "status": "Not Available", "statusName": "Sold", "colType": "Condos", "unitType": "Unit", "unitName": "312", "ba": 1, "sqft": 691, "lotBalc": "", "price": null, "lastPrice": null, "lastPriceWithValue": null, "unitStyle": "Suite", "url": "https://whitby-on/prince-george-landing/condo-unit--312", "image": "https://d2kcmk0r62r1qk.cloudfront.net/imageFloorPlans/2019_02_01_03_04_53_building-a_1.png" },

Checklist

- [X] Create `src/app/lib/data.ts` ✓ https://github.com/labi1240/nextchris/commit/f1a8a6b5e8391a8f979e5c0db273b659ea85e7d0 [Edit](https://github.com/labi1240/nextchris/edit/sweep/i_want_to_use_the_api_instead_of_hardcod/src/app/lib/data.ts) - [X] Running GitHub Actions for `src/app/lib/data.ts` ✓ [Edit](https://github.com/labi1240/nextchris/edit/sweep/i_want_to_use_the_api_instead_of_hardcod/src/app/lib/data.ts) - [X] Modify `src/app/(project-listings)/listing-project/page.tsx` ✓ https://github.com/labi1240/nextchris/commit/8ea916f339344e5c67166a60204f775d43eceaa1 [Edit](https://github.com/labi1240/nextchris/edit/sweep/i_want_to_use_the_api_instead_of_hardcod/src/app/(project-listings)/listing-project/page.tsx) - [X] Running GitHub Actions for `src/app/(project-listings)/listing-project/page.tsx` ✓ [Edit](https://github.com/labi1240/nextchris/edit/sweep/i_want_to_use_the_api_instead_of_hardcod/src/app/(project-listings)/listing-project/page.tsx) - [X] Modify `src/app/page.tsx` ! No changes made [Edit](https://github.com/labi1240/nextchris/edit/sweep/i_want_to_use_the_api_instead_of_hardcod/src/app/page.tsx) - [X] Running GitHub Actions for `src/app/page.tsx` ✗ [Edit](https://github.com/labi1240/nextchris/edit/sweep/i_want_to_use_the_api_instead_of_hardcod/src/app/page.tsx)

labi1240 / nextchris

Sweep: I want to use the api instead of Hardcoded static data #4

{project.name}

{project.developer}

{project.name}

{project.name}

🚀 Here's the PR! #5

Actions (click)

Step 1: 🔎 Searching

Step 2: ⌨️ Coding

Step 3: 🔁 Code Review