VEXON

Blog Magazine NextJS Template

DOCUMENTATION

• Doc version: 1.0
• Created: 08 March 2025
• Last update: 08 March 2025

OVERVIEW

HouseBox - Real Estate NextJS Redux Template is a cutting-edge, versatile template meticulously crafted for the real estate industry. Whether you’re building a property directory, a real estate agency website, a broker platform, or a rental listing portal, HouseBox delivers a seamless and modern solution tailored to your needs. This template combines the power of NextJS, Redux, and Bootstrap 5 to offer an exceptional user experience that meets the demands of today’s digital real estate landscape.

With stunning layouts and advanced features, HouseBox empowers you to showcase properties, services, and portfolios with ease. It includes a User Dashboard built with modern technologies, making it a breeze for developers to integrate and extend using their preferred programming languages.

Rigorously tested for compatibility across all major browsers (Firefox, Chrome, Edge, Safari, and more) and devices (desktop, iPhone, iPad, tablets, and smartphones), HouseBox ensures a flawless display and functionality. Its mobile-optimized design and high customization options, powered by the Bootstrap 5 grid system, allow you to create a professional real estate website that stands out.

Our dedicated Support Center is available for all your needs, including detailed Documentation and a Ticket System for any questions. We typically respond within 12-24 hours. We’re continuously enhancing this template with new homepages and features—buy once and enjoy lifetime updates at no extra cost!

Main Features

• React 18, NextJS 14, App Router for blazing-fast performance
• Redux for efficient state management
• 04 Creative Homepages designed for real estate (more to come!)
• Figma Design Included – a valuable bonus for quick customization
• User Dashboard for enhanced functionality
• Multiple Header & Footer Styles
• Modern, bold, and user-friendly design
• Typescript (TSX) support for robust development
• React Swiper Slider for stunning property showcases
• GSAP Animations and AOS Animations for engaging transitions
• 100% Fully Responsive and retina-ready across all devices
• Built on Bootstrap 5 Framework for rapid development
• SEO Optimized and W3C Validated Code
• Cross-browser compatibility (including IE9+)
• Pixel-perfect design with easily customizable colors and fonts
• Clean, commented, and reusable code
• Detailed Documentation with setup guides
• Lifetime Free Updates and dedicated support
• And much more…

What do you get?

• NextJS Template Source Code
• Figma Design File
• Comprehensive Documentation

Note

- All images are used for preview purposes only and are not included in the final purchase files.
- This is not a WordPress theme; it is a NextJS-based template.

Change log

                                VERSION 1.0
                                - First release.
                            

GET STARTED

Folder Structure

Structure

layout.tsx Structure

Dependencies

package.json

                                "dependencies": {
                                    "@reduxjs/toolkit": "^2.6.0",
                                    "@types/react-slick": "^0.23.13",
                                    "aos": "^2.3.4",
                                    "bootstrap": "^5.3.3",
                                    "chart.js": "^4.4.8",
                                    "gsap": "^3.12.7",
                                    "lucide-react": "^0.477.0",
                                    "next": "15.1.6",
                                    "react": "^18",
                                    "react-countup": "^6.5.3",
                                    "react-dom": "^18",
                                    "react-modal-video": "^2.0.2",
                                    "react-redux": "^9.2.0",
                                    "react-slick": "^0.30.3",
                                    "slick-carousel": "^1.8.1",
                                    "swiper": "^11.2.4"
                                  },
                                  "devDependencies": {
                                    "@types/aos": "^3.0.7",
                                    "@types/bootstrap": "^5.2.10",
                                    "@types/node": "^22",
                                    "@types/react": "^18",
                                    "@types/react-dom": "^18",
                                    "@types/react-modal-video": "^1.2.3",
                                    "eslint": "^9",
                                    "eslint-config-next": "15.1.6",
                                    "typescript": "^5"
                                  }
                            

Routing

The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application

A React component called Link is provided to do this client-side route transition.

In the example above we have multiple links, each one maps a path (href) to a known page:

• / → pages/index.js
• /page-about → pages/page-about.js

Any in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using Static Generation. The corresponding data for server-rendered routes is not prefetched.

Deployment

If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.

Then, follow these steps:

• Sign up to Vercel (no credit card is required).
• After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
• Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
• After importing, it’ll deploy your Next.js app and provide you with a deployment URL
• To get more help on the deployment checkout

UPDATE

Important Note:

- Backup your website and template folders completely to make sure you have a restore point in case of any complications.

Update using FTP

1. Download the latest version of the template to your device.
2. Connect to your hosting via FTP software
3. Upload the template folder you unzipped to your site folder
4. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.

SOURCES & CREDITS

THANK YOU

Thank you so much for using this template.

- AliThemes Team -