ShipProject

Starter Kit — วิธีติดตั้งและใช้งาน

ตั้งแต่ติดตั้งไปจนถึงนำขึ้นเว็บจริง — ครบในหน้าเดียว

ต้องมีในเครื่องก่อน

• Node.js เวอร์ชัน 18 ขึ้นไป (แนะนำ Node 20 หรือ 22)
• npm, pnpm, หรือ yarn
• Git
• Terminal หรือ VS Code

เริ่มต้นเร็ว — npx ship-create

วิธีง่ายที่สุด — พิมพ์คำสั่งนี้แล้วตอบ 3 คำถาม เสร็จภายใน 30 วินาที

พิมพ์คำสั่งนี้

terminal

npx ship-create

ระบบจะถามชื่อโปรเจกต์ รูปแบบที่อยากได้ และตัวจัดการแพ็กเกจ

เลือกรูปแบบที่อยากได้

? อยากสร้างอะไร? (ใช้ลูกศรเลือก)

❯ SaaS App

CRM

คอร์สและสมาชิก

Lead Gen Funnel

... (8 แบบ)

ระบบจะสร้างโครงสร้างโปรเจกต์ให้ตามที่เลือก — พร้อมใช้ได้ทันที

ติดตั้ง package

cd my-project

npm install
# or
pnpm install

เปิด server ทดสอบ

npm run dev

เปิดเบราว์เซอร์ไปที่ http://localhost:3000

ดาวน์โหลด OS ทั้งหมด

ถ้าอยากได้ทุกอย่างในที่เดียว — 13 โมดูล + starter kit + prompt กว่า 50 ตัว ดาวน์โหลดได้เลย

terminal

git clone https://github.com/nireadaddy/the-ship-method-os.git
cd the-ship-method-os

# go to starter kit
cd starter-kit

npm install
npm run dev

มีอะไรใน OS นอกจาก starter kit?

01-STRUCTURE/— เป้าหมายธุรกิจ ขอบเขต และลำดับ feature
07-PROMPTS/— prompt AI พร้อมใช้กว่า 50 ตัว
08-EXAMPLES/— ตัวอย่างงานจริงตั้งแต่ต้นจนจบ
10-LAUNCH/— checklist ก่อนปล่อย + domain + analytics
— และอีก 9 โมดูล

โครงสร้างโปรเจกต์

หลังจากสร้างโปรเจกต์ด้วย npx ship-create

my-project/
├── src/
│   ├── app/
│   │   ├── page.tsx          # หน้าหลัก
│   │   ├── layout.tsx        # layout หลัก
│   │   ├── globals.css       # ธีมและสี
│   │   ├── sale/             # หน้าขาย
│   │   ├── member/           # พื้นที่สมาชิก
│   │   │   ├── dashboard/
│   │   │   ├── content/
│   │   │   ├── billing/
│   │   │   └── settings/
│   │   ├── backoffice/       # หน้าจัดการระบบ
│   │   └── api/              # API
│   ├── components/           # ชิ้นส่วนที่ใช้ร่วมกัน
│   └── lib/                  # ฟังก์ชันและข้อความ
├── public/                   # รูปและไฟล์สื่อต่างๆ
├── package.json
└── .env.local                # ค่าความลับของระบบ

คำสั่งที่ใช้บ่อย

npm run devเปิด server ทดสอบที่ localhost:3000

npm run buildเตรียมไฟล์สำหรับขึ้น server จริง

npm run startเปิด server จริง (ต้อง build ก่อน)

npm run lintตรวจสอบคุณภาพโค้ด

npx ship-createสร้างโปรเจกต์ใหม่จากแม่แบบ

หน้าตัวอย่างที่มีในตัว

starter kit มีหน้าตัวอย่างมากกว่า 16 แบบ พร้อมข้อมูลจำลอง ใช้งานได้จริงทันที

หน้าเลือก Blueprint

หน้าขายสินค้า

/sale

พื้นที่สมาชิก

/member/dashboard

หน้าจัดการระบบ

/backoffice

CRM

/demo/crm

ร้านค้าออนไลน์

/demo/ecommerce

SaaS App

/demo/saas

Marketplace

/demo/marketplace

คอร์สและสมาชิก

/demo/membership

Dashboard วิเคราะห์ข้อมูล

/demo/dashboard

Directory / ไดเรกทอรี

/demo/directory

เครื่องมือภายในทีม

/demo/internal-tool

Lead Gen

/demo/leadgen

จองและนัดหมาย

/demo/booking

บล็อกและบทความ

/demo/blog

AI แชทบอท

/demo/ai-chat

Social Feed

/demo/social-feed

ตั้งค่าระบบ

สร้างไฟล์ .env.local ที่โฟลเดอร์หลักของโปรเจกต์

.env.local

# required
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# email (Resend)
RESEND_API_KEY=re_xxxxxxxxxxxx
RESEND_AUDIENCE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
RESEND_FROM_EMAIL=hello@yourdomain.com
RESEND_FROM_NAME=Your Name

# payments (Stripe)
NEXT_PUBLIC_STRIPE_KEY=pk_test_xxxxxxxxxxxx
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxx

# database (Neon / Postgres)
DATABASE_URL=postgresql://user:pass@host/db?sslmode=require

# auth
JWT_SECRET=your-secret-key-here

ถ้าใช้กับ Vercel

ตั้งค่าผ่าน Vercel Dashboard หรือรัน vercel env pull .env.local เพื่อดึงค่ามาไว้ในเครื่อง

นำขึ้น Vercel

นำขึ้น Vercel ได้เลย ไม่ต้องตั้งค่าเพิ่มเติม

อัปโหลดขึ้น GitHub

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your-username/your-project.git
git push -u origin main

เชื่อมกับ Vercel

เข้า vercel.com/new → เลือก Import Git Repository → เลือก repo → กด Deploy

ระบบจะจำได้เองว่าเป็น Next.js ไม่ต้องตั้งค่าเพิ่ม

ใส่ค่า Environment Variables

ไปที่ Vercel Dashboard → Settings → Environment Variables แล้วใส่ค่าเดียวกับในไฟล์ .env.local

อัปเดตเว็บ

vercel --prod

หรือ push โค้ดใหม่ขึ้น GitHub — Vercel จะ deploy ให้เองอัตโนมัติ

อยากเดิน 30 วันพร้อมกัน?

OS นี้แจกฟรี — ถ้าอยากมีกลุ่มเรียน ได้รับ feedback จริง และเดินพร้อมกัน เข้ามาสมัครคอร์สได้เลย

ดูรายละเอียดคอร์ส →ดูตัวอย่างก่อน