嗯對，那個把自己網站丟著不管的SamHacker會考總算考完了。因此今天我就來分享自己發過的神經…不對，會考完用Next.js把Edge瀏覽器的首頁完全重構的心路歷程（講的好偉大但其實就是太閒…）。無論如何，先來介紹一下我最後做出來的 自訂首頁 吧。
成果展覽
對，最近科砲看太多了ww
為什麼要做一個自己的首頁？
原因其實很簡單，先前忘記是在Facebook的哪篇貼文看到有人自己做了一個Chrome的首頁，但只有一個搜尋框，也沒有CSS，我看著覺得很廢，就想著哪天啊哪天啊也有辦法自製一個。
然後就此展開了第一個挑戰，挑戰的結果在這裡，大家可以下載下來跑跑看，反正很爛XD。
為什麼選Edge不是Chrome
眾所周知，我的電腦效能真的差的可以，Chrome這個性能怪獸光憑8G記憶體加四代i5，再加一個完全體VSCode肯定餵不飽啊。
也不知道是哪次看YT有人說Edge效能比Chrome好，所以就改用Edge看看，然後…就用到現在了。但用Edge也不是沒有缺點，最大的缺點就是Edge預設的瀏覽器首頁真的太亂了，搜尋新聞天氣股票廣告應有盡有，感覺跟360或2345比也沒輸到哪裡去。就開始懷念Chrome那個簡潔的首頁了…
既然都懷念了，當然要付諸行動。又想到之前那個醜醜的首頁，就決定我這次一定要挑戰成功，至少要做到我自己滿意為止。於是這項計畫就悄悄萌芽了。
痛苦的Node.js之路
至於要怎麼寫，這也是個好問題。我希望我最後做出來的 自訂首頁有天氣預報、每日一句之類的功能，都需要到處調API，所以不能跟第一個版本一樣純前端，畢竟中央氣象局是有用到API金鑰的。
然後驀然回首看到我筆電裡躺了很久卻又沒被挖出來過的Node.js Runtime（它唯一的用途是寫靜態網站的時候用來開本地伺服器），然後就決定開始動工。
但我又是一個搞不懂React、Node.js、Next.js、VitePress、Vite、Svelte等一眾專案的差別的人，完全不知道要學什麼、路線怎麼走…最後決定，問GPT最快（對，懶蟲一個）
GPT建議我用Next.js配TaliwindCSS，用shadcn/ui作為組件庫（我都聽不懂，別問了，問就是不懂），然後我就硬著頭皮上了。
Node.js何方神聖
眾所周知（2.0），JavaScript是要仰仗瀏覽器的解釋引擎的（Chromium的V8和Mozilla的Gecko等），所以它一向只能活在前端，沒法像Python、Java等語言一樣跑在後端。而Node.js就是拯救JS的勇者。Node.js把V8引擎移植到桌面原生，也就是讓JS脫離瀏覽器的束縛，可以跑在原生系統上而不需要瀏覽器。再加上JS好學簡單的特點（跟Java比…算好了吧？），Node很快就變得有名了。
另外這件事還有個小插曲，造出Node.js的Ryan Dahl造出Node後把它賣給了Joyent公司，Joyent想拿Node來推廣自己家的服務，而結果就是…
當時的衝突來自於，Joyent 從公司的角度認為 Node.js 是他們的資產，所以對於 Node.js 有管理權是有理有據的；然而從貢獻者的角度，他們想要的是為社群貢獻，而不是為 Joyent 這間公司做免費的工。
於是社群Fork了一份名為io.js的專案走，最後Joyent放開手，交給Linux Foundation底下的Node.js基金會管理，大好結局，真棒。對我就是在說你，Next.js跟Vercel，開源專案給營利事業管真的不是好事…
為什麼是Next.js
前面說過了是GPT說的，好，收工。
沒有啦，我著手開發後發現她說的也不無道理。所以就讓我來解釋一下為什麼會這樣選：
因為安全性，放棄了簡單
如果要最簡單的開一個網站，可以直接原生HCJ（HTML、CSS、JavaScript搞定）。但前面提到了我想加天氣預報，如果直接用靜態JS抓的話必須把API金鑰曝露在外面，所以我才決定要寫動態網站，因為可以將金鑰寫在環境變數裡面，就不用怕被盜，吧。
Vue呢？
Vue.js 和Next.js 是兩個不同的前端框架，它們在架構、功能和用途上有所不同。Vue.js 是一個漸進式JavaScript 框架，專注於構建用戶界面，而Next.js 是一個基於React 的框架，專為構建伺服器端渲染（SSR）和靜態站點生成（SSG）的應用程式而設計。
Vue是一個漸進式JS框架，簡而言之就是它的語法跟原生HCJ很相近，所以我剛開始的確有想過用Vue。但一個很現實的問題擺在眼前，Next.js寫出來可以直接用到Vercel，雖然我真的不喜歡Vercel這家公司，不過人家有免費方案可以讓我暫掛這點我是很支持的，起碼人家還有點良心嘛哈哈。但可能是我的問題，反正我找不到Vue的免費託管，又不想把這個麻煩的東西丟在本機或花錢搭。所以就決定乖乖用Next了。
從排版地獄的解脫與小螢幕救星
我用的是筆電，相信沒有什麼問題。筆電一大問題就是螢幕真的小很多，小螢幕自然會造成沒法多開視窗，VSCode裡面左右開一個CSS一個HTML，再加上常駐左右邊欄（左邊檔案右邊Copilot&Gemini），可以寫的空間直接擠成壓縮檔，還要在VSCode和Chrome間切來切去的，真的是痛苦。
所以就決定用可以不用開CSS編輯的TaliwindCSS，這個東西的特色就是可以在HTML的class標籤裡直接寫CSS，也因為CSS是定義好的，因此它跟手打inline style不一樣，像字體大小、圓角等設定可以直接沿用，保持網站整體的設計，而我這個人對於這種保持整體一致性的好處真的是…啊！！
實際動工：想像還是想像，該學還是得學
這算是我第一次認真做一個Next.js的專案，跟之前小打小鬧的會考計算機比起來這個複雜很多，另外那個會考計算機是我會考倒數二十七天（對一個月）時寫的…這個人不想考試了吧…不過我還是上一中了XD
我個人覺得，義大利麵應該拌四十二號混凝土…不對拿錯稿了，我個人認為npm install真的慢的可以，所以想用yarn，然後就是npx create-next-app，結果因為忘記加--use-yarn重建了好幾遍，果然乖乖讀說明是很重要的…
建立出來了以後我簡單的切了幾個Compoments，包括時鐘、每日雞湯、搜尋框等等（雖然搜尋框我都沒在用，都用瀏覽器的網址列），然後開始了痛苦的開發人生。
依賴地獄
這只是我很想罵而已…Node.js的依賴，真的爆幹多…這個專案的node-modules我記得有到三百多M，Python都沒有這麼大（TensorFlow…PyTorch…當我沒說）
PnP模式的坑
yarn PnP，全名Plug’n’Play，也就是「隨插即用」模式，將所有依賴整合到硬碟的某個地方，要用的時候設定好引用就可以直接接上去，要用的再開不用的關掉，這是官方的想法。
但Next.js在這個模式下會直接壞掉，出現一堆莫名其妙的問題。重點是在網路上翻了半天打指令都沒效果，最後還是在StackOverflow才找到.yarnrc.yml禁用法，給各位做參考。這個功能應該還沒弄完整，所以不建議現在開啟。
nodeLinker: node-modules中央氣象局，我真的謝謝喔
喔不對，中央氣象局好像升等到中央氣象署了。
當初串氣象署的API時因為英文太爛，把county（縣）先入為主當成country（鄉村），然後還發脆笑氣象署英文不好，結果被笑…英文為什麼要做這種差一個字差很多的東西啦！！！哭喔…果然文件要乖乖看，不要憑自己的能力猜人家，除非你很屌。
另外就是中央氣象署的JSON API真的好亂…我用的是三天氣象預報（這是完整表，我住台中所以用F-D0047-073資料集），解析JSON解了不知道幾行（智慧之王 拉斐爾：答，268行），到現在問題還沒處理乾淨（懶得加try...except...了）XD。另外一個日出日落（A-B0062-001），欸拉斐爾多少？（答，75行，還有我的主人明明是利姆路…）
不過氣象局還是有好處的啦，至少他們把天氣的圖示都做好SVG了，可以直接幹走拿去用：天氣圖示的建議，直接img src組一組就好
環境部你也沒好到哪去
吐槽完中央氣象署，環境部的資料開放平台你也別跑，鞭完它就來鞭你了。
我用的是AQX_P_432資料集，解析起來也是花了我不少時間，因為懶就直接指定我家的地點再取index=0用了，解析起來比較省事。壞榜樣請勿模仿，坑我踩就好。
不過因為先前已經蠢過一次了，這次我有乖乖看資料，所以除了JSON格式很複雜外沒有太多的問題。至於這兩個API組出來的東西大概長這副樣子（另外總覺得API的資料好像跟氣象署上的資料不一樣，可能是快取的鍋吧，體感溫度41度是什麼鬼…都不用3開頭的？）：
@dndkit的拖放
為啥需要拖放？我是為了做捷徑卡片才用到這個，至於用dnd的原因當然也是GPT介紹，這就沒有那麼多可以解釋的，然後寫得很痛苦，寫完才發現Copilot有Agent Mode可以用…RRRR
Local Storage
上一篇寫的是最常用到的 Cookie，裡面也有寫到 Cookie 通常是存有目的性的資料。如果只是想存一些不重要的資料，像是內容網站上很常會有的 放大 / 縮小 文字的按鈕，或是切換深色模式的操作，總不能使用者今天點了一次文字放大後，下次再進來頁面還得再點一次，這時就可以選擇存在瀏覽器上。而像這種不是很重要的記錄存取，就可以選擇 localStroage。
使用 Local Storage 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第二篇）
眾所周知（第三次了！），一個網站要存資料在用戶端常見的有三種方式，Session Storage、Local Storage、Cookie。
小甜品Cookie
Cookie是最常用的瀏覽器資料儲存功能，在送出網頁請求時會很順便地被和其他HTTP請求一起被送出去，它有過期時間，通常是看程式怎麼設定，例如三十天內自動登入之類的。一般而言常被用在「記住我的帳號」、「個人化設定資料」，當然，還有最該死的萬惡的根源，廣告ID與追蹤。真的是萬惡…
應該說，這算不算來自天堂的魔鬼？
Session Storage
Session Storage在關閉分頁後就會自動被刪除，所以一般被用來儲存如Google表單切頁面時暫存目前填到的內容、上下一步的時候等。他是存在本地的，所以一般不會被傳到對端伺服器上。也因為不用傳到對端，所以它比最多只能4KB的Cookie還大，最多可以存5MB。
Local Storage
空間跟Session Storage差不多大，應該說，它跟Session Storage的差別只有這個東西除非你手動刪或程式有寫到刪除，否則Local Storage理論上會一直被留著。
主要用在如儲存網站的主題、字體大小等設定，或跨頁面的數據傳遞等，理論上Google文件的離線功能也可以用Local Storage辦到。
而我決定選用Local Storage的原因很簡單，個人書籤的事每個人都不一樣，所以不可能伺服器端開Database，不然我連登入的功能都得寫，太累了。如果存Session Storage重開就沒了當然也不行，Cookie的話也沒必要，我打算把這個元件設成"use client"模式，所以Cookie會自動傳到伺服器端的功能對我沒用。刪去法刪一刪剩下的也只有Local Storage了。
.env.local
寫API金鑰的配置文件，我基本是毫無疑問就選了.env.local，原因也很簡單：這是通用的。
什麼叫做通用？在我的電腦上可以寫.env.local，在Vercel雲上也可以用面板設環境變數，不管用什麼方法設定，最後程式用一樣的語法就可以讀了。我設定Vercel自動抓Git的最新推送去編譯Production，因此不能靠配置檔格式，不然我把API Key推到Git儲存庫嗎？
這就是我用.env.local的原因，據說好像有人介紹一個叫TOML的設定語言，雖然我看過之後覺得這個跟ini好像是…「那晚，你們是不是發生了什麼…」
CWA_OPENAPI_AUTHCODE=CWA-23456789-1012-1314-1516-17181920212
CWA_OPENAPI_ENDPOINT=https://opendata.cwa.gov.tw/api/v1/rest/datastore
MOE_DATA_APIKEY=23456789-1011-1213-1415-161718192021
MOE_DATA_ENDPOINT=https://data.moenv.gov.tw/api/v2環境變數配置如上，說明的話讀我檔那邊有就不說了。
吐槽一下，Copilot你個大聰明
為甚麼這個程式跑不起來？你根本沒把lucide-react的引入打完，能跑起來算你刑啊。不過它會自己發現錯誤，還會自己修正。難怪有人說未來AI得跟我們好好相處，這麼強了你能怎樣w
現在的成果長什麼樣子？
我目前已經做到一個我滿意的地方了。Chrome瀏覽器用New Tab Redirect外掛（Edge的我用這個），把網站推到Vercel上面（就開Vercel連一下，環境變數設定好就好）
寫在最後，這次製作帶給我的改變
放暑假了，但我個人是個沒事做很無聊反而不喜歡的人。Coding有風險，投入須小心，但我從國小那隻橘貓開始的坑就越挖越深了。不過做這些東西的時候我感覺我是開心的，即使路上跌跌撞撞都是Bug，還是能看著設計稿想像它完成的樣子；而當它以我想像中的樣子出現在電腦螢幕上，那種成就感可不是三言兩語可以說清楚的。所以我並不後悔學程式語言，「可以投入自己熱愛的事物並朝著目標前進，才是人生的最大意義」－SamHacker, 2025/7/2。
這次的開發總算圓了我想學Node.js的夢，回想初見Node.js，那時候我想學的原因只是看別人寫出來的網站覺得很美，比我用Elementor拉半天還要好看。以前我學一套程式語言都是想好要拿它幹嘛，然後就裝好環境，估狗教學，卯著頭去幹。但Node的學習曲線真的很亂，也許是它功能強大的關係吧？我想學，卻不知道從哪裡開始好。網路上教學都是主要介紹一個工具，卻沒有人願意說想用Node寫網站該先學哪些事物。
而如果現在要問我，我只會告訴你：
「都要學，所以做中學吧。找好一個想做的東西，然後就卯著頭幹！」
另外，當然還是要感謝一下ChatGPT跟Copilot的幫忙啦。你真的覺得全都是我寫出來的嗎？那你肯定不知道有個東西叫Vibe Coding。
最後，附上這個專案的使用教學。
你想用嗎？想用嗎想用嗎？
想用的話準備好Git和Node.js環境，記得一定要有GitHub帳號，可以的話備一個自己的網域更好！
先確定你電腦裡有Git，沒有的話上網查教學，通常管理員開PowerShell打這行指令就夠了：
winget install --id Git.Git -e --source winget確定有git後，直接克隆我的專案下來：
git clone https://github.com/510208/browser-homepage.git克隆完成後cd進克隆出來的資料夾（cd browser-homepage），確保電腦有Node.js與npm，執行以下指令：
# 需要先安裝Yarn，沒有的請自行查詢安裝說明
# 或者直接裝antfu/ni，用這個東西快速裝依賴也可以
# 安裝依賴
yarn install設定檔說明都放在儲存庫裡，請點以下按鈕前往說明：
先前往我國的中央氣象署開放資料平台，我們需要取得它所提供的API金鑰。註冊登入後GMail就會收到一封內含你的驗證碼（就是我們要的API金鑰）的信。
再來前往環境部環境資料開放平台，註冊登入後一樣可以取得一組驗證碼。取得兩組驗證後照這邊的說明建立環境變數文件並貼上剛剛的驗證碼，API端點一般保持預設即可。
按上面按鈕，用自己的GitHub帳號登入並填寫表單。會要求你指定一個自己的儲存庫用於安放我的程式碼。命名後按Create，環境變數照先前設定的，把那個檔案裡的內容直接貼進Vercel就行了。
輸入指令推入自己的遠端儲存庫，{your_user_name}填自己的GitHub帳號，{project}填第六步指定的儲存庫：
# 我記得是這個
git remote set-url origin https://github.com/{your_user_name}/{project}.git
git commit -a -m "Configure"
git push可以前往Vercel的後台看看部署的如何，跑完它會給你一個網址。如果要自訂網域可以照官方文件說的處理。
然後安裝前面提到的外掛，設定好網址就可以用了。
Chrome瀏覽器用New Tab Redirect外掛（Edge的我用這個）
前面提過了…