Next JS Landing Page Starter Template

เทมเพลตหน้า Landing Page ที่สร้างขึ้นด้วย JS 14+ ถัดไป, Tailwind CSS 3 และ typeScript

ชุดรูปแบบหน้า Landing Page ที่เขียนใน Next.js, Tailwind CSS และ typeScript ⚡ทำด้วยประสบการณ์นักพัฒนาก่อน: next.js, typenscript, eslint, prettier, husky, lint-stage, vscode, netlify, postcss, tailwind css

โคลนโครงการนี้และใช้เพื่อสร้างโครงการ Next.js ของคุณเอง คุณสามารถตรวจสอบการสาธิตเทมเพลต JS ถัดไป

ผู้สนับสนุน

เพิ่มโลโก้ของคุณที่นี่

การสาธิต

ตรวจสอบการสาธิตสดของเรา

คุณสมบัติ

ประสบการณ์นักพัฒนาก่อน:

• next.js สำหรับเครื่องกำเนิดไซต์แบบคงที่
• - รวมเข้ากับ css tailwind
• - postcss สำหรับการประมวลผล css tailwind และรวมเข้ากับ styled-jsx
• - ประเภทการตรวจสอบ typescript
• ✅โหมดเข้มงวดสำหรับ typeScript และ React 18
• ✏ linter ด้วย ESLINT (ค่าเริ่มต้น nextJS, NextJS Core Web Vitals และการกำหนดค่า AirBnB)
• - ฟอร์แมตรหัสด้วยสวยกว่า
• - ฮัสกี้สำหรับ git hooks
• ชุดผ้าสำลีสำหรับเรียกใช้ linters บนไฟล์ที่จัดฉาก GIT
• - การกำหนดค่า VSCODE: การดีบักการตั้งค่างานและส่วนขยายสำหรับ postcss, eslint, prettier, typescript
• - SEO Metadata, JSON-LD และ OPEN กราฟแท็กพร้อม SEO ถัดไป
• เครื่องวิเคราะห์ Bundler
• ️การปรับใช้คลิกเดียวด้วย netlify (หรือการปรับใช้ด้วยตนเองกับบริการโฮสติ้งใด ๆ )
• - รวมธีมฟรี
• - เพิ่มคะแนนประภาคาร

ฟีเจอร์ในตัวจาก next.js:

• ☕ minify html & css
• - โหลดสดใหม่
• ✅การจับแคช

ส่วนประกอบรวม

• นาวีบาร์
• ฮีโร่
• คุณสมบัติ
• แบนเนอร์ CTA
• ส่วนท้าย

ค้นหาส่วนประกอบเพิ่มเติมในธีม NextJS พรีเมี่ยมของเรา

ปรัชญา

• รหัสน้อยที่สุด
• เป็นมิตรกับ SEO
• พร้อมผลิต

ความต้องการ

• node.js และ npm

เริ่มต้น

เรียกใช้คำสั่งต่อไปนี้ในสภาพแวดล้อมท้องถิ่นของคุณ:

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

จากนั้นคุณสามารถทำงานในท้องถิ่นในโหมดการพัฒนาด้วยการโหลดสด:

 npm run dev

เปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ที่คุณชื่นชอบเพื่อดูโครงการของคุณ สำหรับข้อมูลของคุณ JS ถัดไปต้องใช้เวลาในการรวบรวมโครงการเป็นครั้งแรก

 .
├── 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

การปรับแต่ง

คุณสามารถกำหนดค่าธีมได้อย่างง่ายดาย โปรดเปลี่ยนไฟล์ต่อไปนี้:

• public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png และ public/favicon-32x32.png : favicon ของคุณคุณสามารถสร้างจาก https://favicon.io/favicon-converter
• src/styles/global.css : ไฟล์ css ของคุณโดยใช้ tailwind css
• utils/AppConfig.ts : ไฟล์กำหนดค่า
• src/pages/index.tsx : หน้าดัชนีของชุดรูปแบบที่ใช้องค์ประกอบ Base
• src/template/Base.tsx : ส่วนประกอบ Base โดยใช้บล็อกส่วนประกอบ
• src/templates/* : รายการบล็อกส่วนประกอบ
• src/* : โฟลเดอร์อื่น ๆ ใน SRC เป็นส่วนประกอบอะตอมที่ใช้โดยส่วนประกอบบล็อก

นี่คือเลเยอร์:

• จุดเริ่มต้น: index.tsx ใน src/pages
• เทมเพลต Base : Base.tsx ใน src/templates
• ใช้บล็อกส่วนประกอบจาก src/templates/*
• ใช้ส่วนประกอบอะตอมจาก src/*

ปรับใช้กับการผลิต

คุณสามารถดูผลลัพธ์ได้ในโหมดการผลิตด้วย:

 $ npm run build
$ npm run start

ไฟล์ HTML และ CSS ที่สร้างขึ้นจะถูกลดลง (คุณสมบัติในตัวจาก JS ถัดไป) นอกจากนี้ยังจะลบ CSS ที่ไม่ได้ใช้ออกจาก Tailwind CSS

คุณสามารถสร้างงานสร้างที่ดีที่สุดด้วย:

 npm run build-prod

ตอนนี้ธีมของคุณพร้อมที่จะปรับใช้ ไฟล์ที่สร้างขึ้นทั้งหมดจะอยู่ที่โฟลเดอร์ out ซึ่งคุณสามารถปรับใช้กับบริการโฮสติ้งใด ๆ

ปรับใช้เพื่อ netlify

โคลนที่เก็บนี้ในบัญชี GitHub ของตัวเองและปรับใช้เพื่อ netlify:

ข้อมูล VSCODE (ไม่บังคับ)

หากคุณเป็นผู้ใช้ VSCODE คุณสามารถรวมเข้ากับ VSCODE ได้ดีขึ้นโดยการติดตั้งส่วนขยายที่แนะนำใน .vscode/extension.json รหัสเริ่มต้นมาพร้อมกับการตั้งค่าสำหรับการรวมที่ไร้รอยต่อกับ VSCODE การกำหนดค่าการดีบักยังมีไว้สำหรับประสบการณ์การดีบักส่วนหน้าและแบ็กเอนด์

เคล็ดลับ PRO: หากคุณต้องการการตรวจสอบประเภทของโครงการที่มี typeScript คุณสามารถเรียกใช้งานบิลด์ด้วย CMD + Shift + B บน Mac

ผลงาน

ทุกคนยินดีที่จะมีส่วนร่วมในโครงการนี้ อย่าลังเลที่จะเปิดปัญหาหากคุณมีคำถามหรือพบข้อผิดพลาด

ใบอนุญาต

ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ลิขสิทธิ์© 2024

ดูใบอนุญาตสำหรับข้อมูลเพิ่มเติม

ผู้สนับสนุน

เพิ่มโลโก้ของคุณที่นี่

---

ทำด้วย♥โดย creativedesignsguru