如何編寫僅在前端或後端其中一方執行的程式碼 在您的頁面組件中，您可以通過檢查window屬性來僅在伺服器端或客戶端執行程式碼。 該屬性僅在瀏覽器中存在，因此您可以進行檢查： if (typeof window === 'undefined') { } 並將伺服器端程式碼放入該區塊中。 同樣地，您可以通過檢查進行僅客戶端程式碼的執行： if (typeof window !== 'undefined') { } JS提示：我們在這裡使用typeof運算符，因為我們無法以其他方式檢測到一個值是否未定義。我們不能做if (window === undefined)，因為這樣會得到一個“window is not defined”的運行時錯誤 作為構建時間優化，Next.js還會從bundles中刪除使用這些檢查的程式碼。客戶端bundle將不會包含包裹在if (typeof window === 'undefined') {}區塊中的內容。
數據URL是瀏覽器提供的一個有用功能。 我們可以使用圖像來嵌入在HTML本身中，而不是引用文件系統文件，像這樣： <img src="data:image/png;base64,iVBORw0KGgoAA…" /> 其中，垃圾部分是由看似隨機的字母和數字組成的，非常長。 我正在使用Canvas API動態生成圖像，並偶然發現了Canvas物件的toDataURL()方法： canvas.toDataURL() 我認為這對於在伺服器端生成圖像並在網頁中提供圖像時非常有用。 特別是在Node.js進程中，使用canvas npm套件我們可以初始化一個Canvas： const { createCanvas, loadImage } = require('canvas') const canvas = createCanvas(200, 200) const ctx = canvas.getContext('2d') 然後，我們可以繪製圖像，例如使用ctx.fillText('Hello, World!', 50, 100)，並調用canvas.toDataURL()生成圖像的數據URL，並將其附加為HTML字符串： const imageHTML = '<img src="' + canvas.toDataURL() + '" />' 當然，您也可以在前端執行相同的操作，只是現在canvas物件是對您繪製所使用的<canvas> HTML元素的引用： const canvas = document.getElementById('canvas') //... const imageHTML = '<img src="' + canvas.toDataURL() + '" />'