Properties Page
Creating Properties Page Components
Preparations
Add properties.json file in your project root directory:
Create properties images folder in public folder as follows: public>images>properties and then add all images in images>properties folder
1. Set Up the Properties Page
a. Update the Properties Page File
In your Next.js project, update a Page.jsx file for the properties page. For example:
This file will serve as the main page where all property listings are displayed.
b. Import the JSON Data
Place your
properties.jsonfile in an accessible location (e.g., in the project root or in a/datafolder).In your
page.jsxfile, import the JSON data:
find <!— All Listings --> comment section and just copy first three lines of code and past them to page,jsx
2. Build the Page Structure
a. Create a Container for Listings
Start by creating a section element that holds your property listings. You can copy the outer container markup from your theme file:
b. Implement Conditional Rendering for Empty Data
Before rendering the listings, check if the properties array is empty and display a message if so:
3. Render the Property Listings
a. Loop Through the Properties Data
Use JavaScript’s
.map()to iterate through the properties array and render each listing as a card:Insert this code inside the grid container from the previous step.
4. Create the Property Card Component
a. Create a New Component File
In the
components/folder, create a new file namedPropertyCard.jsx:
b. Build the Component Structure
Copy the relevant HTML markup for a property listing from your theme’s
properties.html(the markup between the listing divs) intoPropertyCard.jsx.Modify the static content to dynamically display property data using the
propertyprop.Example:
Note: Adjust the paths and markup as needed to match your actual JSON structure and theme design.
5. Integrate the Property Card Component
a. Import the PropertyCard Component
In your
app/properties/page.jsxfile, import the component at the top:
b. Use the Component in the Map Function
Replace the placeholder div in your
.map()loop with the<PropertyCard />component, passing the property data as props:
6. Leverage Next.js Rendering Strategies
a. Server Rendering for Static Data
Since the properties data is coming from a static JSON file, you can leverage Next.js’s server components or static generation to render this page.
In Next.js 13+ with the app directory, pages are server components by default, which means the data is fetched at build time or request time and the page is rendered on the server.
b. Future Enhancements
Once you integrate an API or database, you can modify the data fetching strategy (e.g., using
getStaticPropsorfetchinside server components) without affecting your component structure.
7. Test and Refine
a. Run the Development Server
Start your Next.js server:
Navigate to http://localhost:3000/properties and verify that:
The container displays a heading and the grid.
If there are no properties, the “No properties found” message appears.
Each property from your JSON data is rendered as a PropertyCard with dynamic content.
b. Adjust Styling and Layout
Refine the Tailwind CSS classes and layout to match your desired design.
Verify responsiveness on different screen sizes.
Recap
Properties Page Setup: Create a dedicated page that imports data from a JSON file and conditionally renders a grid of property listings.
Dynamic Rendering: Use
.map()to iterate over the properties and render each one with a reusable PropertyCard component.Component Reusability: Build a PropertyCard component that dynamically displays property details, leveraging the structure provided in your theme files.
Next.js Rendering: Leverage Next.js server components (default in the app folder) for efficient, server-side rendering of static data, with room for future API integration.
Last updated