啟動伺服器

使用以下指令來啟動Next.js伺服器
npm run dev

啟動伺服器後，前往網址 http://localhost:3000 會看到網頁會顯示 "Hello"，這是我們剛剛在檔案 pages/index.tsx 設定的。
前往 http://localhost:3000/api/led，則會看到網頁顯示 "Hello from api route"，這是在檔案 pages/api/led.ts 設定的。

比較

可以注意到雖然兩個網頁看起來是同一個樣子，但對應的兩個檔案內容完全不一樣。

這兩個檔案在類型上有所差異，前者(pages/index.tsx)是正常的網頁，後者(pages/api/led.ts)則是伺服器。Next.js會將放在api資料夾裡的所有檔案都當作是伺服器的程式碼，這個伺服器會在對應的網址第一次被拜訪時初始化，整個檔案從第一行開始由上至下執行，並在包含首次的每一次被拜訪時將 res.end() 內的東西當作回傳值。因此，"Hello from api route" 其實是被伺服器作為回傳值回傳的字串，請求(request)則是瀏覽器自動幫我們發出的，剛剛安裝的 thunder client 也是用來發出請求的工具。

第4行：定義函式 greet
第5行：當greet函式被呼叫後，在console顯示 "hey"
第10行：使用<button></button>加上按鈕。並使用 onClick={ } 為按鈕加上被點擊後執行的 function

在終端機執行 npm run dev ，前往 http://localhost:3000 。在按下按鈕後將會在終端機，或者瀏覽器的console看到 {on: '1'} 或是 {off: '1'}。

第1行：從 Johnny-five 套件引入分別用來控制板子和LED的 Board 和 Led
第4行：初始化板子，並將互動式終端機關閉
第6行：當板子初始化完成，可以使用時執行7~10行的內容
第9行：初始化Led燈，並將 pin 腳位設為 13。這表示你需要將Led燈的正極(長腳)插入Arduino開發版的pin 13，並將負極(短腳)插入pin 13旁邊的GND
第10行：讓Led以500毫秒的間隔不斷循環開關
第16行：使用if語法判斷，如果req.query包含 on ，也就是req.query.on不是falsy的undefine時，會在第17行回傳字串 "on"
第24行：如果req.query沒有包含 on 或 off，則直接將req.query原封不動地回傳

更新完成後，關閉伺服器並再次開啟，會發現Led沒有反應。接著，前往 http://localhost:3000 並按下任一按鈕，會發現Led開始閃爍，這代表我們成功地將Johnny-five加入伺服器了。

第2行：引入 nanoevents 套件
第5行：初始化事件監聽器
第13、14行：為事件監聽器加入兩個監聽值 "on"、"off"，當接收到事件(event)時會執行對應的函式。其中，led.on() 用來點亮Led，led.off() 則是關閉
第21行：當 req.query 包含 on 時，發出(emit) "on" 事件。發出事件後，第13行會接收到事件，並執行 led.on()

更新完成後，再次開啟伺服器，前往 http://localhost:3000 並只按一下按鈕 on，會發現Led閃爍了兩下後就暗掉了，並沒有照著我們寫的程式開啟Led燈。

這是因為當伺服器在接收到第一次的請求時會從第一行開始由上往下執行，當執行到第6行時開始初始化板子，接著往下執行到第21行時emit "on" 事件，問題就發生在這裡。當收到request且emit "on" 事件後，如果第6行的初始化還沒結束，也就是第8~15行 "應該在初始化結束後執行的程式" 還沒被執行時，第13、14行設定事件監聽器的程式碼自然也就還不會被執行。

為了解決這個問題，我們可以在使用者按下按鈕前，先發送一個請求來初始化伺服器，藉此提前初始化板子。

第3行：從 react 引入 useEffect hook
第12行：將side effect設定為在頁面一載入完成後發送一個get requsst到 http://localhost:3000/api/led

雖然已經解決伺服器初始化時遇到的問題了，但到目前為止我們都只能在本地端控制Led燈。透過以下指令安裝並執行localtunnel來將所有request從localtunnel提供的網址proxy到本地端的伺服器

安裝
npm i -g localtunnel

啟動
lt -p 3000

啟動後終端機會顯示一個網址，現在大家可以透過拜訪那個網址來訪問你的電腦了。