Get Started

Thank you for choosing ShipAny, a NextJS development framework for rapidly building AI SaaS projects.

Get ShipAny Code

  1. Place an order on the ShipAny official website

https://shipany.ai/pricing

  1. After payment, go to the order center

https://shipany.ai/my-orders

Select your order to activate it.

  1. Bind your Github Username to activate

activate

  1. After successful activation, you will receive an invitation in your Github notification center. Click the invitation link to join the ShipAny code repository.

Local Development

Clone the Project Code

  1. Go to the ShipAny code repository (If you haven’t joined the repository, you will see a 404 page)

https://github.com/shipanyai/shipany-template-one

  1. Choose a git clone method, or directly download the source code to your local computer

ssh-clone-project

Clone the code:

git clone [email protected]:shipanyai/shipany-template-one.git my-shipany-project

Install the Project

  1. Enter the project root directory
cd my-shipany-project
  1. Install project dependencies
pnpm install

Development & Debugging

  1. Copy the environment variable configuration file
cp .env.example .env.development
  1. Start the development server
pnpm dev

pnpm-dev

  1. Local Preview

Open http://localhost:3000 in your browser to preview your project

preview

Customization

Change Website Colors

  1. Choose a shadcn theme editor
  1. Create a custom theme color scheme for your project:

theme-generator

ShipAny uses tailwindcss4. Please use the oklch color format and copy the theme styles.

  1. Paste the theme styles into the project file: src/app/theme.css

theme-css

  1. Revisit the project preview page to see your customized theme

theme-preview

Edit Landing Page Content

  1. Open the landing page content file: src/i18n/pages/landing/en.json

  2. Use AI to help generate new landing page content

Prompt example:

I want to build a landing page for my product named "Flux AI Image Generator", please update the landing page json file, content reference @Web @https://www.flux.ai/
  1. Replace the default content with the AI-generated content

update-landing

  1. Preview the new landing page

new-landing

  1. Update other landing page content files

Update all files under src/i18n/pages/landing as needed.

Edit Website Localization Text

  1. Open the website localization file: src/i18n/messages/en.json

  2. Use AI to generate new content

Prompt example:

update content of this file, for my new project "Flux AI", which is an AI Image Generator, with keywords "flux ai, ai image generator"
  1. Update all file contents

Update all files under src/i18n/messages according to your website information.

Edit Website Policies

Before launching your website, please update the website policies according to the services you provide.

The policy files are located in the src/app/(legal) directory.

  1. Update Privacy Policy

Use AI to generate a new privacy policy.

Prompt example:

update privacy-policy according to landing page content @en.json
with brand name "ShipAny", domain "shipany.ai", contact email is "[email protected]"

Replace the content in src/app/(legal)/privacy-policy/page.mdx with the new privacy policy.

  1. Update Terms of Service

Use AI to generate new terms of service.

Prompt example:

update terms-of-service according to landing page content @en.json
with brand name "ShipAny", domain "shipany.ai", contact email is "[email protected]"

Replace the content in src/app/(legal)/terms-of-service/page.mdx with the new terms of service.

Change Website Logo and Icon

Generate Logo and Icon images for your website, and replace public/logo.png and public/favicon.ico respectively.

Recommended logo generation sites:

Edit Sitemap

The sitemap file is located at: public/sitemap.xml, with the default content as follows:

<?xml version='1.0' encoding='utf-8' standalone='yes'?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://shipany.ai/</loc>
    <lastmod>2024-12-24T10:00:00+00:00</lastmod>
  </url>
</urlset>

Please update this file according to your website’s online domain and the page paths you want to expose to search engines.

Edit Configuration

The development environment config file is .env.development, and the production environment config file is .env.production.

Please configure these two files according to your project. Reference:

# -----------------------------------------------------------------------------
# Web Information
# -----------------------------------------------------------------------------
NEXT_PUBLIC_WEB_URL = "http://localhost:3000"
NEXT_PUBLIC_PROJECT_NAME = "ShipAny"
 
# -----------------------------------------------------------------------------
# Database with Supabase
# -----------------------------------------------------------------------------
# https://supabase.com/docs/guides/getting-started/quickstarts/nextjs
# Set your Supabase DATABASE_URL
DATABASE_URL = ""
 
# -----------------------------------------------------------------------------
# Auth with next-auth
# https://authjs.dev/getting-started/installation?framework=Next.js
# Set your Auth URL and Secret
# Secret can be generated with `openssl rand -base64 32`
# -----------------------------------------------------------------------------
AUTH_SECRET = "Zt3BXVudzzRq2R2WBqhwRy1dNMq48Gg9zKAYq7YwSL0="
AUTH_URL = "http://localhost:3000/api/auth"
AUTH_TRUST_HOST = true
 
# Google Auth
# https://authjs.dev/getting-started/providers/google
AUTH_GOOGLE_ID = ""
AUTH_GOOGLE_SECRET = ""
NEXT_PUBLIC_AUTH_GOOGLE_ID = ""
NEXT_PUBLIC_AUTH_GOOGLE_ENABLED = "false"
NEXT_PUBLIC_AUTH_GOOGLE_ONE_TAP_ENABLED = "false"
 
# Github Auth
# https://authjs.dev/getting-started/providers/github
AUTH_GITHUB_ID = ""
AUTH_GITHUB_SECRET = ""
NEXT_PUBLIC_AUTH_GITHUB_ENABLED = "false"
 
# -----------------------------------------------------------------------------
# Analytics with Google Analytics
# https://analytics.google.com
# -----------------------------------------------------------------------------
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = ""
 
# -----------------------------------------------------------------------------
# Analytics with OpenPanel
# https://openpanel.dev
# -----------------------------------------------------------------------------
NEXT_PUBLIC_OPENPANEL_CLIENT_ID = ""
 
# Analytics with Plausible
# https://plausible.io/
NEXT_PUBLIC_PLAUSIBLE_DOMAIN = ""
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL = ""
 
# -----------------------------------------------------------------------------
# Payment with Stripe
# https://docs.stripe.com/keys
# -----------------------------------------------------------------------------
STRIPE_PUBLIC_KEY = ""
STRIPE_PRIVATE_KEY = ""
STRIPE_WEBHOOK_SECRET = ""
 
NEXT_PUBLIC_PAY_SUCCESS_URL = "http://localhost:3000/my-orders"
NEXT_PUBLIC_PAY_FAIL_URL = "http://localhost:3000/#pricing"
NEXT_PUBLIC_PAY_CANCEL_URL = "http://localhost:3000/#pricing"
 
NEXT_PUBLIC_LOCALE_DETECTION = "false"
 
ADMIN_EMAILS = ""
 
NEXT_PUBLIC_DEFAULT_THEME = "light"
 
# -----------------------------------------------------------------------------
# Storage with aws s3 sdk
# https://docs.aws.amazon.com/s3/index.html
# -----------------------------------------------------------------------------
STORAGE_ENDPOINT = ""
STORAGE_REGION = ""
STORAGE_ACCESS_KEY = ""
STORAGE_SECRET_KEY = ""
STORAGE_BUCKET = ""
STORAGE_DOMAIN = ""
 
# Google Adsence Code
# https://adsense.com/
NEXT_PUBLIC_GOOGLE_ADCODE = ""

Project Checklist

Before submitting your project code, please check if the following items have been updated according to your actual situation.

  • Change website colors. src/app/theme.css
  • Edit landing page content. src/i18n/pages/landing/*.json
  • Edit localization text. src/i18n/messages/*.json
  • Edit website policies. src/app/(legal)/**/page.mdx
  • Change website Logo and Icon. public/logo.png, public/favicon.ico
  • Edit sitemap. public/sitemap.xml
  • Edit configuration. .env.development, .env.production

Submit Code

  1. Create a Github repository

Be sure to choose a private repository. Do not publish ShipAny’s code publicly to prevent piracy.

create-project

  1. Submit your modified project code to your Github repository
git remote set-url origin https://github.com/your-username/your-project-name.git
git add .
git commit -m "update landing page"
git push origin main

Deploy Online

You can refer to the following steps to quickly deploy your project online using Vercel.

Other deployment methods:

  1. Create a new project in the Vercel console, import your code repository, and deploy with one click

vercel-new-project

  1. After the build is complete, you can see your project in the Vercel console

vercel-console

  1. Open the domain to access your project

vercel-preview

Prerequisites