Download Next JS Landing Page Starter Template - Download Kode Sumber Next JS Landing Page Starter Template

Next JS Landing Page Starter Template

Kode Sumber AI

1.0.0

Unduh

Template halaman arahan yang dibangun dengan JS 14+ berikutnya, Tailwind CSS 3 dan TypeScript

Banner starter JS berikutnya

Tema halaman arahan yang ditulis di Next.js, Tailwind CSS dan TypeScript ⚡️ Dibuat dengan Pengalaman Pengembang terlebih dahulu: Next.js, TypeScript, Eslint, lebih cantik, husky, lint-stag, vscode, netlify, postcss, tailwind CSS.

Kloning proyek ini dan gunakan untuk membuat proyek selanjutnya.js Anda sendiri. Anda dapat memeriksa demo Template JS berikutnya.

Sponsor



Tambahkan logo Anda di sini

Demo

SCREENSHOT TEMPLATE Halaman PANDUAN NEXTJS

Lihat demo langsung kami.

Fitur

Pengalaman Pengembang Pertama:

Next.js untuk generator situs statis
? Integrasi dengan CSS Tailwind
? PostCSS untuk memproses CSS Tailwind dan terintegrasi ke styled-jsx
? Ketik memeriksa naskah
✅ Mode ketat untuk naskah dan bereaksi 18
✏️ linter dengan Eslint (Default NextJS, Vital Web Core NextJS dan Konfigurasi Airbnb)
? Formatter kode dengan lebih cantik
? Husky untuk kait git
Lint-staged untuk menjalankan linters di file git yang dipentaskan
? Konfigurasi vScode: debug, pengaturan, tugas dan ekstensi untuk postcss, eslint, lebih cantik, naskah
? SEO Metadata, JSON-LD dan Tag Grafik Buka dengan SEO Berikutnya
Bundler Analyzer
? ️ Satu penempatan klik dengan netlify (atau penyebaran manual ke layanan hosting apa pun)
? Sertakan tema gratis
? Maksimalkan skor mercusuar

Fitur bawaan dari Next.js:

☕ Minify HTML & CSS
? Reload langsung
✅ Cache Busting

Komponen yang disertakan

Navbar
Pahlawan
Fitur
CTA Banner
Footer

Temukan lebih banyak komponen dalam tema premium NextJS kami.

Filsafat

Kode minimal
Ramah SEO
Siap-produksi

Persyaratan

Node.js dan npm

Memulai

Jalankan perintah berikut di lingkungan lokal Anda:

 git clone --depth=1 https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template.git my-project-name
cd my-project-name
npm install

Kemudian, Anda dapat menjalankan secara lokal dalam mode pengembangan dengan Live Reload:

 npm run dev

Buka http: // localhost: 3000 dengan browser favorit Anda untuk melihat proyek Anda. Untuk informasi Anda, JS berikutnya perlu meluangkan waktu untuk menyusun proyek untuk pertama kalinya Anda.

 .
├── README.md            # README file
├── next.config.js       # Next JS configuration
├── public               # Public folder
│   └── assets
│       └── images       # Image used by default template
├── src
│   ├── background       # Atomic background component
│   ├── button           # Atomic button component
│   ├── cta              # Atomic cta component
│   ├── feature          # Atomic feature component
│   ├── footer           # Atomic footer component
│   ├── hero             # Atomic hero component
│   ├── layout           # Atomic layout component
│   ├── navigation       # Atomic navigation component
│   ├── pages            # Next JS pages
│   ├── styles           # PostCSS style folder with Tailwind
│   ├── templates        # Default template
│   └── utils            # Utility folder
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

Kustomisasi

Anda dapat dengan mudah mengkonfigurasi tema. Harap ubah file berikut:

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png dan public/favicon-32x32.png : favicon Anda, Anda dapat menghasilkan dari https://favicon.io/favicon-converter/
src/styles/global.css : File CSS Anda menggunakan CSS Tailwind
utils/AppConfig.ts : file konfigurasi
src/pages/index.tsx : Halaman indeks dari tema yang menggunakan komponen Base
src/template/Base.tsx : Komponen Base menggunakan blok komponen
src/templates/* : Daftar blok komponen
src/* : Folder lain di SRC adalah komponen atom yang digunakan oleh blok komponen

Ini lapisannya:

Titik masuk: index.tsx di src/pages
Template Base : Base.tsx di src/templates
Gunakan blok komponen dari src/templates/*
Gunakan komponen atom dari src/*

Digunakan untuk produksi

Anda dapat melihat hasilnya secara lokal dalam mode produksi dengan:

 $ npm run build
$ npm run start

File HTML dan CSS yang dihasilkan dikini (fitur bawaan dari JS berikutnya). Ini juga akan menghapus CSS yang tidak digunakan dari CSS Tailwind.

Anda dapat membuat bangunan produksi yang dioptimalkan dengan:

 npm run build-prod

Sekarang, tema Anda siap digunakan. Semua file yang dihasilkan terletak di folder out , yang dapat Anda gunakan dengan layanan hosting apa pun.

Digunakan ke Netlify

Klon Repositori ini pada akun GitHub sendiri dan sebutkan ke Netlify:

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 starter muncul dengan pengaturan untuk integrasi tanpa batas dengan vScode. Konfigurasi debug juga disediakan untuk pengalaman debugging frontend dan backend.

Pro Tips: Jika Anda memerlukan periksa tipe lebar proyek dengan TypeScript, Anda dapat menjalankan build dengan CMD + Shift + B pada Mac.