Menu

Local Setup Source Repository

This chapter will guide you through the local configuration and startup process of the source code repository.

Preparation

Before getting started, you need to prepare the following tools:

If you're new to VSCode or Cursor, I recommend installing some editor plugins that will help improve your programming efficiency: Cursor Extension Recommendations

Starting the Project

Step 1: Fork the Repository

Navigate to the NEXTY.DEV source repository, click the Fork button in the top right corner to fork the source repository to your GitHub account.

fork
fork

Step 2: Clone the Repository

Open your GitHub account, locate the repository you just forked, click the Code button, and copy the repository URL.

clone

Open your terminal and use the git clone command to clone the repository locally.

git clone https://github.com/your-github-username/your-fork-repo-name.git
 
## or 
 
git clone https://github.com/your-github-username/your-fork-repo-name.git <new-folder-name>

Once the cloning is complete, open the project in Cursor or VSCode, and navigate to the project directory in your terminal.

cd your-fork-repo-name

Step 3: Install Dependencies

Install the project dependencies using pnpm.

pnpm install

Step 4: Configure Environment Variables

Create a .env.local file in the root directory and configure the environment variables.

cp .env.example .env.local

For detailed environment variable descriptions, refer to Environment Variables

Good to know:

  • .env.local is only used for local development only. Production environments should use the .env file.

Step 5: Complete Database Integration

Completed the Database Integration.

Step 6: Start the Development Server

Run the development server using one of the following commands:

npm run dev
# or
yarn dev
# or
pnpm dev

Once the server starts successfully, open your browser and navigate to http://localhost:3000 to view the application.

Startup Success

Essential Configuration

Configure Administrator Account

Open the user table. Locate the user you want to designate as administrator and set their role to admin.

Configure Administrator Account

Now re-login with the administrator account, and you'll see the admin menus.

Administrator Directory

Update Pricing Plans

Good to know

Since v4.0.0, pricing is no longer stored in the database and the admin dashboard no longer has a pricing management page. config/pricing.ts is the single source of truth for pricing.

Open config/pricing.ts to view the built-in pricing data. Each plan is one object: the provider field declares who collects the money, and the matching price reference lives in the field of the same name (stripePriceId / creemProductId / paypalPlanId), with separate test and live environments:

{
  id: 'pro-monthly',
  kind: 'subscription',
  interval: 'month',
  monthlyCredits: 2000,
  provider: 'stripe',
  stripePriceId: {
    test: 'price_REPLACE_pro_monthly_test',
    live: 'price_REPLACE_pro_monthly_live',
  },
  price: 29.9,
  currency: 'USD',
  active: true,
  copy: { en: { ... }, zh: { ... }, ja: { ... } },
}

There are two ways to replace the price_REPLACE_* placeholders with real Price IDs:

Option 1: Create and backfill automatically with the script (recommended)

# Dry run first — only prints what would be created
pnpm stripe:bootstrap
 
# Once it looks right, apply: create the Stripe products and prices, and backfill config/pricing.ts
pnpm stripe:bootstrap --write

The script picks the column to write from the STRIPE_SECRET_KEY prefix (sk_test writes test, sk_live writes live), and it is idempotent: products are reused by metadata.planId, prices are matched and reused by amount + currency + interval, and entries already backfilled are skipped.

Option 2: Fill them in by hand

If you have already created the products in the Stripe dashboard, just paste the Price IDs into the matching fields.

Good to know:

  • If you haven't created products in the Stripe dashboard yet, please complete the Stripe Integration chapter first.
  • A plan id is never reused, and a plan that has been sold should never be deleted (historical orders and credit ledger entries resolve through it). Retire a plan with active: false.

After the edit, restart the dev server and you can test the payment flow on the landing page.

Payment Testing

You can use the following information provided by Stripe to test the payment flow:

  • Credit card: 4242 4242 4242 4242
  • Use a valid future date, such as 12/34
  • Use any three-digit CVC (four digits for American Express cards)
  • Other form fields can use any values.
Test Payment