simonallen 技術部落格

Sign in Subscribe

Next.js

淺談 Jamstack 架構

前言前陣子寫 Next.js 筆記時和朋友們討論 Gatsby.js「The static dynamic site generator for dynamic web developers」部分時提到了 Jamstack，其中一位夥伴說了：那 Jamstack 跟我們寫框架的 SPA 網站不是一樣嗎？提問者後續在其他人的解釋下才理解差異。之後想想，我在Next.js 筆記中 Jamstack 也只是草草帶過，確實有必要整理一下我的認知，大家教學相長，若此篇有什麼錯誤也歡迎指證。什麼是 stack 架構？有時我們會聽到 ${Something}stack 之類的名詞，開頭的字母即為技術的縮寫組合，例如： * LAMPstack：一般稱 LAMP，包含由 L(Linux)、A(

Next.js 入門：使用 next export 輸出 static file

此篇以 Next.js 11.0.1 版為主，內容僅供參考。若要使用 Next.js SSG 額外輸出 static HTML，不打算把 SSG 的內容置於 Next.js 的 Node.js Server 上的話，光靠目前 package.json 的 scripts 指令是不夠的，我們需要使用 next export。修改 package.json scripts 使用 create-next-app 建立好預設 Next 專案後，到 package.json 修改 scripts，在 "

Next.js 入門：Error: Image Optimization using Next.js' default loader is not compatible with next export.

前陣子使用 Next.js SSG 靜態頁面遇到問題，記錄一下： SSG build time 時報錯 log 如下： Error: Image Optimization using Next.js' default loader is not compatible with `next export`. Possible solutions: - Use `next start` to run a server, which includes the Image Optimization API. - Use any provider which supports Image

Next.js 入門：建立專案與專案結構

建立專案系統要求 MacOS、Windows 和 Linux 都沒差只要有 Node.js 12.0 或更高版本即可安裝與建立 create-next-app 專案打開 terminal 輸入 npx create-next-app ${專案名稱} 等 terminal 跑完即可。 npx 指令會先檢查本地端 Node.js 是否有安裝 create-next-app，有就執行 create-next-app。沒有就下載 create-next-app 裝入當前局部執行環境，不會裝進本機電腦 Node.js 全域環境，這麼做可以避免全域被汙染。若使用者想全域安裝也可以先下 npm install create-next-app -g，自行斟酌。專案結構打開建立好的專案可以看到如下檔案階層 |--