Startup & SaaS NextJS Template

DOCUMENTATION

• Doc version: 3.0
• Created: 16 March 2023
• Last update: 29 March 2025

OVERVIEW

Sala is a Technology & Startup, SaaS NextJS 14 (App and Page router) template for modern Startups and Tech companies who want to create outstanding digital experiences for their visitors. Sala is a clean, fast, responsive, performance-optimized template for your Startup agency. By using this theme anyone can build Startups, Apps, SaaS, Crypto, Software, IT services… website

It will display your content nicely on Desktop, Laptop, iPad, iPhone, Android Mobile, or tablets. This is highly customizable & looks awesome modern react template. We have included the best web development practices – you can create a great website layout.

We have a dedicated support center for all of your support needs. It includes our Documentation and Ticket system for any questions you have.

Main Features

• +27 unique home pages and landing pages
• 03 About Pages
• 03 Contact Us Pages
• 03 Services Pages
• 20 Blog Pages
• 14 Portfolio Pages
• 05 Shop Pages
• FAQ Page, Coming Soon Page, Maintain Page, Construction Page, 404 Page, Sign In Page, Sign Up Page, Privacy Policy Page, Carrer Page
• Full Dark Mode
• Multipurpose usage: Demos for startup, business, SaaS, software, SEO, marketing, agency, etc
• Creative and Unique Design
• Handcrafted and carefully put together inner pages to choose from
• React 18, NextJs 14 (App and Page router)
• React countup
• React scroll-up
• React wow animation
• React swiper slider
• React Leaflet map
• React scroll trigger
• React tabs
• Bunny Fonts
• 100% Responsive
• Nice and Clean Design
• Clean and commented code
• Valid Redux / JS Component / CSS3
• Easy to customize
• Flexible and multi-purpose
• Built On Bootstrap 5
• Detailed documentation
• Lifetime Free Update
• And much more…

What do you get?

• 1.sala-nextjs-14-App-router
• 2.sala-nextjs-14-Page-router
• 3.Documentation
• 4.Licensing

Note

All images are just used for Preview Purpose Only. They are not part of the template and maybe NOT included in the final purchase files.

Change log

                                VERSION 3.0
                                - Upgrade to NextJS 14.
                                - Add to App router.

                                VERSION 2.2
                                - Fix Dark Light Switcher Label

                                VERSION 2.1
                                - Fix CounterUp issue

                                VERSION 2.0
                                - Add 34 pages

                                VERSION 1.0
                                - First release.
                            

GET STARTED

Folder Structure

We have 2 options for you: App router and Page router.

Here is the structure of the App router source code:

Here is the structure of the Page router source code:

Layout Structure

layout.js Structure (for App router)

_app.js Structure (for Page router)

Dependencies

package.json

                                "dependencies": {
                                    "animate.css": "^4.1.1",
                                    "eslint": "8.34.0",
                                    "eslint-config-next": "13.2.1",
                                    "isotope-layout": "^3.0.6",
                                    "leaflet": "^1.9.3",
                                    "next": "14.2.0",
                                    "nextjs-progressbar": "^0.0.16",
                                    "react": "18.2.0",
                                    "react-countup": "^6.4.1",
                                    "react-dom": "18.2.0",
                                    "react-leaflet": "^4.2.1",
                                    "react-modal-video": "^2.0.0",
                                    "react-responsive-masonry": "^2.1.7",
                                    "react-scroll-trigger": "^0.6.14",
                                    "react-tabs": "^6.0.0",
                                    "sass": "^1.58.3",
                                    "swiper": "^9.0.5",
                                    "wowjs": "^1.1.3"
                                }
                            

Create a Page

Create page pages\blank.js

                                function Blank() {
                                    export function MyPage() {
                                      return(
                                       
Hello!
                                      )
                                    }
                                export default Blank;
                            

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 -