typescript nextjs starter Download - typescript nextjs starter Source Code Unduh

typescript nextjs starter

Kode Sumber AI

2.2.0

Unduh

Starter naskah next.js

Starter naskah naskah non-opinionasi untuk next.js

Foundation yang sangat diskalakan dengan DX terbaik. Semua alat yang Anda butuhkan untuk membangun proyek Anda berikutnya.

_{Dibuat oleh João Pedro dengan bantuan banyak kontributor yang luar biasa.}

Fitur

⚡️ Next.js 15 (App Router)
⚛️ Bereaksi 19
⛑ naskah naskah
? Eslint 9 - Untuk menemukan dan memperbaiki masalah dalam kode Anda
? Prettier - Formatter kode untuk gaya yang konsisten
? Husky - untuk menjalankan skrip sebelum berkomitmen
? Commitlint - Untuk memastikan pesan komit Anda mengikuti konvensi
? Renovasi - Untuk menjaga ketergantungan Anda tetap up to date
Lint-Staged-Jalankan Eslint dan Prettier Against Staged Git Files
? PR Workflow - Jalankan Jenis Pemeriksaan & Linters pada Permintaan Tarik
EditorConfig - Gaya pengkodean yang konsisten di seluruh editor dan IDE
? Path Mapping - Komponen Impor atau Gambar Menggunakan @ Prefix
? CSP - Kebijakan Keamanan Konten untuk Peningkatan Keamanan (Kebijakan Minimal Default)
? T3 Env-Variabel Lingkungan Jenis-Aman
? Redirects - Mudah tambahkan pengalihan ke aplikasi Anda

Awal yang cepat

Cara terbaik untuk memulai dengan template ini adalah menggunakan Create Next App.

 # pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter

Perkembangan

Untuk memulai proyek secara lokal, jalankan:

pnpm dev

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

Kesaksian

“Starter ini sejauh ini merupakan starter naskah terbaik untuk fitur selanjutnya.
- Arafat Zahan

"Saya benar -benar dapat merekomendasikan repo starter naskah next.js sebagai fondasi yang solid untuk proyek masa depan Anda selanjutnya."
- Corfitz

“Pekerjaan yang brilian!”
- Soham Dasgupta

Memamerkan

Daftar situs web yang dimulai dengan starter naskah next.js:

FreeInvoice.dev
Pembuat Avatar Gagasan
Ikea Harga Rendah
Hygraph.com
rocketseat.com.br
vagaschapeco.com
Unfork.vercel.app
cryptools.dev
Tambahkan milik Anda

Dokumentasi

Persyaratan

Node.js> = 20
PNPM 9

Struktur Direktori

.github - konfigurasi github termasuk alur kerja CI.
.husky - Konfigurasi dan kait husky.
public - Aset statis seperti robots.txt, gambar, dan favicon.
src - Kode sumber aplikasi, termasuk halaman, komponen, gaya.

Skrip

pnpm dev - Memulai aplikasi dalam mode pengembangan di http://localhost:3000 .
pnpm build - Membuat pembuatan produksi yang dioptimalkan dari aplikasi Anda.
pnpm start - Mulai aplikasi dalam mode produksi.
pnpm type-check -Validasi kode menggunakan kompiler TypeScript.
pnpm lint - Menjalankan Eslint untuk semua file di direktori src .
pnpm lint:fix - Runs Eslint Fix untuk semua file di direktori src .
pnpm format - Menjalankan lebih baik untuk semua file di direktori src .
pnpm format:check - Periksa daftar file yang lebih cantik yang perlu diformat.
pnpm format:ci - Periksa yang lebih cantik untuk CI.

Pemetaan jalur

TypeScript sudah dikonfigurasi dengan pemetaan jalur khusus. Untuk mengimpor komponen atau file, gunakan @ awalan.

 import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;

Beralih ke benang/npm

Starter ini menggunakan PNPM secara default, tetapi pilihan ini adalah milik Anda. Jika Anda ingin beralih ke benang/npm, hapus file pnpm-lock.yaml , instal dependensi dengan benang/npm, ubah alur kerja CI, dan hook hotky git untuk menggunakan perintah benang/npm.

Catatan: Jika Anda menggunakan benang, pastikan untuk mengikuti langkah -langkah ini dari dokumentasi Husky sehingga kait git tidak gagal dengan benang pada windows.

Variabel Lingkungan

Kami menggunakan T3 Env untuk mengelola variabel lingkungan. Buat file .env.local di root proyek dan tambahkan variabel lingkungan Anda di sana.

Saat menambahkan variabel lingkungan tambahan, skema di ./src/lib/env/client.ts atau ./src/lib/env/server.ts harus diperbarui sesuai.

Pengalihan

Untuk menambahkan pengalihan, perbarui array redirects di ./redirects.ts . Ini diketik, jadi Anda akan mendapatkan pelengkapan otomatis untuk properti.

CSP (Kebijakan Keamanan Konten)

Kebijakan Keamanan Konten (CSP) adalah lapisan keamanan yang membantu mendeteksi dan mengurangi jenis serangan tertentu, termasuk scripting lintas situs (XSS) dan serangan injeksi data. CSP diimplementasikan dalam file next.config.ts .

Ini berisi kebijakan default dan minimal yang dapat Anda sesuaikan agar sesuai dengan kebutuhan aplikasi Anda. Ini adalah fondasi untuk dibangun.