SaaS Boilerplate

Boilerplate SaaS Gratis dan Sumber Terbuka dengan Tailwind CSS dan Shadcn UI

SaaS Boilerplate adalah template yang kuat dan dapat disesuaikan sepenuhnya untuk memulai aplikasi SaaS Anda. Dibangun dengan Next.js dan Tailwind CSS , serta komponen UI modular Shadcn UI . Templat SaaS Next.js ini membantu Anda membuat dan meluncurkan SaaS dengan cepat dengan sedikit usaha.

Dilengkapi dengan fitur-fitur penting seperti Otentikasi bawaan, Multi-Penyewaan dengan dukungan Tim, Peran & Izin , Basis Data, I18n (internasionalisasi), Halaman Arahan, Dasbor Pengguna, Penanganan formulir, optimasi SEO, Logging, Pelaporan kesalahan dengan Penjaga, Pengujian, Penerapan , Pemantauan, dan Peniruan Identitas Pengguna , template SaaS ini menyediakan semua yang Anda perlukan untuk memulai.

Didesain dengan mempertimbangkan pengembang, Next.js Starter Kit ini menggunakan TypeScript untuk keamanan jenis dan mengintegrasikan ESLint untuk menjaga kualitas kode, bersama dengan Prettier untuk pemformatan kode yang konsisten. Rangkaian pengujian menggabungkan Vitest dan React Testing Library untuk pengujian unit yang tangguh, sementara Playwright menangani integrasi dan pengujian E2E. Integrasi dan penerapan berkelanjutan dikelola melalui GitHub Actions. Untuk manajemen pengguna, otentikasi ditangani oleh Panitera. Untuk operasi database, ia menggunakan Drizzle ORM untuk manajemen database yang aman untuk tipe di database populer seperti PostgreSQL, SQLite, dan MySQL.

Baik Anda sedang membuat aplikasi SaaS baru atau mencari template SaaS yang fleksibel dan siap produksi , boilerplate ini siap membantu Anda. Starter kit sumber terbuka dan gratis ini memiliki semua yang Anda perlukan untuk mempercepat pengembangan dan menskalakan produk Anda dengan mudah.

Kloning proyek ini dan gunakan untuk membuat SaaS Anda sendiri. Anda dapat memeriksa demo langsung di SaaS Boilerplate, yang merupakan demo dengan sistem otentikasi dan multi-tenancy yang berfungsi.

Sponsor

Tambahkan logo Anda di sini

Demo

Demo langsung: SaaS Boilerplate

Halaman Arahan	Dasbor Pengguna

Manajemen Tim	Profil Pengguna

Mendaftar	Masuk

Halaman Arahan dengan Mode Gelap (Versi Pro)	Dasbor Pengguna dengan Mode Gelap (Versi Pro)

Dasbor Pengguna dengan Sidebar (Versi Pro)

Fitur

Pengalaman pengembang yang pertama, struktur kode yang sangat fleksibel dan hanya menyimpan apa yang Anda perlukan:

• ⚡ Next.js dengan dukungan App Router
• Ketik memeriksa TypeScript
• ? Integrasikan dengan Tailwind CSS dan Shadcn UI
• ✅ Mode Ketat untuk TypeScript dan React 18
• Otentikasi dengan Petugas: Daftar, Masuk, Keluar, Lupa kata sandi, Setel ulang kata sandi, dan banyak lagi.
• ? Otentikasi Tanpa Kata Sandi dengan Tautan Ajaib, Otentikasi Multi-Faktor (MFA), Otentikasi Sosial (Google, Facebook, Twitter, GitHub, Apple, dan lainnya), Login tanpa kata sandi dengan Kunci Sandi, Peniruan Identitas Pengguna
• Multi-tenancy & dukungan tim: membuat, mengganti, memperbarui organisasi, dan mengundang anggota tim
• Kontrol akses dan izin berbasis peran
• ? Otentikasi Multi-Faktor (MFA), Otentikasi Sosial (Google, Facebook, Twitter, GitHub, Apple, dan lainnya), Peniruan Identitas Pengguna
• ? ORM yang aman untuk tipe dengan DrizzleORM, kompatibel dengan PostgreSQL, SQLite, dan MySQL
• ? Basis data pengembangan offline dan lokal dengan PGlite
• Multi-bahasa (i18n) dengan next-intl dan Crowdin
• ♻️ Tipe variabel lingkungan aman dengan T3 Env
• ⌨️ Formulir dengan Formulir React Hook
• ? Perpustakaan validasi dengan Zod
• ? Linter dengan ESLint (default NextJS, NextJS Core Web Vitals, Tailwind CSS, dan konfigurasi Antfu)
• ? Pemformat Kode dengan Lebih Cantik
• ? Husky untuk Git Hooks
• Lint-staged untuk menjalankan linter pada file yang dipentaskan Git
• ? Lint git melakukan dengan Commitlint
• ? Tulis pesan penerapan yang sesuai standar dengan Commitizen
• ? Pengujian Unit dengan Vitest dan React Testing Library
• ? Integrasi dan Pengujian E2E dengan Penulis Drama
• ? Jalankan pengujian pada permintaan tarik dengan GitHub Actions
• ? Buku cerita untuk pengembangan UI
• Pemantauan Kesalahan dengan Sentry
• ☂️ Cakupan kode dengan Codecov
• Logging dengan Pino.js dan Manajemen Log dengan Stack yang Lebih Baik
• Pemantauan sebagai Kode dengan Checkly
• ? Pembuatan changelog otomatis dengan Rilis Semantik
• ? Pengujian visual dengan Percy (Opsional)
• Impor Absolut menggunakan awalan @
• ? Konfigurasi VSCode: Debug, Pengaturan, Tugas dan Ekstensi
• ? Metadata SEO, JSON-LD dan tag Open Graph
• ?️ Peta Situs.xml dan robots.txt
• ⌘ Eksplorasi database dengan Drizzle Studio dan alat migrasi CLI dengan Drizzle Kit
• Penganalisis Bundler
• ? Sertakan tema minimalis GRATIS
• ? Maksimalkan skor mercusuar

Fitur bawaan dari Next.js:

• ☕ Perkecil HTML & CSS
• ? Isi ulang langsung
• ✅ Penghilang cache

Filsafat

• Tidak ada yang tersembunyi dari Anda, memungkinkan Anda melakukan penyesuaian yang diperlukan agar sesuai dengan kebutuhan dan preferensi Anda.
• Dependensi diperbarui setiap bulan
• Mulai secara gratis tanpa biaya dimuka
• Mudah untuk disesuaikan
• Kode minimal
• Ramah SEO
• Semua yang Anda perlukan untuk membangun SaaS
• Siap produksi

Persyaratan

• Node.js 20+ dan npm

Memulai

Jalankan perintah berikut di lingkungan lokal Anda:

git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm install

Sekadar informasi, semua dependensi diperbarui setiap bulan.

Kemudian, Anda dapat menjalankan proyek secara lokal dalam mode pengembangan dengan live reload dengan menjalankan:

npm run dev

Buka http://localhost:3000 dengan browser favorit Anda untuk melihat proyek Anda.

Siapkan autentikasi

Buat akun Clerk di Clerk.com dan buat aplikasi baru di Dashboard Clerk. Kemudian, salin nilai NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY dan CLERK_SECRET_KEY ke dalam file .env.local (yang tidak dilacak oleh Git):

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key

Di Dasbor Panitera, Anda juga perlu Enable Organization dengan membuka Organization management > Settings > Enable organization .

Sekarang, Anda memiliki sistem autentikasi yang berfungsi penuh dengan Next.js: Daftar, Masuk, Keluar, Lupa kata sandi, Setel ulang kata sandi, Perbarui profil, Perbarui kata sandi, Perbarui email, Hapus akun, dan banyak lagi.

Siapkan basis data jarak jauh

Proyek ini menggunakan DrizzleORM, ORM yang aman untuk tipe yang kompatibel dengan database PostgreSQL, SQLite, dan MySQL. Secara default, proyek ini diatur agar berfungsi secara lancar dengan PostgreSQL dan Anda dapat dengan mudah memilih penyedia database PostgreSQL mana pun.

Pengaturan terjemahan (i18n).

Untuk penerjemahan, proyek ini menggunakan next-intl yang dikombinasikan dengan Crowdin. Sebagai pengembang, Anda hanya perlu mengurus versi bahasa Inggris (atau bahasa default lainnya). Terjemahan untuk bahasa lain dibuat dan ditangani secara otomatis oleh Crowdin. Anda dapat menggunakan Crowdin untuk berkolaborasi dengan tim penerjemah Anda atau menerjemahkan pesan sendiri dengan bantuan terjemahan mesin.

Untuk mengatur terjemahan (i18n), buat akun di Crowdin.com dan buat proyek baru. Di proyek yang baru dibuat, Anda akan dapat menemukan ID proyek. Anda juga perlu membuat Token Akses Pribadi baru dengan membuka Pengaturan Akun > API. Kemudian, di GitHub Actions, Anda perlu menentukan variabel lingkungan berikut: CROWDIN_PROJECT_ID dan CROWDIN_PERSONAL_TOKEN .

Setelah menentukan variabel lingkungan di Tindakan GitHub Anda, file pelokalan Anda akan disinkronkan dengan Crowdin setiap kali Anda memasukkan penerapan baru ke cabang main .

Struktur proyek

 .
├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── .storybook                      # Storybook folder
├── .vscode                         # VSCode configuration
├── migrations                      # Database migrations
├── public                          # Public assets folder
├── scripts                         # Scripts folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # Reusable components
│   ├── features                    # Components specific to a feature
│   ├── libs                        # 3rd party libraries configuration
│   ├── locales                     # Locales folder (i18n messages)
│   ├── models                      # Database models
│   ├── styles                      # Styles folder
│   ├── templates                   # Templates folder
│   ├── types                       # Type definitions
│   └── utils                       # Utilities folder
├── tests
│   ├── e2e                         # E2E tests, also includes Monitoring as Code
│   └── integration                 # Integration tests
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

Kustomisasi

Anda dapat dengan mudah mengonfigurasi Next.js SaaS Boilerplate dengan mencari FIXME: untuk melakukan penyesuaian cepat. Berikut adalah beberapa file terpenting untuk disesuaikan:

• public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png dan public/favicon-32x32.png : favicon situs web Anda
• src/utils/AppConfig.ts : file konfigurasi
• src/templates/BaseTemplate.tsx : tema default
• next.config.mjs : Konfigurasi Next.js
• .env : variabel lingkungan default

Anda memiliki akses penuh ke kode sumber untuk penyesuaian lebih lanjut. Kode yang diberikan hanyalah contoh untuk membantu Anda memulai proyek Anda. Langit adalah batasnya.

Di kode sumber, Anda juga akan menemukan komentar PRO yang menunjukkan kode yang hanya tersedia di versi PRO. Anda dapat dengan mudah menghapus atau mengganti kode ini dengan implementasi Anda sendiri.

Ubah skema basis data

Untuk mengubah skema database dalam proyek, Anda dapat memperbarui file skema yang terletak di ./src/models/Schema.ts . File ini mendefinisikan struktur tabel database Anda menggunakan perpustakaan Drizzle ORM.

Setelah melakukan perubahan pada skema, lakukan migrasi dengan menjalankan perintah berikut:

npm run db:generate

Ini akan membuat file migrasi yang mencerminkan perubahan skema Anda. Migrasi diterapkan secara otomatis selama interaksi database berikutnya, sehingga tidak perlu menjalankannya secara manual atau memulai ulang server Next.js.

Komit Format Pesan

Proyek ini mengikuti spesifikasi Komit Konvensional, artinya semua pesan komit harus diformat sesuai. Untuk membantu Anda menulis pesan penerapan, proyek ini menggunakan Commitizen, CLI interaktif yang memandu Anda melalui proses penerapan. Untuk menggunakannya, jalankan perintah berikut:

npm run commit

Salah satu keuntungan menggunakan Komitmen Konvensional adalah kemampuan untuk menghasilkan file CHANGELOG secara otomatis. Hal ini juga memungkinkan kita untuk secara otomatis menentukan nomor versi berikutnya berdasarkan jenis penerapan yang disertakan dalam rilis.

Pembayaran berlangganan dengan Stripe

Proyek ini terintegrasi dengan Stripe untuk pembayaran berlangganan. Anda perlu membuat akun Stripe dan Anda juga perlu menginstal Stripe CLI. Setelah menginstal Stripe CLI, Anda perlu login menggunakan CLI:

stripe login

Kemudian, Anda dapat menjalankan perintah berikut untuk membuat harga baru:

npm run stripe:setup-price

Setelah menjalankan perintah, Anda perlu menyalin ID harga dan menempelkannya di src/utils/AppConfig.ts dengan memperbarui ID harga yang ada dengan yang baru.

Di Dasbor Stripe, Anda diharuskan mengonfigurasi pengaturan portal pelanggan di https://dashboard.stripe.com/test/settings/billing/portal. Yang terpenting, Anda perlu menyimpan pengaturannya.

Di file .env , Anda perlu memperbarui NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY dengan kunci Stripe Publishable Anda sendiri. Anda dapat menemukan kuncinya di Dashboard Stripe Anda. Kemudian, Anda juga perlu membuat file baru bernama .env.local dan menambahkan variabel lingkungan berikut di file yang baru dibuat:

STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

Anda mendapatkan STRIPE_SECRET_KEY dari Dashboard Stripe Anda. STRIPE_WEBHOOK_SECRET dihasilkan dengan menjalankan perintah berikut:

npm run dev

Anda akan menemukan rahasia penandatanganan webhook di terminal Anda. Anda dapat menyalinnya dan menempelkannya di file .env.local Anda.

Pengujian

Semua pengujian unit ditempatkan di samping kode sumber dalam direktori yang sama, sehingga lebih mudah ditemukan. Proyek ini menggunakan Vitest dan React Testing Library untuk pengujian unit. Anda dapat menjalankan tes dengan perintah berikut:

npm run test

Integrasi & Pengujian E2E

Proyek ini menggunakan Playwright untuk integrasi dan pengujian end-to-end (E2E). Anda dapat menjalankan tes dengan perintah berikut:

npx playwright install # Only for the first time in a new environment
npm run test:e2e

Di lingkungan lokal, pengujian visual dinonaktifkan, dan terminal akan menampilkan pesan [percy] Percy is not running, disabling snapshots. . Secara default, pengujian visual hanya berjalan di GitHub Actions.

Aktifkan waktu proses Edge (opsional)

Folder App Router kompatibel dengan runtime Edge. Anda dapat mengaktifkannya dengan menambahkan baris berikut src/app/layouts.tsx :

 export const runtime = 'edge' ;

Sekadar informasi, migrasi database tidak kompatibel dengan runtime Edge. Jadi, Anda perlu menonaktifkan migrasi otomatis di src/libs/DB.ts :

 await migrate ( db , { migrationsFolder : './migrations' } ) ;

Setelah menonaktifkannya, Anda diharuskan menjalankan migrasi secara manual dengan:

npm run db:migrate

Anda juga perlu menjalankan perintah setiap kali Anda ingin memperbarui skema database.

Terapkan ke produksi

Selama proses pembangunan, migrasi database dijalankan secara otomatis, sehingga tidak perlu menjalankannya secara manual. Namun, Anda harus mendefinisikan DATABASE_URL dalam variabel lingkungan Anda.

Kemudian, Anda dapat membuat build produksi dengan:

$ npm run build

Ini menghasilkan build produksi boilerplate yang dioptimalkan. Untuk menguji build yang dihasilkan, jalankan:

$ npm run start

Anda juga perlu mendefinisikan variabel lingkungan CLERK_SECRET_KEY menggunakan kunci Anda sendiri.

Perintah ini memulai server lokal menggunakan build produksi. Anda sekarang dapat membuka http://localhost:3000 di browser pilihan Anda untuk melihat hasilnya.

Pemantauan Kesalahan

Proyek ini menggunakan Sentry untuk memantau kesalahan. Di lingkungan pengembangan, tidak diperlukan pengaturan tambahan: NextJS SaaS Boilerplate telah dikonfigurasi sebelumnya untuk menggunakan Sentry dan Spotlight (Sentry for Development). Semua kesalahan akan secara otomatis dikirim ke instance Spotlight lokal Anda, sehingga Anda dapat merasakan Sentry secara lokal.

Untuk lingkungan produksi, Anda harus membuat akun Sentry dan proyek baru. Kemudian, di next.config.mjs , Anda perlu memperbarui atribut org dan project dalam fungsi withSentryConfig . Selain itu, tambahkan Sentry DSN Anda ke sentry.client.config.ts , sentry.edge.config.ts dan sentry.server.config.ts .

Cakupan kode

Templat SaaS Next.js mengandalkan Codecov untuk solusi pelaporan cakupan kode. Untuk mengaktifkan Codecov, buat akun Codecov dan sambungkan ke akun GitHub Anda. Repositori Anda akan muncul di dasbor Codecov Anda. Pilih repositori yang diinginkan dan salin tokennya. Di GitHub Actions, tentukan variabel lingkungan CODECOV_TOKEN dan tempelkan tokennya.

Pastikan untuk membuat CODECOV_TOKEN sebagai rahasia GitHub Actions, jangan tempel langsung ke kode sumber Anda.

Pencatatan

Proyek ini menggunakan Pino.js untuk logging. Di lingkungan pengembangan, log ditampilkan di konsol secara default.

Untuk produksi, proyek ini sudah terintegrasi dengan Better Stack untuk mengelola dan menanyakan log Anda menggunakan SQL. Untuk menggunakan Better Stack, Anda perlu membuat akun Better Stack dan membuat sumber baru: buka Dasbor Better Stack Logs > Sumber > Hubungkan sumber. Kemudian, Anda perlu memberi nama pada sumber Anda dan memilih Node.js sebagai platformnya.

Setelah membuat sumber, Anda akan dapat melihat dan menyalin token sumber Anda. Di variabel lingkungan Anda, tempelkan token ke dalam variabel LOGTAIL_SOURCE_TOKEN . Sekarang, semua log akan secara otomatis dikirim dan diserap oleh Better Stack.

Pemantauan secara hati-hati

Proyek ini menggunakan Checkly untuk memastikan bahwa lingkungan produksi Anda selalu aktif dan berjalan. Secara berkala, Checkly menjalankan pengujian yang diakhiri dengan ekstensi *.check.e2e.ts dan memberi tahu Anda jika ada pengujian yang gagal. Selain itu, Anda memiliki fleksibilitas untuk menjalankan pengujian dari berbagai lokasi untuk memastikan aplikasi Anda tersedia di seluruh dunia.

Untuk menggunakan Checkly, Anda harus membuat akun terlebih dahulu di situsnya. Setelah membuat akun, buat kunci API baru di Dasbor Checkly dan atur variabel lingkungan CHECKLY_API_KEY di GitHub Actions. Selain itu, Anda perlu menentukan CHECKLY_ACCOUNT_ID , yang juga dapat ditemukan di Dasbor Checkly di bawah Pengaturan Pengguna > Umum.

Untuk menyelesaikan penyiapan, perbarui file checkly.config.ts dengan alamat email dan URL produksi Anda sendiri.

Perintah yang berguna

Penganalisis Bundel

Next.js SaaS Starter Kit menyertakan penganalisis bundel bawaan. Ini dapat digunakan untuk menganalisis ukuran bundel JavaScript Anda. Untuk memulai, jalankan perintah berikut:

npm run build-stats

Dengan menjalankan perintah tersebut, maka secara otomatis akan terbuka jendela browser baru beserta hasilnya.

Studio Basis Data

Proyek ini sudah dikonfigurasi dengan Drizzle Studio untuk menjelajahi database. Anda dapat menjalankan perintah berikut untuk membuka studio database:

npm run db:studio

Kemudian, Anda dapat membuka https://local.drizzle.studio dengan browser favorit Anda untuk menjelajahi database Anda.

Informasi VSCode (opsional)

Jika Anda adalah pengguna VSCode, Anda dapat memiliki integrasi yang lebih baik dengan VSCode dengan menginstal ekstensi yang disarankan di .vscode/extension.json . Kode awal dilengkapi dengan Pengaturan untuk integrasi yang lancar dengan VSCode. Konfigurasi Debug juga disediakan untuk pengalaman debugging frontend dan backend.

Dengan plugin yang terpasang di VSCode Anda, ESLint dan Prettier dapat secara otomatis memperbaiki kode dan kesalahan tampilan. Hal yang sama berlaku untuk pengujian: Anda dapat menginstal ekstensi VSCode Vitest untuk menjalankan pengujian Anda secara otomatis, dan ini juga menunjukkan cakupan kode dalam konteks.

Kiat pro: jika Anda memerlukan pemeriksaan tipe lebar proyek dengan TypeScript, Anda dapat menjalankan build dengan Cmd + Shift + B di Mac.

Kontribusi

Setiap orang dipersilakan untuk berkontribusi pada proyek ini. Jangan ragu untuk membuka masalah jika Anda memiliki pertanyaan atau menemukan bug. Sangat terbuka untuk saran dan perbaikan.

Lisensi

Berlisensi di bawah Lisensi MIT, Hak Cipta © 2024

Lihat LISENSI untuk informasi lebih lanjut.

Sponsor

Tambahkan logo Anda di sini

---

Dibuat dengan ♥ oleh CreativeDesignsGuru

Mencari boilerplate khusus untuk memulai proyek Anda? Saya akan dengan senang hati mendiskusikan bagaimana saya dapat membantu Anda membangunnya. Jangan ragu untuk menghubungi kapan saja di [email protected]!