Getting Started

This guide walks you through everything you need to get Jumbo React Next running on your local machine for the first time.

Prerequisites

Before you begin, make sure the following tools are installed:

• Node.js 20.x or later — the project targets Node 20 (@types/node@^20). Download from nodejs.org or manage versions with nvm.
• pnpm 9.x — the packageManager field in package.json declares pnpm@9.15.0 as the canonical package manager. Install via npm install -g pnpm or the pnpm installation guide.
• A code editor — VS Code with the ESLint and Prettier extensions is recommended.

Quick start

1. Download and extract the template

   Purchase and download the Jumbo React Next package. Extract the archive to your preferred workspace directory.

   bash

   unzip jumbo-react-next-v8.zip -d ~/projects/jumbo-react-next
   cd ~/projects/jumbo-react-next

   If you are working from the source repository directly:

   bash

   git clone <repository-url> jumbo-react-next
   cd jumbo-react-next

2. Install dependencies

   Install all required packages using your preferred package manager:

   bash

   # pnpm (recommended)
   pnpm install
    
   # npm
   npm install
    
   # yarn
   yarn install

3. Configure environment variables

   Copy the provided example file and fill in the required values:

   bash

   cp .env.example .env.local

   At minimum, set AUTH_SECRET before starting the app. Generate a secure secret with:

   bash

   openssl rand -base64 32

   Open .env.local and set the value:

   bash

   # .env.local
   AUTH_SECRET=<your-generated-secret>
   AUTH_URL=http://localhost:3000
   AUTH_TRUST_HOST=true

   See Installation for the full environment variable reference.

4. Start the development server

   Launch the app in development mode. Next.js starts with Turbopack and hot module replacement enabled.

   bash

   # pnpm
   pnpm dev
    
   # npm
   npm run dev
    
   # yarn
   yarn dev

   The terminal will print the local URL — by default http://localhost:3000.

5. Log in and verify the app

   Open http://localhost:3000 in your browser. The proxy automatically redirects unauthenticated requests to the login page.

   The app ships with a Credentials provider for development. The demo credentials are configurable via DEMO_USER_EMAIL and DEMO_USER_PASSWORD environment variables. If those variables are not set, the defaults from .env.example apply.

   After logging in, confirm the following work before moving on:

   • The misc dashboard loads at /en-US/dashboards/misc
   • The left sidebar renders with navigation items
   • The theme customizer button appears in the top bar
   • No errors appear in the browser console

Next steps

Once the dev server is running, explore these sections to understand the project:

• Installation — system requirements, build commands, environment variables, and path alias reference
• Project Structure — directory layout and naming conventions
• Customization — adjust themes, layout options, and global config
• Proxy & Middleware — understand how locale detection and auth guards work