AstraX

Multipurpose NextJS template

DOCUMENTATION

• Doc version: 2.0
• Created: 01 April 2025
• Last update: 16 April 2025

OVERVIEW

AstraX is a cutting-edge, multipurpose NextJS template designed for versatility and performance. With 27 fully developed website demos spanning industries such as business, technology solutions, fintech, digital agencies, marketing, education, events, and more, AstraX is the ideal solution for businesses, startups, and professionals looking to establish a strong digital presence.

More than just a template, AstraX is a powerful toolkit, offering an extensive selection of UI components, sections, and premium assets that enable you to build stunning, high-performance websites with ease. Whether you’re creating a corporate website, an AI-powered platform, or an online learning portal, AstraX delivers the flexibility and innovation you need.

Main Features

• React 18, NextJS 14, App Router for blazing-fast performance
• 27 Pre-Built Website Demos – Covering a wide range of industries and digital solutions. (more to come!)
• 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
• Video Popup with React-modal-video
• Detailed Documentation with setup guides
• Lifetime Free Updates and dedicated support
• And much more…

What do you get?

• 27 NextJS Template Source Code
• 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.

                                VERSION 2.0
                                - Add 15 sites.
                            

GET STARTED

Folder Structure

Structure

layout.tsx Structure

Dependencies

package.json

                                {
                                    "dependencies": {
                                      "aos": "^2.3.4",
                                      "bootstrap": "^5.3.3",
                                      "gsap": "^3.12.7",
                                      "next": "14.2.0",
                                      "react": "^18",
                                      "react-countup": "^6.5.3",
                                      "react-dom": "^18",
                                      "react-modal-video": "^2.0.2",
                                      "react-waypoint": "^10.3.0",
                                      "swiper": "^11.2.5",
                                      "wowjs": "^1.1.3"
                                    },
                                    "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.0.3",
                                      "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 -