หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

NextJS Boilerplate

แผ่นความคิดที่มีความคิดเห็นสำหรับโครงการเริ่มต้นโดยใช้ NextJS

คุณสมบัติ

  • - ถัดไป 13
  • ⚛ตอบสนอง 18
  • - เอกสารและแอพที่กำหนดเอง
  • ⌨พิมพ์ความปลอดภัยโดยใช้ typescript ในโหมดเข้มงวด
  • - เขียน SCSS & Future CSS ด้วย postcss + preset-env
  • - svg sprite สำหรับไอคอน
  • - ผ้าสำลีของคุณด้วย eslint & stylelint
  • - สวยกว่าสำหรับสไตล์รหัสที่สอดคล้องกัน
  • - Jest + Testing Library สำหรับการทดสอบ
  • ☝ husky + stage staged สำหรับการประกันคุณภาพรหัส
  • ไฟล์ editorConfig สำหรับการเยื้องที่สอดคล้องกัน
  • - Redux กับ react-redux และ redux-thunk

สาขารูปแบบ

เซิร์ฟเวอร์ที่กำหนดเอง 

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

เอนไซม์ 

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

ไม่มี redux 

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

เริ่มต้น

ก่อนที่คุณจะเริ่มพัฒนาแอปพลิเคชันที่ยอดเยี่ยมของคุณคุณต้องติดตั้งการพึ่งพาของโครงการ ตรวจสอบให้แน่ใจว่าคุณมีโหนด (> = 10.13.0) และ NPM ติดตั้งและเรียกใช้: 

$ npm install

⌨การพัฒนา

เมื่อติดตั้งการพึ่งพาทั้งหมดแล้วคุณสามารถเริ่มพัฒนาได้ ในการเริ่มต้นเซิร์ฟเวอร์การพัฒนาบน http: // localhost: 3000 run: 

$ npm run dev

- การผลิต

ในการเรียกใช้แอปพลิเคชันของคุณในการผลิตตรวจสอบให้แน่ใจว่าได้สร้างการสร้างก่อน: 

$ npm run build

จากนั้นเริ่มแอปพลิเคชันของคุณด้วยหมายเลขพอร์ตที่ให้ไว้ (ค่าเริ่มต้นเป็น 3000 หากไม่ได้ให้ไว้): 

$ PORT=8080 npm run start

- คงที่

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

npm run export

สิ่งนี้จะทำให้หน้า html แบบคงที่เป็น ./out

- ผ้าลินิน

Boilerplate มีผ้าประกันสองสามใบเพื่อช่วยให้คุณจับตาดูรหัสความสอดคล้องและประเภทความปลอดภัย มีสามผ้าลินิน: หนึ่งอันสำหรับ CSS หนึ่งอันสำหรับ TypeScript และอีกอันเพื่อความปลอดภัยประเภท คุณสามารถใช้แต่ละคำสั่งแยกกันโดยใช้คำสั่งต่อไปนี้: 

$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types

เคล็ดลับ: เพื่อให้ได้ประโยชน์สูงสุดจากผ้าลินินของคุณติดตั้งปลั๊กอินที่สอดคล้องกัน (Stylelint, Tslint) สำหรับตัวแก้ไขหรือ IDE ของคุณ

สวยกว่า

Prettier ช่วยให้คุณบังคับใช้รูปแบบรหัสที่สอดคล้องกัน (ความเห็น) ถ้าเป็นไปได้คุณสามารถบอกให้ตัวแก้ไขของคุณจัดรูปแบบรหัสของคุณเมื่อคุณบันทึกไฟล์ หากคุณไม่สามารถทำสิ่งนี้ได้คุณสามารถเรียกใช้ Prettier ด้วยตนเองโดยใช้: 

$ npm run prettier

- การทดสอบ

คุณสามารถเขียนการทดสอบโดยใช้ jest และเอนไซม์ คุณสามารถเรียกใช้การทดสอบทั้งหมดด้วยคำสั่งต่อไปนี้ 

$ npm run test

หากคุณต้องการติดตามการพัฒนาที่ขับเคลื่อนด้วยการทดสอบคุณสามารถใช้: 

$ npm run test:dev

โมดูล

ตัวพิมพ์ใหญ่

TypeScript และ Babel ได้รับการกำหนดค่าล่วงหน้าด้วยตัวแก้ไขโมดูลที่กำหนดเอง ซึ่งหมายความว่าคุณสามารถใช้การนำเข้าแบบสัมบูรณ์กับเนมสเปซแบบกำหนดเองได้โดยค่าเริ่มต้นสำหรับโมดูลต่อไปนี้: 

 /* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'

SCSS

โดยค่าเริ่มต้นพา ธ ./src/common/css จะถูกกำหนดค่าเป็นพา ธ ที่รวมไว้สำหรับตัวโหลด SCSS ของเรา ซึ่งหมายความว่าคุณสามารถนำเข้าไฟล์ใด ๆ ของโฟลเดอร์นี้โดยตรงโดยไม่ต้องใช้เส้นทางสัมพัทธ์หรือแบบสัมบูรณ์: 

 @import 'variables' ;
@import 'colors' ;
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด