มิดเดิลแวร์ที่มีน้ำหนักเบาและแก้ปัญหาการจัดการเส้นทางสำหรับ Next.js ขับเคลื่อนโดย Dirext?
$ npm install connext-js
เริ่มต้นอินสแตนซ์ใหม่ของ Connext
const Connext = require ( 'connext-js' ) ;
const app = Connext ( ) ; CONNEXT เป็นโซลูชันมิดเดิลแวร์สำหรับ Next.js พร้อมไวยากรณ์สไตล์ด่วนที่รองรับมิดเดิลแวร์เฉพาะทั้งบนเส้นทางและความยืดหยุ่น สำหรับมิดเดิลแวร์ทั่วโลกคุณต้องสร้างโฟลเดอร์ controllers ที่ต้องมีไฟล์คอนโทรลเลอร์ global.js เราขอแนะนำให้สร้างไฟล์คอนโทรลเลอร์สำหรับมิดเดิลแวร์อื่น ๆ ของคุณเพื่อเป็นวิธีการปรับตรรกะ API ของคุณ
การตั้งค่าเส้นทางโดยใช้ connext คล้ายกับการตั้งค่าเส้นทางใน Express
วิธีการร้องขอ HTTP ที่ถูกต้องทั้งหมดมีวิธีการที่เกี่ยวข้องกับวัตถุ Connext
app . get ( ) ;
app . post ( ) ;
app . put ( ) ;
app . delete ( ) ;
app . head ( ) ;
app . trace ( ) ;
app . patch ( ) ;
app . options ( ) ;
app . connect ( ) ;CONNEXT รองรับปลายทาง API แบบคงที่หรือแบบสอบถามใด ๆ การสนับสนุนสำหรับการกำหนดเส้นทางแบบไดนามิกกำลังจะมาเร็ว ๆ นี้
ใน connext คุณสามารถเข้าถึง วัตถุคำขอ ที่มีอยู่ใน next.js และการเข้าถึงนั้นยังคงมีอยู่ผ่านห่วงโซ่มิดเดิลแวร์- เช่นเดียวกับ Express! คุณสมบัติที่มีอยู่คือ req.url , req.method และ req.body
แตกต่างจาก Express หากคุณต้องการจัดเก็บข้อมูลคุณสามารถเพิ่มคีย์ใด ๆ ลงใน วัตถุตอบกลับ ด้วยข้อมูลใดก็ตามที่คุณต้องการจัดเก็บ สิ่งนี้จะเพิ่มวัตถุการตอบสนองของคุณและดำเนินการต่อเพื่อคงไว้ซึ่งวัตถุนี้ตลอดวงจรชีวิตของคำขอ อดีต:
response . data = JSON . stringify ( data ) ;
response . match = true ;
response . array = [ 'I' m the data you need '];ตัวอย่างโครงสร้างไฟล์:
├── ...
├── controllers
│ ├── global.js # required for global middleware
│ └── middleware.js # suggested for modularization of middleware functions
├── pages # required folder for routes in Next.js
│ └── api # required folder for API routes in Next.js
└── ...
ในการใช้ฟังก์ชั่นมิดเดิลแวร์ทั่วโลกของ Connext คุณต้องสร้างไฟล์ global.js ในโฟลเดอร์ที่เรียกว่า controllers โฟลเดอร์ controllers จะต้องอยู่ในระดับเดียวกับโฟลเดอร์ pages ของคุณและไฟล์ global.js ของคุณจะต้องส่งออก อาร์เรย์
connext มีตัวจัดการข้อผิดพลาดในตัวทั่วโลกที่ง่ายซึ่งจะทำงานเมื่อมีบางสิ่งผ่านไปในการเรียกร้องของ next() หากคุณต้องการใช้ตัวจัดการข้อผิดพลาดของคุณเองให้กำหนดใน global.js เป็นองค์ประกอบ สุดท้าย ของอาร์เรย์ที่ส่งออก
ตัวอย่าง global.js
// a global middleware function
const globalOne = ( req , res , next ) => {
console . log ( 'this the first function that runs!' ) ;
return next ( ) ;
} ;
// another global middleware function
const globalTwo = ( req , res , next ) => {
console . log ( 'another one!' ) ;
return next ( ) ;
} ;
// global error handler
const errorHandler = ( err , req , res , next ) => {
return res . status ( 500 ) . send ( 'an error occurred' ) ;
} ;
// export your array of global middleware
module . exports = [ globalOne , globalTwo , errorHandler ] ; เราขอแนะนำให้คุณปรับเปลี่ยนมิดเดิลแวร์อื่น ๆ ของคุณในไฟล์หนึ่งไฟล์ขึ้นไปในไฟล์ controllers ของคุณเพื่อให้รหัสของคุณอ่านและดีบักได้ง่าย?
middleware.js ตัวอย่าง
const middlewareController = { } ;
middlewareController . functionOne = ( req , res , next ) => {
// middleware functionality here
return next ( ) ;
}
middlewareController . functionTwo = ( req , res , next ) => {
// middleware functionality here
return next ( ) ;
}
module . exports = middlewareController ;เช่นเดียวกับใน Express ทุกวิธีใน Connext มีสตริงที่ผูกไว้กับมันซึ่งสอดคล้องกับวิธี HTTP ที่ถูกต้อง
ตัวอย่างเช่น: GET, DELETE, POST ฯลฯ
ในการกำหนดเส้นทางโดยใช้ Connext ให้เพิ่มไฟล์ JavaScript ภายในโฟลเดอร์ api ที่ต้องการของ JS.JS
├── pages # required folder for routes in Next.js
│ └── api # required folder for API routes in Next.js
│ └── exampleRoute.js # created route file inside of API folder
ภายในไฟล์เส้นทาง
const Connext = require ( 'Connext-js' ) ;
const middleware = require ( '../../controllers/middleware' ) ;
const app = Connext ( ) ;
app . get ( '/api/exampleRoute' , middleware . one , middleware . two , ( req , res ) => {
res . status ( 200 ) . json ( res . example ) ;
} ) ;
app . post ( '/api/exampleRoute' , middleware . three , ( req , res ) => {
res . status ( 200 ) . json ( res . example ) ;
} ) ;
app . delete ( '/api/exampleRoute' , middleware . four , ( req , res ) => {
res . status ( 200 ) . json ( res . example ) ;
} ) ;
export default app ;Sara Powers
Eli Gallipoli
Izumi Sato
อเล็กซ์คัง