next react graphql apollo hooks

Performance Next + React + GraphQl Starter Kit

วัตถุประสงค์ของชุดเริ่มต้นนี้ไม่ได้เป็นวิธีแก้ปัญหาที่สมบูรณ์ แต่บทนำสำหรับการสร้างเว็บไซต์ประสิทธิภาพสูงด้วย next.js, React และ GraphQL เราใช้ที่เก็บนี้สำหรับโครงการใหม่ที่ Atheros Intelligence และเป็นที่เก็บสำหรับบทความของเราที่ GraphQl Mastery

• โคลนที่เก็บด้วย git clone [email protected]:atherosai/next-react-graphql-apollo-hooks.git
• เพื่อรักษาการพึ่งพาที่ปลอดภัยใน package-lock.json ให้ใช้ npm ci เพื่อติดตั้งแพ็คเกจ

node.js เวอร์ชัน

แม้ว่าชุดสตาร์ทเตอร์ควรทำงานกับเวอร์ชัน Node เก่า แต่ฉันขอแนะนำให้ใช้ LTS version ล่าสุด ใน package.json เราได้กำหนดข้อกำหนดดังนี้:

 "engines" : {
    "node" : " >=10.0.0 " ,
    "npm" : " >6 "
  },

เทคโนโลยีและคุณสมบัติหลัก

• next.js
• ตอบโต้
• GraphQl (Apollo Server)
• ลูกค้า Apollo
• ตะขอ react Apollo
• node.js
• ตัวพิมพ์ใหญ่
• graphql code generator
• ล้อเล่น

การใช้งานการผลิต

เพื่อให้ได้ประสิทธิภาพที่ดีที่สุดคุณควรเปิดใช้งาน HTTP/2 และเปิดใช้งานการบีบอัดใน Proxy Reverse (Nginx) ของคุณ เซิร์ฟเวอร์ Node.js ล่าสุดก็เป็นประโยชน์เช่นกัน

การกำหนดค่าสภาพแวดล้อม

โซลูชันสำหรับตัวแปรสภาพแวดล้อมถูกสร้างขึ้นโดยใช้ไลบรารี DOTENV และตัวแปรสภาพแวดล้อมสองตัว ตัวแปร NODE_ENV ที่รู้จักกันดีสามารถตั้งค่าเป็นการ development หรือ production และ CUSTOM_ENV ของเราซึ่งกำหนดสภาพแวดล้อม นี่อาจเป็นการ staging production สภาพแวดล้อม local หรือแม้แต่เซิร์ฟเวอร์บิลด์ของคุณ ตัวแปรทั้งสองนี้กำหนดชื่อไฟล์ .env ในโฟลเดอร์ /secrets ที่จะใช้ หากเราต้องการตัวอย่างเช่นการกำหนดค่าสำหรับสภาพแวดล้อมการจัดเตรียมของเราเราจะสร้างไฟล์ที่เรียกว่า /secrets/production-staging.env และวางตัวแปรสภาพแวดล้อมทั้งหมดที่นั่น ตัวอย่างสำหรับไฟล์ดังกล่าวอาจเป็นตัวอย่างต่อไปนี้ที่เราสามารถใช้สำหรับการพัฒนา

NODE_ENV=development
CUSTOM_ENV=local
PORT=3000
API_URL=http://localhost:3000/graphql
HOST=http://localhost:3000

ความปลอดภัยและการตรวจสอบ

คุณสามารถเรียกใช้การตรวจสอบความปลอดภัยเกี่ยวกับการอ้างอิงด้วย ตรวจสอบให้แน่ใจว่าคุณใช้ package-lock.json ในที่เก็บของเรา

npm audit