Launching the Source Code Repository Locally

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

Tool Preparation

Before you begin, you need to prepare the following tools:

• Node.js (v20 or above)
• Git
• pnpm
• VSCode or Cursor (recommended)

Launch Project

Step 1: Fork the Source Code

Open Nexty.dev source code repository, click the Fork button in the top right corner to fork the source code repository to your GitHub account.

Step 2: Clone the Source Code

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

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

git clone https://github.com/your-github-username/your-fork-repo-name.git

After cloning is complete, open the source code repository with Cursor or VSCode, and enter the source code repository directory in the command line.

cd your-fork-repo-name

Step 3: Install Dependencies

Install dependencies using pnpm:

pnpm install

Step 4: Configure Environment Variables

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

cp .env.example .env.local

Good to know:

• .env.local is only used for local development environment; production environment requires using the .env file.

Here are the environment variable descriptions:

Basic Website Configuration

• NEXT_PUBLIC_SITE_URL (required): Website URL

  • Fill in the startup address for local development, default is http://localhost:3000
  • Fill in your domain for production environment

• NEXT_PUBLIC_LOCALE_DETECTION (required): Whether to enable next-intl language detection, recommended to set to false

  • If set to true, next-intl will detect language and automatically redirect to the corresponding language page based on browser language

  • If set to false, it will use Nexty.dev template's built-in SEO-friendly language detector

  The built-in language detector in Nexty.dev silently checks if the browser language matches the current page language when users first visit. If they don't match, it shows a prompt guiding users to switch languages. Starting from the second visit, it redirects based on the last visited language page recorded in cookies. This approach reduces unnecessary redirects and makes SEO more friendly.

• ALLOWED_REDIRECT_HOSTS (optional): Whitelist of domains allowed for login success redirection, not required, and only effective in development environment

Data Analytics

• NEXT_PUBLIC_GOOGLE_ID (optional): Google Analytics

• NEXT_PUBLIC_BAIDU_TONGJI (optional): Baidu Analytics

• NEXT_PUBLIC_PLAUSIBLE_DOMAIN (optional): Plausible domain

• NEXT_PUBLIC_PLAUSIBLE_SRC (optional): Plausible source

  Plausible is open source. If you have a server, self-hosting is recommended.

Advertisements

• NEXT_PUBLIC_GOOGLE_ADSENSE_ID (optional): Google Adsense

Supabase

Nexty.dev uses Supabase services for data and authentication, so you need to configure the following environment variables:

• NEXT_PUBLIC_SUPABASE_URL (required): Supabase URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY (required): Supabase anonymous key
• SUPABASE_SERVICE_ROLE_KEY (required): Supabase service role key

If you haven't prepared your Supabase account yet, please complete the Supabase Integration chapter first.

Resend

Resend is a third-party service for sending emails. The Nexty.dev template implements email sending functionality based on Resend.

• RESEND_API_KEY (optional): Resend API Key
• RESEND_AUDIENCE_ID (optional): Resend Audience ID
• ADMIN_EMAIL (optional): Custom admin email, used for displaying sender email in emails
• ADMIN_NAME (optional): Custom admin name, used for displaying sender name in emails

For obtaining RESEND_API_KEY and RESEND_AUDIENCE_ID, please refer to the Resend Integration chapter.

Upstash Redis

Upstash Redis can be used for data caching, request rate limiting and other scenarios.

In the Nexty.dev template's email subscription feature, Upstash Redis is used to limit daily submissions. This will serve as an example - if your product faces traffic attacks, you can quickly implement the wrapped rate limiter based on this example to intercept illegitimate traffic before business logic.

• UPSTASH_REDIS_REST_URL (optional): Redis URL
• UPSTASH_REDIS_REST_TOKEN (optional): Redis Token
• UPSTASH_REDIS_NEWSLETTER_RATE_LIMIT_KEY (optional): Redis key for email subscription rate limiting
• DAY_MAX_SUBMISSIONS (optional): Maximum daily submissions

For obtaining UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN, please refer to the Upstash Integration chapter.

CloudFlare R2

CloudFlare R2 is a file storage service. Nexty.dev uses it for saving user custom avatars, AI-generated images and videos, blog images, etc.

• R2_ACCOUNT_ID (optional): R2 account ID
• R2_ACCESS_KEY_ID (optional): R2 access key ID
• R2_SECRET_ACCESS_KEY (optional): R2 secret key
• R2_BUCKET_NAME (optional): R2 bucket name
• R2_PUBLIC_URL (optional): R2 bucket URL

For obtaining these environment variables, please refer to the CloudFlare R2 Integration chapter.

AI Models

Nexty.dev has an AI Demo page for debugging AI model capabilities. If you're not familiar with AI function calls, you can learn quickly from this page's code.

• OPENAI_API_KEY (optional): OpenAI API Key
• DEEPSEEK_API_KEY (optional): DeepSeek API Key
• ANTHROPIC_API_KEY (optional): Anthropic API Key
• XAI_API_KEY (optional): XAI API Key
• GOOGLE_API_KEY (optional): Google API Key
• REPLICATE_API_TOKEN (optional): Replicate API Token

All AI keys are obtained from respective platform dashboards.

Stripe

Stripe is currently the most mainstream payment gateway. The Nexty.dev template has built-in complete one-time payment and recurring subscription functionality based on Stripe. You can decide whether to enable it through environment variable settings.

• NEXT_PUBLIC_ENABLE_STRIPE (required): Whether to enable Stripe payments
  • If set to true, enable Stripe payment functionality
  • If set to false, disable Stripe payment functionality, and the following configuration items don't need to be filled
• STRIPE_SECRET_KEY (optional): Stripe secret key
• STRIPE_PUBLISHABLE_KEY (optional): Stripe public key
• STRIPE_WEBHOOK_SECRET (optional): Stripe Webhook Secret
• DEFAULT_CURRENCY (optional): Default currency
• STRIPE_WEBHOOK_ASYNC_PROCESSING (optional): Whether to enable Stripe retry mechanism
  • Relies on Stripe's retry mechanism, set to false
  • If you have the capability to build reliability guarantees for background processing, set to true, which allows faster response to stripe webhooks and reduces duplicate event triggers
• STRIPE_CUSTOMER_PORTAL_URL (optional): User dashboard subscription management page

For obtaining STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY and STRIPE_WEBHOOK_SECRET, please refer to the Stripe Integration chapter.

AI Translation

Nexty.dev has built-in AI translation functionality for multi-language pricing cards in the create/edit pricing card pages. You need to configure AI model provider and model to use this feature.

• NEXT_PUBLIC_AI_MODEL_ID (optional): AI model ID
• NEXT_PUBLIC_AI_PROVIDER (optional): AI model provider

If you don't want to use AI translation functionality, you don't need to configure these environment variables.

Step 5: Execute SQL Files

If you've already followed the steps in the Supabase Integration chapter, you don't need to repeat this step.

Open the data folder in the project root directory and execute all SQL files in Supabase's SQL Editor in order.

Step 6: Launch Project

Execute the startup command in the terminal:

npm run dev # Start with npm
or
yarn dev # Start with yarn
or
pnpm dev # Start with pnpm

After successful startup, visit http://localhost:3000 in your browser to see the project running.

Required Settings

Configure Admin Account

Open Supabase, navigate to Table Editor and open the users table. Find the user you want to set as admin and set their role to admin.

Now log in to the dashboard with the admin account to see the admin menu.

Update Pricing Cards

If you've completed the steps in the Supabase Integration chapter, you can now navigate to the /dashboard/prices page to see the built-in pricing cards.

Now you need to edit the Stripe-associated cards. Using the "Pro" card as an example:

Change the Stripe Price ID to the Price ID you created in Stripe, then click the "Verify & Fetch" button. The system will automatically fetch product and pricing information from Stripe, then save the pricing card.

Note:

• If you haven't created products in your Stripe dashboard yet, please first complete the Stripe Integration chapter.

After updating, you can test the payment flow in the Pricing module on the landing page.

You have now completed the entire local configuration and startup process for the Nexty.dev source code repository.

Payment Testing

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

• Credit card: 4242 4242 4242 4242
• Use any 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.