next on netlify

การหักล้าง Next-on-Netlify

เรากำลังลดราคา next-on-netlify เพื่อสนับสนุนปลั๊กอินที่จำเป็นต่อไปของ Netlify กรุณาเยี่ยมชมปัญหานี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการเสื่อมราคาของ next-on-netlify และถามคำถามใด ๆ นอกจากนี้คุณยังสามารถเยี่ยมชมเอกสารการโยกย้ายแบบง่าย ๆ ของเราเพื่อขอความช่วยเหลือในการย้ายไปยังปลั๊กอิน

• สร้างปลั๊กอิน @netlify/plugin-nextjs
• แพ็คเกจปลั๊กอิน NPM

next-on-netlify เป็นยูทิลิตี้สำหรับการเปิดใช้งานการแสดงผลฝั่งเซิร์ฟเวอร์ใน next.js บน netlify มันห่อแอปพลิเคชันของคุณในเลเยอร์ความเข้ากันได้เล็ก ๆ เพื่อให้หน้าสามารถใช้ฟังก์ชั่น netlify เพื่อแสดงผลด้านเซิร์ฟเวอร์

สารบัญ

• การติดตั้ง
• การตั้งค่า
  • 1. ตั้งค่าเป้าหมาย next.js เป็น serverless
  • 2. เพิ่มเบ็ด postbuild
  • 3. กำหนดค่าสำหรับ netlify
    • (ไม่บังคับ) กำหนดค่า submodules ส่วนตัว Git
• การสาธิต
• อุปกรณ์เสริมเสริม
  • ดูตัวอย่างในพื้นที่
  • การเปลี่ยนเส้นทางแบบกำหนดเองแบบกำหนดเอง
  • ฟังก์ชั่น netlify ที่กำหนดเอง
  • ฟังก์ชั่นพื้นหลัง
  • การใช้ข้อมูลประจำตัวแบบ netlify
• คำเตือน
  • ทางเลือกสำหรับหน้าเว็บที่มี getStaticPaths
  • ถัดไป/รูปภาพ
• การให้เครดิต
• การแสดง

การติดตั้ง

 npm install --save next-on-netlify

การตั้งค่า

1. ตั้งค่าเป้าหมาย next.js เป็น serverless

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

มันง่ายสุด ๆ เพียงสร้างไฟล์ next.config.js ในรูทของโครงการของคุณและเขียนสิ่งต่อไปนี้:

 // next.config.js

module . exports = {
  // Target must be serverless
  target : "serverless" ,
} ;

หากจำเป็นต้องมีไบนารีในการปรับใช้จำเป็นต้องมีการกำหนดค่าต่อไปนี้ (PRISMA เป็นตัวอย่าง):

 // next.config.js

module . exports = {
  // Target must be experimental-serverless-trace
  // Your build time will be longer with this option
  target : "experimental-serverless-trace" ,
} ;

2. เพิ่มเบ็ด postbuild

แพ็คเกจถัดไป-Netlify เพิ่มคำสั่ง next-on-netlify เมื่อเราเรียกใช้คำสั่งนี้เวทมนตร์บางอย่างจะเกิดขึ้นเพื่อเตรียมแอปถัดไปของเรา js สำหรับโฮสต์บน netlify*

เราต้องการให้คำสั่งต่อไป-Netlify ทำงานหลังจากที่เราสร้างแอปพลิเคชัน next.js ของเรา ลองเพิ่มเบ็ด postbuild ลงในไฟล์ package.json ของเรา คุณควรเพิ่ม "postbuild": "next-on-netlify" ลงในสคริปต์ที่มีอยู่เช่นนี้:

 {
  "name": "my-nextjs-app",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "postbuild": "next-on-netlify"
  },
  ...
}

*หากคุณอยากรู้เกี่ยวกับ "เวทมนตร์" ให้ตรวจสอบไฟล์ next-on-netlify.js ที่มีการบันทึกไว้เป็นอย่างดี

3. กำหนดค่าสำหรับ netlify

เราเกือบจะเสร็จแล้ว! เราเพียงแค่ต้องบอกวิธีสร้างแอป Next.js ของเราโดยที่โฟลเดอร์ฟังก์ชั่นตั้งอยู่และโฟลเดอร์ใดที่จะอัปโหลดไปยัง CDN เราทำเช่นนั้นด้วยไฟล์ netlify.toml ในรูทของโครงการของคุณและคำแนะนำต่อไปนี้:

[ build ]
  command   = " npm run build "
  functions = " out_functions "
  publish   = " out_publish "

หมายเหตุ: out_functions และ out_publish เป็นรหัสที่ยากในการติดตั้งแบบ Net-on-Netlify สิ่งเหล่านี้ไม่สามารถกำหนดค่าได้ในขณะนี้

(ไม่บังคับ) กำหนดค่า submodules ส่วนตัว Git

หากโครงการของคุณมี submodules ส่วนตัวเพื่อที่จะปรับใช้คุณจะต้อง:

1. สร้างคีย์การปรับใช้ใน netlify และเพิ่มลงใน submodules ที่เกี่ยวข้องเพื่อให้สามารถโคลนในระหว่างกระบวนการปรับใช้

2. ตรวจสอบให้แน่ใจว่ารีโมท submodule ถูกตั้งค่าเป็นรูปแบบ SSH (เช่น [email protected]:owner/project.git ไม่ใช่ https://... ) ภายในไดเรกทอรี submodule รีโมต Git สามารถอัปเดตด้วย:

    # git remote set-url [remote] [url]
   git remote set-url origin [email protected]:owner/project.git

เราทำเสร็จแล้ว มาปรับใช้กันเถอะ

หากคุณไม่คุ้นเคยกับ NetLify ให้ทำตามคำแนะนำการปรับใช้ที่นี่: https://www.netlify.com/blog/2020/11/30/30/30/30/30/3

การสาธิต

• เว็บไซต์: https://next-on.netlify.com/
• รหัส: https://github.com/netlify-labs/next-on-netlify-demo

อุปกรณ์เสริมเสริม

ดูตัวอย่างในพื้นที่

ฉันขอแนะนำให้คุณยังคงใช้ next dev เพื่อสร้างและดูตัวอย่างแอปพลิเคชันของคุณในเครื่อง

แต่ถ้าคุณต้องการเลียนแบบการปรับใช้ netlify บนคอมพิวเตอร์ของคุณคุณยังสามารถเรียกใช้ next-on-netlify ในเครื่องแล้วใช้ netlify-cli เพื่อดูตัวอย่างผลลัพธ์

ขั้นแรกให้ติดตั้ง netlify-cli เวอร์ชันล่าสุด (คุณสามารถดู package.json เพื่อดูเวอร์ชันที่ทดสอบ Net-on-Netlify ได้รับการทดสอบ):

npm install -g netlify-cli

จากนั้นเพิ่มบล็อก [dev] ต่อไปนี้ลงใน netlify.toml ของคุณ:

 # netlify.toml

# [build]
#   ...

[ dev ]
  functions = " out_functions "
  publish   = " out_publish "
  # We manually set the framework to static, otherwise Netlify automatically
  # detects Next.js and redirects do not work.
  # Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
  framework = " #static "

สุดท้ายเพิ่มบรรทัดต่อไปนี้ใน .gitignore ของคุณ:

 # .gitignore

# Files generated by next-on-netlify command
/out_publish/
/out_functions/

ตอนนี้คุณพร้อมแล้ว

ต่อจากนี้เมื่อใดก็ตามที่คุณต้องการดูตัวอย่างแอปพลิเคชันของคุณในเครื่องเพียงเรียกใช้:

1. npx next-on-netlify watch : สิ่งนี้จะเรียก next build เพื่อสร้างแอป Next.js ของคุณและ next-on-netlify เพื่อเตรียมแอปถัดไปของคุณเพื่อเข้ากันได้กับ NetLify การเปลี่ยนแปลงซอร์สโค้ดใด ๆ จะทริกเกอร์บิลด์อื่น
2. netlify dev : สิ่งนี้จะเลียนแบบ netlify บนคอมพิวเตอร์ของคุณและให้คุณดูตัวอย่างแอปของคุณใน http://localhost:8888

บันทึก:

โหมดดูตัวอย่างยังไม่พร้อมใช้งานในเครื่องโดยใช้ netlify dev สำหรับหน้าคงที่โดยไม่ต้องมีการทบทวนใหม่หรือทางเลือก จะได้รับการสนับสนุนเร็ว ๆ นี้

สำหรับตอนนี้โหมดดูตัวอย่าง ได้ รับการสนับสนุนในการผลิตสำหรับประเภทหน้า Next.js ทั้งหมด

การเปลี่ยนเส้นทางแบบกำหนดเองแบบกำหนดเอง

คุณสามารถกำหนดเส้นทางการเปลี่ยนเส้นทางที่กำหนดเองใน _redirects และ/หรือในไฟล์ netlify.toml ของคุณ ความสำคัญของกฎเหล่านี้คือ:

• _redirects
• การเปลี่ยนเส้นทาง next-on-netlify

ปัจจุบันยังไม่มีการสนับสนุนสำหรับการเปลี่ยนเส้นทางในไฟล์ netlify.toml ของคุณ

อ่านเพิ่มเติมเกี่ยวกับการเปลี่ยนเส้นทาง NetLify ที่นี่

ฟังก์ชั่น netlify ที่กำหนดเอง

next-on-netlify สร้างฟังก์ชั่น netlify หนึ่งฟังก์ชั่นสำหรับแต่ละหน้า SSR และจุดสิ้นสุด API ของคุณ ขณะนี้คุณสามารถสร้างฟังก์ชั่น netlify ที่กำหนดเองได้โดยใช้ @netlify/plugin-nextjs

ฟังก์ชั่นพื้นหลัง

หากหน้า/เส้นทาง API ของคุณต่อไปใน -background มันจะถือว่าเป็นฟังก์ชันพื้นหลัง netlify หมายเหตุ: ฟังก์ชั่นพื้นหลังมีเฉพาะในบางแผน

การใช้ข้อมูลประจำตัวแบบ netlify

คุณสามารถใช้เอกลักษณ์ของ Netlify กับ next-on-netlify สำหรับทุกหน้าที่มีการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (GetInitialProps*, GetServersideProps และเส้นทาง API) คุณสามารถเข้าถึงวัตถุ ClientContext ผ่านพารามิเตอร์ req

ตัวอย่างเช่น:

 const Page = ( ) => < p > Hello World! </ p > ;

export const getServerSideProps = async ( { req } ) => {
  // Get event and context from Netlify Function
  const {
    netlifyFunctionParams : { event , context } ,
  } = req ;

  // Access Netlify identity
  const { identity , user } = context . clientContext ;

  return {
    props : { } ,
  } ;
} ;

export default Page ;

ในการเข้าถึงเอกลักษณ์ NetLify จากหน้าเว็บที่ไม่มีการเรนเดอร์ฝั่งเซิร์ฟเวอร์คุณสามารถสร้างเส้นทาง API ถัดไปที่ดำเนินการตามตรรกะที่เกี่ยวข้องกับตัวตน:

 export default async function getUser ( req , res ) {
  // Get event and context from Netlify Function
  const {
    netlifyFunctionParams : { event , context } ,
  } = req ;

  // Access Netlify identity
  const { user } = context . clientContext ;

  // Respond with user object
  res . json ( { user } ) ;
}

* โปรดทราบว่าหน้าเว็บที่ใช้ GetInitialProps เป็นเพียงการแสดงผลฝั่งเซิร์ฟเวอร์ในการโหลดหน้าเริ่มต้นเท่านั้นและไม่ใช่เมื่อผู้ใช้นำทางฝั่งไคลเอ็นต์ระหว่างหน้า

คำเตือน

ทางเลือกสำหรับหน้าเว็บที่มี getStaticPaths

หน้าทางเลือกนั้นมีพฤติกรรมแตกต่างกันไปตาม next-on-netlify มากกว่าที่พวกเขาทำกับ Next.js ใน next.js เมื่อนำทางไปยังเส้นทางที่ไม่ได้กำหนดไว้ใน getStaticPaths มันจะแสดงหน้าทางเลือกก่อน next.js จากนั้นสร้าง HTML ในพื้นหลังและแคชสำหรับคำขอในอนาคต

ด้วย next-on-netlify เมื่อนำทางไปยังเส้นทางที่ไม่ได้กำหนดไว้ใน getStaticPaths ด้านไอทีด้านไอทีจะแสดงหน้าหน้าและส่งไปยังผู้ใช้โดยตรง ผู้ใช้ไม่เคยเห็นหน้าทางเลือก หน้าไม่ได้ถูกแคชสำหรับคำขอในอนาคต

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ดู: ฉบับที่ 7

ถัดไป/รูปภาพ

โซลูชันที่มีอยู่ของเราสำหรับ Next/Image นั้นไม่ได้มีประสิทธิภาพมากนัก เรามีการปรับปรุงประสิทธิภาพบนแผนงานของเราขึ้นอยู่กับงานภายใน

เพื่อให้ได้ประสิทธิภาพที่ดีขึ้นตอนนี้เราขอแนะนำให้ใช้ผู้ให้บริการคลาวด์เช่น Cloudinary (ดูเอกสารถัดไป JS)

การให้เครดิต

แพ็คเกจนี้ได้รับการดูแลโดย Lindsay Levine, Finn Woelm และ Cassidy Williams

Shoutout to @Mottox2 (ผู้บุกเบิกการโฮสต์ next.js บน netlie) และ @danielcondemarin (ผู้แต่ง Serverless-next.js สำหรับ AWS) ทั้งสองเป็นแรงบันดาลใจที่ยิ่งใหญ่สำหรับแพ็คเกจนี้

- "ขอบคุณ" ใหญ่สำหรับผู้คนต่อไปนี้สำหรับการมีส่วนร่วมการสนับสนุนและการทดสอบเบต้า:

• @Spencewood
• @alxhghs
• @gamliela
• @wei
• @laugharn
• @rajington
• @etrepum
• @jonasbuntinx
• @JOOSTMEIJLES

การแสดง

ไซต์ต่อไปนี้สร้างขึ้นด้วย next-on-netlify :

ความคิดเห็น reaact.com (ผ่าน Twitter)

Missionbit.org (#18)

gemini.com

bigbinary.com

สร้างบล็อกของคุณเองและปรับใช้เพื่อ netlify!

คุณกำลังสร้างสิ่งที่ยอดเยี่ยมด้วย next-on-netlify หรือไม่? แจ้งให้เราทราบแล้วเราจะนำเสนอที่นี่ :)