Home
NextSaaS

Getting Started

Welcome to NextSaaS! This guide will walk you through setting up your NextSaaS development environment and getting your first site running locally. Follow these step-by-step instructions to get started with customizing and developing your NextSaaS project.

Prerequisites#

Before you begin, ensure your development environment meets the following requirements:

System Requirements

  • Node.js version 16.14 or above (Download here)
  • Operating System: Windows, macOS, or Linux
  • Code Editor: VS Code, WebStorm, or your preferred editor
  • Terminal/Command Line access

Installation Guide#

Step 1: Download and Extract

  1. Download the NextSaaS package from your purchase confirmation email
  2. Extract the ZIP file to your desired location
  3. Locate the development folder within the extracted files

Step 2: Create Your Project Directory

  1. Create a new folder for your project:

    mkdir nextsass-project
cd nextsass-project

  2. Copy all contents from the downloaded development folder into your project directory

Step 3: Install Dependencies

Navigate to your project directory and install the required packages:

# Navigate to your project folder
cd nextsass-project

# Install Yarn globally (if not already installed)
npm install -g yarn

# Install project dependencies
yarn install

Alternative: If you prefer npm over Yarn, you can use npm install instead of yarn install.

Step 4: Start Development Server

Launch the development server to begin working on your site:

yarn dev

Expected Output:

✓ Development server started
➜ Local:   http://localhost:5173/
➜ Network: http://192.168.1.x:5173/

Your NextSaaS site will be available at: http://localhost:5173/

Command Reference#

  • yarn install - Installs all project dependencies
  • yarn dev - Starts the development server with hot reload
  • yarn build - Creates a production build of your site
  • yarn preview - Previews the production build locally
  • yarn format - Format your code with prettier

Verification Steps#

After completing the installation, verify everything is working correctly:

  1. Development Server Running: Open http://localhost:5173/ in your browser
  2. Hot Reload Working: Make a small change to any file and verify it updates automatically
  3. No Console Errors: Check browser developer tools for any error messages

Next Steps#

Now that your development environment is set up:

  1. Explore the Customization Guide → - Learn how to modify components, styles, and layouts
  2. Review the project structure - Familiarize yourself with the src/ folder organization
  3. Start customizing - Begin modifying the template to match your requirements