ts nextjs tailwind starter

Next.js + Tailwind CSS + Starter TypeScript dan Boilerplate

? TS-NEXTJS-TAILWIND-STARTER

Next.js + Tailwind CSS + Starter TypeScript yang dikemas dengan fitur pengembangan yang berguna.

Dibuat oleh Theodorus Clarence

Fitur

Repositori ini? Baterai dikemas dengan:

• ⚡️ Next.js 14 dengan router aplikasi
• ⚛️ Bereaksi 18
• Naskah
• ? Tailwind CSS 3 - Dikonfigurasi dengan variabel CSS untuk memperpanjang warna primer
• ? Komponen Pra-Built-Komponen yang secara otomatis akan beradaptasi dengan warna merek Anda, periksa di sini untuk demo
• ? Jest - Dikonfigurasi untuk Pengujian Unit
• ? Alias Impor dan Path Absolute - Komponen Impor Menggunakan @/ Prefix
• ? Eslint - Temukan dan perbaiki masalah dalam kode Anda, juga akan mengurutkan impor Anda secara otomatis
• ? Lebih cantik - format kode Anda secara konsisten
• ? Husky & Lint dipentaskan - Jalankan skrip pada file bertahap Anda sebelum berkomitmen
• ? Lint Commit Commitonal - Pastikan Anda & Teman Tim Anda Mengikuti Komit Konvensional
• ⏰ Harap rilis-Hasilkan changelog Anda dengan mengaktifkan alur kerja release-please
• ? Tindakan GitHub - Lintus kode Anda di PR
• ? Cabang Otomatis dan Masalah Autolink - Cabang akan secara otomatis dibuat pada penetapan masalah, dan ditautkan otomatis pada PR
• Cuplikan - Kumpulan cuplikan yang bermanfaat
• ? Buka Fungsi Helper Grafik - Grafik terbuka yang luar biasa dihasilkan menggunakan OG, garpu dan digunakan!
• ? Peta Situs - secara otomatis menghasilkan sitemap.xml
• ? Paket Ekspansi - Dengan mudah menginstal pustaka umum, komponen tambahan, dan konfigurasi.

Lihat detail fitur dan changelog? untuk lebih.

Anda juga dapat memeriksa semua detail dan demo di posting blog saya:

• Starter one-stop untuk memaksimalkan efisiensi di selanjutnya.js & proyek CSS tailwind css

Memulai

1. Kloning template ini menggunakan salah satu dari tiga cara

1. Gunakan repositori ini sebagai template

   Pengungkapan: Dengan menggunakan repositori ini sebagai templat, akan ada atribusi pada repositori Anda.

   Saya akan menghargai jika Anda melakukannya, jadi templat ini juga dapat diketahui oleh orang lain?

   

2. Menggunakan create-next-app

   pnpm create next-app  -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm

   Jika Anda masih ingin menggunakan direktori halaman ( tidak dikelola secara aktif ), Anda dapat menggunakan perintah ini

   npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name

3. Menggunakan degit

   npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME

4. Diseret ke Vercel

2. Pasang dependensi

Didorong untuk menggunakan PNPM sehingga kait husky dapat bekerja dengan baik.

pnpm install

3. Jalankan server pengembangan

Anda dapat memulai server menggunakan perintah ini:

pnpm dev

Buka http: // localhost: 3000 dengan browser Anda untuk melihat hasilnya. Anda dapat mulai mengedit halaman dengan memodifikasi src/pages/index.tsx .

4. Ubah default

Ada beberapa hal yang perlu Anda ubah termasuk judul, URL, favicons, dll.

Temukan semua komentar dengan! Starterconf, lalu ikuti panduannya.

Jangan lupa mengubah nama paket di package.json

5. Konvensi Pesan Komit

Starter ini menggunakan komitmen konvensional, wajib menggunakannya untuk melakukan perubahan.

Proyek Menggunakan TS-NEXTJS-TAILWIND-STARTER

• Theodorusclarence.com (Sumber)
• Notiolink (sumber)
• Nextjs + materia ui + naskah

Apakah Anda menggunakan starter ini? Harap tambahkan halaman Anda (dan repo) ke akhir daftar melalui permintaan tarik. ?

Paket Ekspansi?

Starter ini sekarang dilengkapi dengan paket ekspansi.

Anda dapat dengan mudah menambahkan ekspansi seperti react hook bentuk + komponen, buku cerita, dan lebih banyak lagi hanya menggunakan satu baris perintah.

Cleanshot.2021-12-04.at.18.54.07-trimmed.mp4

Lihat repositori paket ekspansi untuk perintah

Pembaruan Router Aplikasi

Karena pembaruan router aplikasi, paket ekspansi saat ini sudah ketinggalan zaman . Ini akan diperbarui di masa depan. Anda masih dapat menggunakannya dengan menyalin dan menempelkan file.