Next js Boilerplate
v3.60.5
Boilerplate dan starter untuk Next.js dengan router aplikasi, CSS tailwind, dan naskah ⚡️ memprioritaskan pengalaman pengembang terlebih dahulu: next.js, naskah, eslint, lebih cantik, husky, commitlint, vscode, clerzing clerzing, clerzing, clerzing with-with-with-with-with-with-with-with-with-with-with-with-with-with-with-with-with-with-with with-with with-with with-with withler, Sqlite, dan mysql), pemantauan kesalahan dengan penjaga, logging dengan pino.js dan manajemen log, pemantauan sebagai kode, buku cerita, multi-bahasa (I18N), aman dengan arcjet (deteksi bot, pembatasan tingkat, perlindungan serangan, dll.) Dan banyak lagi.
Kloning proyek ini dan gunakan untuk membuat proyek selanjutnya.js Anda sendiri. Anda dapat memeriksa demo langsung di Next.js Boilerplate, yang mencakup sistem otentikasi yang berfungsi.
 |  |   |
 |  | |
 |  | |
| Tambahkan logo Anda di sini |
Demo Langsung: Next.js Boilerplate
| Mendaftar | Masuk |
|---|---|
 | |
Pengalaman Pengembang Pertama, struktur kode yang sangat fleksibel dan hanya menyimpan apa yang Anda butuhkan:
@ awalanFitur bawaan dari Next.js:
Jalankan perintah berikut di lingkungan lokal Anda:
git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm installUntuk informasi Anda, semua dependensi diperbarui setiap bulan.
Kemudian, Anda dapat menjalankan proyek secara lokal dalam mode pengembangan dengan Live Reload dengan mengeksekusi:
npm run devBuka http: // localhost: 3000 dengan browser favorit Anda untuk melihat proyek Anda.
Untuk memulai, Anda perlu membuat akun Panitera di Clerk.com dan membuat aplikasi baru di dasbor Panitera. Setelah Anda melakukannya, salin nilai NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY dan CLERK_SECRET_KEY dan tambahkannya ke file .env.local (tidak dilacak oleh git):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_keySekarang Anda memiliki sistem otentikasi yang berfungsi penuh dengan Next.js, termasuk fitur seperti mendaftar, masuk, keluar, lupa kata sandi, mengatur ulang kata sandi, memperbarui profil, memperbarui kata sandi, memperbarui email, menghapus akun, dan banyak lagi.
Proyek ini menggunakan Grizzleorm, ORM yang aman jenis yang kompatibel dengan database PostgreSQL, SQLite, dan MySQL. Secara default, proyek ini dikonfigurasi untuk bekerja dengan mulus dengan PostgreSQL, dan Anda memiliki fleksibilitas untuk memilih penyedia database PostgreSQL dari pilihan Anda.
Untuk terjemahan, 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 secara otomatis dihasilkan dan ditangani oleh Crowdin. Anda dapat menggunakan Crowdin untuk berkolaborasi dengan tim terjemahan Anda atau menerjemahkan pesan sendiri dengan bantuan terjemahan mesin.
Untuk mengatur terjemahan (i18n), buat akun di Crowdin.com dan buat proyek baru. Dalam proyek yang baru dibuat, Anda akan dapat menemukan ID proyek. Anda juga perlu membuat token akses pribadi baru dengan pergi ke pengaturan akun> API. Kemudian, dalam tindakan GitHub Anda, Anda perlu menentukan variabel lingkungan berikut: CROWDIN_PROJECT_ID dan CROWDIN_PERSONAL_TOKEN .
Setelah mendefinisikan variabel lingkungan dalam tindakan GitHub Anda, file lokalisasi Anda akan disinkronkan dengan crowdin setiap kali Anda mendorong komitmen baru ke cabang main .
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # React components
│ ├── 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
│ └── validations # Validation schemas
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration Anda dapat dengan mudah mengonfigurasi js boilerplate berikutnya dengan mencari seluruh proyek untuk FIXME: untuk membuat kustomisasi 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 : situs web Anda faviconsrc/utils/AppConfig.ts : file konfigurasisrc/templates/BaseTemplate.tsx : Tema Defaultnext.config.mjs : configuration next.js.env : variabel lingkungan defaultAnda memiliki akses penuh ke kode sumber untuk kustomisasi lebih lanjut. Kode yang disediakan hanyalah contoh untuk membantu Anda memulai proyek Anda. Langit adalah batasnya.
Untuk memodifikasi skema basis data dalam proyek, Anda dapat memperbarui file skema yang terletak di ./src/models/Schema.ts . File ini mendefinisikan struktur tabel basis data Anda menggunakan perpustakaan ORM Gerimis.
Setelah membuat perubahan pada skema, hasilkan migrasi dengan menjalankan perintah berikut:
npm run db:generateIni akan membuat file migrasi yang mencerminkan perubahan skema Anda. Migrasi secara otomatis diterapkan selama interaksi basis data berikutnya, jadi tidak perlu menjalankannya secara manual atau restart server berikutnya.js.
Proyek ini mengikuti spesifikasi komit konvensional, yang berarti semua pesan komit harus diformat sesuai. Untuk membantu Anda menulis pesan komit, proyek menggunakan Commitizen, CLI interaktif yang memandu Anda melalui proses komit. Untuk menggunakannya, jalankan perintah berikut:
npm run commit Salah satu manfaat menggunakan komitmen konvensional adalah kemampuan untuk secara otomatis menghasilkan file CHANGELOG . Ini juga memungkinkan kami untuk secara otomatis menentukan nomor versi berikutnya berdasarkan jenis komitmen yang termasuk dalam rilis.
Semua tes unit terletak di samping kode sumber di direktori yang sama, membuatnya lebih mudah ditemukan. Proyek ini menggunakan perpustakaan pengujian Vitest dan React untuk pengujian unit. Anda dapat menjalankan tes dengan perintah berikut:
npm run testProyek ini menggunakan penulis naskah 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 dalam tindakan github.
Folder router aplikasi kompatibel dengan runtime tepi. Anda dapat mengaktifkannya dengan menambahkan baris berikut src/app/layouts.tsx :
export const runtime = 'edge' ; Untuk informasi Anda, migrasi basis data tidak kompatibel dengan runtime tepi. 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:migrateAnda juga perlu menjalankan perintah setiap kali Anda ingin memperbarui skema database.
Selama proses pembangunan, migrasi basis data dieksekusi secara otomatis, jadi tidak perlu menjalankannya secara manual. Namun, Anda harus mendefinisikan DATABASE_URL dalam variabel lingkungan Anda.
Kemudian, Anda dapat menghasilkan build produksi dengan:
$ npm run buildIni menghasilkan produksi yang dioptimalkan dari boilerplate. 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.
Proyek ini menggunakan Sentry untuk memantau kesalahan. Di lingkungan pengembangan, tidak ada pengaturan tambahan yang diperlukan: Next.js Boilerplate pra-konfigurasi untuk menggunakan Sentry dan Spotlight (Sentry for Development). Semua kesalahan akan secara otomatis dikirim ke instance sorotan lokal Anda, memungkinkan Anda untuk mengalami penjaga secara lokal.
Untuk lingkungan produksi, Anda harus membuat akun penjaga 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 .
Next.js Boilerplate bergantung pada CODECOV untuk solusi pelaporan cakupan kode. Untuk mengaktifkan Codecov, buat akun Codecov dan menghubungkannya ke akun GitHub Anda. Repositori Anda akan muncul di dasbor codecov Anda. Pilih repositori yang diinginkan dan salin token. Dalam tindakan GitHub, tentukan variabel lingkungan CODECOV_TOKEN dan tempel token.
Pastikan untuk membuat CODECOV_TOKEN sebagai rahasia tindakan github, jangan menempelkannya langsung ke kode sumber Anda.
Proyek ini menggunakan pino.js untuk logging. Di lingkungan pengembangan, log ditampilkan di konsol secara default.
Untuk produksi, proyek ini sudah terintegrasi dengan tumpukan yang lebih baik untuk mengelola dan meminta log Anda menggunakan SQL. Untuk menggunakan tumpukan yang lebih baik, Anda perlu membuat akun tumpukan yang lebih baik dan membuat sumber baru: Pergi ke dasbor stack log yang lebih baik> Sumber> Sumber Connect. Kemudian, Anda perlu memberikan nama untuk sumber Anda dan pilih Node.js sebagai platform.
Setelah membuat sumber, Anda akan dapat melihat dan menyalin token sumber Anda. Dalam variabel lingkungan Anda, tempel token ke variabel LOGTAIL_SOURCE_TOKEN . Sekarang, semua log akan secara otomatis dikirim dan dicerna dengan tumpukan yang lebih baik.
Proyek ini menggunakan secara checkly untuk memastikan bahwa lingkungan produksi Anda selalu berjalan dan berjalan. Secara berkala, checkly menjalankan tes yang diakhiri dengan *.check.e2e.ts ekstensi dan memberi tahu Anda jika ada tes yang gagal. Selain itu, Anda memiliki fleksibilitas untuk menjalankan tes dari beberapa lokasi untuk memastikan bahwa aplikasi Anda tersedia di seluruh dunia.
Untuk menggunakan checkly, Anda harus terlebih dahulu membuat akun di situs web mereka. Setelah membuat akun, buat kunci API baru di dasbor checkly dan atur variabel lingkungan CHECKLY_API_KEY dalam tindakan github. Selain itu, Anda perlu mendefinisikan CHECKLY_ACCOUNT_ID , yang juga dapat ditemukan di dasbor Anda di bawah Pengaturan Pengguna> Umum.
Untuk menyelesaikan pengaturan, perbarui file checkly.config.ts dengan alamat email Anda sendiri dan URL produksi.
Proyek ini menggunakan ArcJet, keamanan sebagai produk kode yang mencakup beberapa fitur yang dapat digunakan secara individual atau digabungkan untuk memberikan pertahanan secara mendalam untuk situs Anda.
Untuk mengatur ArcJet, buat akun gratis dan dapatkan kunci API Anda. Kemudian tambahkan ke variabel lingkungan ARCJET_KEY .
ArcJet dikonfigurasi dengan dua fitur utama: deteksi bot dan waf Shield Arcjet:
ARCJET dikonfigurasi dengan klien pusat di src/libs/Arcjet.ts yang mencakup aturan WAF SHIELD. Aturan tambahan dikonfigurasi dalam src/app/[locale]/layout.tsx berdasarkan jenis halaman.
Boilerplate Next.js termasuk penganalisa bundel bawaan. Ini dapat digunakan untuk menganalisis ukuran bundel JavaScript Anda. Untuk memulai, jalankan perintah berikut:
npm run build-statsDengan menjalankan perintah, itu akan secara otomatis membuka jendela browser baru dengan hasilnya.
Proyek ini sudah dikonfigurasi dengan gerimis Studio untuk menjelajahi database. Anda dapat menjalankan perintah berikut untuk membuka studio database:
npm run db:studioKemudian, Anda dapat membuka https://local.drizzle.studio dengan browser favorit Anda untuk menjelajahi basis data Anda.
Jika Anda adalah pengguna vScode, Anda dapat memiliki integrasi yang lebih baik dengan vScode dengan menginstal ekstensi yang disarankan di .vscode/extension.json . Kode starter muncul dengan pengaturan untuk integrasi tanpa batas dengan vScode. Konfigurasi debug juga disediakan untuk pengalaman debugging frontend dan backend.
Dengan plugin yang diinstal di vScode Anda, Eslint dan Prettier dapat secara otomatis memperbaiki kode dan menampilkan kesalahan. Hal yang sama berlaku untuk pengujian: Anda dapat menginstal Ekstensi Vitest VScode untuk secara otomatis menjalankan tes Anda, dan itu juga menunjukkan cakupan kode dalam konteks.
Pro Tips: Jika Anda memerlukan pemeriksaan tipe lebar proyek dengan TypeScript, Anda dapat menjalankan build dengan CMD + Shift + B pada Mac.
Setiap orang dipersilakan untuk berkontribusi pada proyek ini. Jangan ragu untuk membuka masalah jika Anda memiliki pertanyaan atau menemukan bug. Benar -benar terbuka untuk saran dan perbaikan.
Lisensi di bawah Lisensi MIT, Hak Cipta © 2024
Lihat lisensi untuk informasi lebih lanjut.
| | |
| | |
| | |
| Tambahkan logo Anda di sini |
Dibuat dengan ♥ oleh CreativeDesignsguru
Mencari boilerplate khusus untuk memulai proyek Anda? Saya akan senang mendiskusikan bagaimana saya dapat membantu Anda membangunnya. Jangan ragu untuk menghubungi kapan saja di [email protected]!
